DESIGN.md

# Design

## Theme

Dark-mode personal devtool dashboard. Mood: "precise switchboard at night."

## Color strategy

Restrained: near-black surface, off-white text, one warm primary, one cool functional accent.

```css
:root {
  --bg: oklch(0.08 0 0);          /* deep void, not pure black */
  --surface: oklch(0.12 0 0);      /* cards, panels */
  --surface-2: oklch(0.16 0 0);    /* hovered/elevated cards */
  --ink: oklch(0.94 0 0);          /* primary text */
  --muted: oklch(0.62 0 0);        /* secondary text */
  --primary: oklch(0.68 0.13 38);  /* warm coral — links, active states */
  --primary-text: oklch(1 0 0);    /* white text on primary fills */
  --accent: oklch(0.72 0.12 175);  /* teal — status, success, online */
  --warning: oklch(0.76 0.12 85);  /* amber — caution states */
  --danger: oklch(0.62 0.16 25);   /* red-orange — errors */
  --border: oklch(0.22 0 0);       /* subtle dividers */
}
```

## Typography

- **Body/UI**: system-ui, sans-serif
- **Code/keys/endpoints**: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace
- **Scale**: tight, functional. Page title is the only large type; everything else is small-to-base.

## Layout

- Single-column centered container, max-width 720px.
- Generous vertical rhythm between sections.
- Cards are rare; prefer grouped rows with clear labels.
- One prominent hero section at top: status indicator + endpoint URL.

## Components

- **Status pill**: small rounded badge with dot + label.
- **Key row**: label + masked key + copy/visibility toggles.
- **Provider card**: compact block with provider name, configured flag, sample model.
- **Code block**: dark panel with monospace text and copy button.

## Motion

Low intensity. Subtle hover transitions on interactive elements (150ms ease-out). No entrance animations that gate content. Respect `prefers-reduced-motion`.