# Chroma — Marketing Site Design Spec

> Source: trychroma.com (live DOM, computed styles), 2026-07-26 (desktop 1512px).
> Coverage: home page. Dashboard behind login (`needs-dashboard`). Tailwind v4 site (neutral ladder + `--tw-ease`); the red/orange/amber `--color-*` ladders are Tailwind defaults used for docs/data, excluded from the brand palette.
> Reality check: hint ("clean light, restrained technical") is accurate and, if anything, understated. This is the most restrained developer surface in the library — a warm off-white `#fafaf9` canvas, monochrome Tailwind-**neutral** chrome, Inter + IBM Plex Mono, and the display is an unusually SMALL **24px** (restraint by SIZE, not weight). Three signatures the hint misses: the dominant border is a warm brown-black **`#27201c`** (not a cool grey); depth is a **hard OFFSET shadow `#f0f0f0 6px 6px 0 0`** (no blur, sticker-like); and the hero visual is a **WebGL `<canvas>`** (1280×865) driving an animated data-flow search visualization (`flow-down`/`flow-data` keyframes). Colour is otherwise absent from chrome — only the multicolour logo mark carries it.

## 1. Visual Theme & Atmosphere

Quiet, technical, open-source restraint — a warm off-white developer surface where small type, tiny radii and a single warm-brown hairline do all the work, and the only colour is the logo. Nothing shouts: the hero headline is just 24px, buttons are compact near-black rectangles, and structure comes from 1px borders plus a flat offset shadow that reads like a printed card. The one moment of motion and life is a WebGL data-flow visualization behind the product demo. It deliberately avoids gradients, large display type, colour accents and heavy shadows. Feels: restrained, technical, precise, calm.

## 2. Color Palette & Roles

### Neutral ladder (Tailwind neutral)
| Token | Hex | Role / usage |
|---|---|---|
| neutral-950 | `#0a0a0a` | Primary text (970 uses) |
| neutral-900 | `#171717` | Primary button fill |
| neutral-800 | `#262626` | Deep text |
| neutral-700 | `#404040` | Body / caption text |
| neutral-600 | `#525252` | Secondary text |
| neutral-500 | `#737373` | Muted |
| neutral-400 | `#a1a1a1` | Faint |
| neutral-300 | `#d4d4d4` | Border |
| neutral-200 | `#e5e5e5` | Button / card border |
| neutral-100 | `#f5f5f5` | Inset fill |
| neutral-50 | `#fafafa` | Button text on dark |

### Surfaces & borders
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#fafaf9` | Page background (warm off-white) |
| white | `#ffffff` | Cards, inputs, buttons |
| panel | `#f9fafb` | Section fill |
| brown-border | `#27201c` | Dominant card border (warm brown-black, 43×) |
| border-cool | `#d1d5dc` | Input border |
| slate-600 | `#4a5565` · `#364153` | Slate-tinted secondary text / placeholder |
| offset-shadow | `#f0f0f0` | Hard offset shadow colour |

### Accent
| Token | Hex | Role / usage |
|---|---|---|
| logo gradient | multicolour | The Chroma logo mark only — a raster asset, not a `:root` token; exact stops not captured |

Rule: chrome is monochrome neutral; colour appears only in the logo mark. No chromatic accent in UI.

## 3. Typography Rules

- Stack: **Inter** (1108×) for everything, **IBM Plex Mono** (296×) for code, labels and data. (Both are open Google fonts — the preview uses the real faces.)
- Body: 16px / 24px / 400 / `#404040`–`#0a0a0a`.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 24 / 36 | 400 | normal |
| Section (h2) | 16 / 24 | 400 | normal |
| Sub (h3) | 14 / 20 | 600 | normal |
| Body | 16 / 24 | 400 | normal |
| Caption | 12 / 16 | 400 | normal |
| Nav | 16 / 24 | 400 | normal |
| Button | 14 / 20 | 500 | normal |
| Mono / code | 16 | 400 | normal, IBM Plex Mono |

Patterns: the display is deliberately SMALL (24px) at weight 400 — restraint by size. Tracking is normal everywhere. Emphasis is weight 600 on small sub-labels, not scale.

## 4. Component Stylings

### Buttons
- **Primary**: bg `#171717`, text `#fafafa`, radius 6px, h 36px, Inter 14/500, no shadow.
- **Secondary**: bg `#ffffff`, text `#0a0a0a`, 1px `#e5e5e5` border, radius 6px, h 36px.
- **Segmented tab (Agent/Search)**: active bg `#000000`, text white, radius 0px (square); inactive transparent, text `#000000`.
- **GitHub badge**: transparent, text `#0a0a0a`, radius 6px, 14/500.

### Inputs
- Search field: bg `#ffffff`, 1px `#d1d5dc` border, radius full (pill), h 42px, placeholder `#364153`.
- Standard fields: 1px `#e5e5e5`/`#d1d5dc`, radius 6px.

### States
| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary | `#171717` / `#fafafa` | darkens/opacity | focus-visible ring (Tailwind) | — | opacity |
| Secondary | white, 1px `#e5e5e5` | border/bg shift | focus-visible ring | — | — |
| Segmented tab | transparent | — | — | active fills `#000000` | — |

### Cards / panels
- Fill white, **1px `#27201c` border**, radius 6px, with a **hard offset shadow `#f0f0f0 6px 6px 0 0`** (no blur) — the signature elevation. Logo-wall cards: `#f9fafb` fill, grayscale logos.

## 5. Layout Principles

- Tailwind container scale (`--container-*`), rem breakpoints, `--spacing` base.
- Nav: gradient logo + "Chroma" wordmark left, links (Products/Docs/Research/Resources/Pricing), right actions (GitHub star badge, Log in outline, Sign up dark).
- Hero: left-aligned small display → body → dual CTA (dark primary + outline) → "get started locally" text link → grayscale logo wall → segmented Agent/Search demo panel with the WebGL viz.

## 6. Depth & Elevation

- Radius scale: **6px** (dominant, 17×) · 8px · 4px · 2px · 10px · full pill (search input).
- Borders: **1px `#27201c`** (warm brown-black, dominant 43×) · 1px `#e5e5e5` · 1px `#d1d5dc` · 1px `#d4d4d4` · 1px `#364153`.
- Elevation: the signature is a **flat OFFSET shadow `rgb(240,240,240) 6px 6px 0 0`** (no blur, 7×) — a printed-card look. No soft drop shadows.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color, background, border, fill, stroke | ~.15s | cubic-bezier(0.4,0,0.2,1) | links, buttons (dominant, 59×) |
| all | 0.15s | cubic-bezier(0.4,0,0.2,1) | general chrome (26×) |
| transform/translate/scale | 0.3s | cubic-bezier(0.4,0,0.2,1) | hovers |

House easing: **cubic-bezier(0.4,0,0.2,1)** (Tailwind default). Signature keyframes drive the search viz: `flow-down` (2s infinite), `flow-data` (1.5s infinite), `grow-line`, `reasoning-pulse`, `blink-enterprise`; plus `accordion-down/up`, `spin`, and Sonner toast keyframes. Also a reveal easing `cubic-bezier(0.22,1,0.36,1)`. No animation library detected (Sonner toasts present). **No `prefers-reduced-motion` block despite infinite animations — recorded as an anti-pattern.**

## 8. Backgrounds, Effects & WebGL

- **0 CSS gradients, 0 grain, 0 video.**
- **One WebGL `<canvas>` (1280×865)** renders the animated data-flow search visualization (fed by `flow-down`/`flow-data`).
- 1 raster layer (the logo mark). No backdrop-filter. Surfaces are otherwise flat solid colour.

## 9. Do's and Don'ts

### Do
- Keep chrome monochrome on the Tailwind neutral ladder over a warm `#fafaf9` canvas.
- Keep the display SMALL (24px, weight 400) — emphasise with weight 600 on sub-labels, not scale.
- Use Inter for UI and IBM Plex Mono for code, labels and data.
- Border cards with the warm brown-black `#27201c` at 6px radius and a hard `#f0f0f0 6px 6px 0` offset shadow.
- Keep radii tiny (6px) and controls compact (36px); use a full pill only for the search field.
- Reserve all colour for the logo mark and the data visualization.

### Don't
- Don't add a chromatic UI accent — chrome is neutral.
- Don't scale the display up or bold it — restraint is by size.
- Don't use soft blurred drop shadows; the elevation is a flat offset shadow.
- Don't add CSS gradients — atmosphere is the WebGL viz, not gradients.
- Don't ship infinite animations without a reduced-motion block (fix the anti-pattern).

## 10. Responsive Behavior

- Breakpoints (from stylesheets): `40rem / 48rem / 64rem / 80rem / 96rem` (Tailwind defaults) plus a bespoke `max-width: 600px`.
- Nav collapses to a menu; hero and demo panel stack; logo wall wraps.
- No dark theme (`darkSchemeBlocks` 0). **4 container queries**, **0 reduced-motion blocks**.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#fafaf9` · Text `#0a0a0a` · Muted `#737373` · Border `#27201c` (cards) / `#e5e5e5` (controls) · Accent: none (logo only)
- Font: `Inter` (body 16px/400) + `IBM Plex Mono` · Radius: 6px controls/cards, full pill search · Control height: 36px
- Focus: Tailwind focus-visible ring · Shadow: offset `#f0f0f0 6px 6px 0 0` (no blur)

<chroma_design_language>
Use the Chroma design language: quiet, technical open-source restraint. Warm off-white `#fafaf9` canvas, monochrome Tailwind-NEUTRAL chrome (ink `#0a0a0a`, greys `#737373`/`#404040`/`#525252`, surfaces `#ffffff`/`#f9fafb`), and NO chromatic UI accent — colour appears only in the multicolour logo mark. Type is Inter for UI and IBM Plex Mono for code/labels/data; the display is deliberately SMALL at 24px weight 400 (emphasis is weight 600 on 14px sub-labels, never scale), tracking normal throughout. Buttons are compact 36px near-black `#171717`/`#fafafa` rectangles at 6px radius with a white 1px `#e5e5e5` secondary; the search field is a full pill with a `#d1d5dc` border. Cards carry a warm brown-black `#27201c` 1px border at 6px radius and the signature elevation — a HARD OFFSET shadow `#f0f0f0 6px 6px 0 0` with no blur, like a printed card. Radii stay tiny (6px). Motion is a fast cubic-bezier(0.4,0,0.2,1) on colour/transform, and a WebGL canvas drives an animated data-flow search visualization (flow-down/flow-data) — the only real colour and movement. No CSS gradients, no soft drop shadows, no dark theme. Feels: restrained, technical, precise, calm. Avoid: a chromatic UI accent, a large or bold display, soft blurred shadows, CSS gradients, and shipping infinite animations without a reduced-motion block.
</chroma_design_language>