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

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

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