Friendly, high-energy productivity brand: a white canvas broken by full-bleed pastel washes, an enormous chunky Calibre display at a heavy 700 with unusually tight -3.24px tracking over a relaxed Inter 22/34 body, small 8px black and outlined buttons, and colour spread across a multi-hue accent set (orange, amber, navy, blue, green) in illustrations and status pills rather than one brand fill.
Browse Coda 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: coda.io (live DOM, computed styles), 2026-07-18 (desktop 1512px). Coverage: home / marketing. Workspace app: pending login (needs-dashboard). Responsive: breakpoints from tokens only; mobile rendering not verified. Note: the site now carries a "Coda is now Superhuman Docs" banner; the captured design system is still Coda's own (distinct from thesuperhumancapture in this library).
Friendly, high-energy productivity brand: a white canvas broken by full-bleed pastel section washes (warm cream, pale lavender) and headed by an enormous Calibre display set at a heavy 700 with unusually tight negative tracking (-3.24px at 72px), so headlines read as chunky and confident rather than elegant. Body drops to calm Inter at a generous 22/34, which keeps the page readable under the shouting display. Chrome is near-black #212121 on white with small 8px-radius buttons — a black primary beside a white outlined secondary. Colour is applied as broad, soft section fills plus a multi-hue product accent set (orange, amber, navy, blue, green) rather than a single brand colour, with the orange #ee5a29 announcement banner as the loudest note. Feels: friendly, energetic, approachable, practical.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #ffffff | Page background |
| cream | #fff6ec | Warm cream full-bleed section wash |
| pale-blue | #dbeefa / #cddcf2 | Pale blue panels / illustration fills |
Additional pale washes (a lavender band) are visible on the live page but their exact values were not captured.
| Token | Hex | Role / usage |
|---|---|---|
| ink | #212121 | Headlines, primary text |
| black | #000000 | Primary button fill |
| muted | #666666 | Sub-headlines, body secondary |
| muted-2 | #696969 / #555555 | Tertiary text |
| faint | #8e8e8e | Captions, placeholder |
| Token | Hex | Role / usage |
|---|---|---|
| orange | #ee5a29 | Brand accent, announcement banner |
| amber | #f8ad40 | Secondary accent / illustration |
| navy | #27455c | Deep accent / illustration |
| blue | #3860be | Accent / links |
| sky | #1981c1 | Accent / illustration |
| green | #346e4a | Accent / illustration |
| Token | Hex | Role / usage |
|---|---|---|
| border | #e9e9e9 | Hairlines, outlined button border |
Rule: chrome stays near-black on white; colour arrives as broad soft section washes and as a multi-hue accent set inside illustrations and product UI — not as a single dominant brand colour. The orange is reserved for the banner and brand moments.
Calibre-R, Inter, system-ui, sans-serif — heavy 700 with very tight negative tracking.Inter, system-ui, sans-serif.Tiempos-Headline — rare, occasional accents.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 72 / 72 | 700 | -3.24px (-4.5%) |
| Section (h2) | 38 / 41.8 | 700 | -0.95px |
| Sub / lead | 22 / 34 | 400 | normal, Inter, #666666 |
| Body / UI | 14–16 | 400 | normal, Inter |
| Button | 16 | 600 | normal |
Patterns: the signature is Calibre at 700 with tracking pulled far negative (-4.5% at display size) against a relaxed Inter body at 22/34. The weight jump (700 vs 400) carries the hierarchy.
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.