# models.dev — Design System

## 1. Visual Theme & Atmosphere

Models.dev is a **developer reference tool** dressed in restrained utility clothing. Built with Svelte, the interface uses a white canvas with a single navy-blue accent (#021093) — almost identical in philosophy to a Unix manual page, but softened by Rubik's rounded letterforms. Orange (#fd9527) appears exclusively on CTAs, creating an urgent contrast against the calm blue/white field. IBM Plex Mono handles all code contexts. The result is a site that respects the developer's attention: functional, scannable, never decorative.

## 2. Color Palette & Roles

| Role | Value | Usage |
|------|-------|-------|
| Background | `#ffffff` | Page canvas |
| Body Text | `#333333` | Primary readable content |
| Secondary Text | `#666666` | Links, secondary information |
| CTA / Button | `#fd9527` | Call-to-action buttons only |
| Accent / Footer | `#021093` | Footer, navigation accents |
| Footer Text | `rgb(252, 252, 252)` | Text on navy surfaces |

Orange is used exclusively for action triggers — never for decoration. This keeps the hierarchy unambiguous.

## 3. Typography Rules

- **UI font**: Rubik — geometric, slightly rounded sans-serif; approachable yet precise
- **Code font**: IBM Plex Mono — the authoritative choice for developer documentation
- **H1**: 16px / 25.6px weight 600, UPPERCASE — compact but commanding
- **H2**: 16px / 16px weight 500, UPPERCASE — dense stacking for reference content
- **Body / P**: 14–16px / 22px weight 400 — readable at sustained scan depth
- **No letter-spacing overrides** on body text; UPPERCASE headings rely on natural caps spacing

| Level | Font | Size | Weight | Transform |
|-------|------|------|--------|-----------|
| H1 | Rubik | 16px | 600 | UPPERCASE |
| H2 | Rubik | 16px | 500 | UPPERCASE |
| Body | Rubik | 16px | 400 | none |
| P | Rubik | 14px | 400 | none |
| Code | IBM Plex Mono | 13px | 400 | none |

## 4. Component Stylings

- **Buttons**: Orange (#fd9527) fill, white text, 4px radius — functional, unmissable
- **Cards**: White on white with likely 4px radius borders — flat, minimal
- **Navigation**: Navy text, transparent background
- **Code blocks**: IBM Plex Mono — distinct visual register from prose
- **Border radius**: 4px only — consistent across all elements

## 5. Layout Principles

- **Framework**: Svelte — component-based, highly performant
- **Breakpoints**: 751 / 752 / 1145 / 1512px — custom breakpoint ladder suggesting bespoke grid design
- **Grid**: Centered content column; likely sidebar or two-column reference layout
- **Spacing**: Custom scale; generous reading whitespace in reference sections

## 6. Depth & Elevation

- No box shadows detected
- Flat UI — depth through typographic hierarchy and color zones
- Orange buttons provide sufficient visual pop without elevation tricks

## 7. Do's and Don'ts

**Do:**
- Reserve orange for interactive CTAs only
- Use UPPERCASE for all H1/H2 headings — it defines the reference-tool character
- Switch to IBM Plex Mono for any code or monospaced content
- Keep border radius at 4px across all elements

**Don't:**
- Use orange decoratively — it signals "action"
- Mix Rubik weights above 600
- Add shadows — the flat system is intentional to the developer tool aesthetic

## 8. Responsive Behavior

- Custom breakpoints: 751 / 752 / 1145 / 1512px
- Reference grid collapses to single column on mobile
- Code blocks scroll horizontally on narrow viewports
- Navigation simplifies at mobile widths

## 9. Agent Prompt Guide

> "Design in the style of models.dev: white background, deep navy `#021093` footer accent, orange `#fd9527` CTAs only, Rubik sans-serif at 14–16px with UPPERCASE headings, IBM Plex Mono for code, 4px border radii, flat no-shadow interface, Svelte component architecture."

**Quick reference:**
- Background: `#ffffff`
- Body text: `#333333`
- CTA: `#fd9527` (orange)
- Accent: `#021093` (navy)
- UI font: Rubik
- Code font: IBM Plex Mono
- Border radius: 4px

*Generated by Sparkbites — extracted from live CSS analysis*