# Design Context

## Target Audience
All segments: solo developers experimenting with MCP, engineering teams building AI products, and enterprise orgs managing API integrations at scale. The product serves different needs at different plan tiers.

## Brand Personality
Developer-focused. Monochromatic, precise, Vercel-inspired — minimal chrome, maximum clarity. The interface should feel like a professional engineering tool built by engineers who care about craft.

## Design Principles
- **Precision over decoration** — every element earns its place
- **Data-first** — numbers and charts speak, chrome stays quiet
- **Monochromatic confidence** — pure grays, one accent blue, no tinting
- **Technical clarity** — monospace for data, clear hierarchy, no hand-holding
- **Snappy, not floaty** — 150ms transitions, no staggered entrances

## Quality Bar
Flagship — this is a selling point. Pixel-perfect, every detail matters.

## Design System
- **Colors**: Monochromatic gray scale (0% saturation). Blue primary accent (217 91% 60%). Status colors: green/yellow/red. Dark bg: #0a0a0a, light bg: #ffffff
- **Tokens**: status-success/warning/error/info, surface-1/2/3 (pure grays)
- **Typography**: Geist Sans for all text, Geist Mono for code/data. Standard Tailwind sizes (no fluid scale)
- **Navigation**: Top navbar + horizontal tab bar (no sidebar)
- **Cards**: Thin 1px border only — zero shadows, zero background lift
- **Radii**: 6px (0.375rem) for buttons/inputs, 8px (0.5rem) for cards. Max 12px
- **Transitions**: 150ms ease-out for all interactions
- **Buttons**: Ghost default, filled only for primary CTA
- **Empty states**: Minimal — small icon + text, no dashed borders or illustrations
- **Components**: Shadcn/Radix primitives via @apifold/ui package
