Quiet, technical open-source restraint — the most understated developer surface in the library, where small type, tiny radii and a single warm hairline do all the work and the only colour is the logo. The canvas is a warm off-white #fafaf9 and the chrome is monochrome Tailwind-neutral (ink #0a0a0a, greys #737373 and #404040), set in Inter for UI and IBM Plex Mono for code, with NO chromatic UI accent anywhere. Three signatures give it character: the display is deliberately SMALL at 24px weight 400, so emphasis comes from weight 600 on 14px sub-labels rather than scale; the dominant card border is a warm brown-black #27201c rather than a cool grey; and elevation is a hard OFFSET shadow (#f0f0f0 6px 6px 0, no blur) that reads like a printed card. Buttons are compact 36px near-black #171717 rectangles at a tiny 6px radius with a white outline secondary, while the search field is a full pill and the Agent/Search segmented tab fills pure black when active. The one moment of life is a WebGL canvas driving an animated data-flow search visualization; there are no CSS gradients, no soft drop shadows and no dark theme. Motion is a fast 0.15s cubic-bezier(0.4,0,0.2,1), and the site ships infinite animations with no reduced-motion block.
Browse Chroma in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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#fafaf9canvas, 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-datakeyframes). Colour is otherwise absent from chrome — only the multicolour logo mark carries it.
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.
| 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 |
| 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 |
| 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.
#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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.