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.

: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.