# Coda — Marketing Site Design Spec

> 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 the `superhuman` capture in this library).

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Surfaces
| 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`.

### Text
| 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 |

### Accent — multi-hue product set
| 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 |

### Borders
| 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.

## 3. Typography Rules

- Display: `Calibre-R, Inter, system-ui, sans-serif` — heavy 700 with very tight negative tracking.
- UI / Body: `Inter, system-ui, sans-serif`.
- Editorial 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.

## 4. Component Stylings

### Buttons
- **Primary (black)**: bg `#000000`, white text, radius `8px`, h `40px`, 16px 600. ("Get started".)
- **Secondary (outlined)**: white bg, 1px `#e9e9e9` border, ink `#212121` text, same radius/height. ("Request a demo".)
- **Inline arrow link**: ink text with a trailing arrow, 14–16px.

### Nav
- White bar: bold "coda" wordmark left, dropdown links (Product / Solutions / Resources) then Gallery / Blog / Pricing, right outlined Request-a-demo + black Get-started.

### Announcement banner
- Full-width orange `#ee5a29` strip with near-black bold text and an inline arrow link.

### Cards / panels
- Rounded panels at `8–12px` (up to `20px` / `44px` for larger shapes) holding product screenshots and illustrations over the pastel washes.

### Inputs
- Not prominently captured on marketing. Focus ring not captured.

## 5. Layout Principles

- Full-bleed horizontal bands: white and pastel washes alternate down the page.
- Left-aligned hero content within a wide container; display headline wraps across 2–3 lines.
- Generous vertical padding per band; product imagery sits inside rounded panels.

## 6. Depth & Elevation

- Radii: `2px`, `3px`, `4px`, `8px` (buttons/cards), `12px`, `20px`, `44px` (large shapes).
- Elevation: largely flat — full-bleed colour bands and hairline `#e9e9e9` borders separate content rather than shadows.

## 7. Motion

- Restrained: hover shifts on buttons and links; dropdown nav menus. No heavy scroll library confirmed.

## 8. Backgrounds, Effects & WebGL

- Flat, broad colour bands (white, warm cream `#fff6ec`, pale washes) plus flat vector illustration in the multi-hue accent set.
- No gradients, grain or WebGL captured.

## 9. Do's and Don'ts

### Do
- Set headlines in Calibre at 700 with very tight negative tracking (-3.24px at 72px).
- Keep body in Inter at a relaxed 22/34 in `#666666` under the heavy display.
- Break the white canvas with full-bleed pastel washes such as warm cream `#fff6ec`.
- Use small `8px` buttons: a black primary beside a white outlined secondary.
- Spread colour across a multi-hue accent set (orange, amber, navy, blue, green) in illustrations, not as one dominant brand fill.
- Reserve orange `#ee5a29` for the announcement banner and brand moments.

### Don't
- Don't set the display light or loose — the chunky 700 at tight tracking is the identity.
- Don't make buttons full pills; they are 8px rectangles.
- Don't add drop shadows; colour bands and hairlines do the separating.
- Don't collapse the palette to a single accent — the multi-hue set is deliberate.

## 10. Responsive Behavior

- Bands stack and type scales down; nav collapses on mobile (markup present). Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Cream wash `#fff6ec` · Ink `#212121` · Muted `#666666` · Border `#e9e9e9` · Accents orange `#ee5a29`, amber `#f8ad40`, navy `#27455c`, blue `#3860be`, green `#346e4a`
- Fonts: Calibre-R 700 (display, -3.24px) / Inter 400 (body 22/34) · Radius 8px button/card · Button height 40px, 16px/600
- Focus: not captured · Hover: subtle darken on buttons

<coda_design_language>
Use the Coda design language: a friendly, high-energy productivity brand on a white canvas broken by full-bleed pastel section washes (warm cream #fff6ec and other pale bands), headed by an enormous Calibre display at a heavy 700 with unusually tight negative tracking (72px at -3.24px, sections 38px at -0.95px) in near-black #212121. Body relaxes to Inter at 22/34 in #666666, and the 700-vs-400 weight jump carries the whole hierarchy. Chrome is near-black on white with small 8px-radius buttons — a black #000 primary beside a white outlined secondary bordered #e9e9e9, both 40px tall at 16px/600. Colour is deliberately spread across a multi-hue accent set — orange #ee5a29, amber #f8ad40, navy #27455c, blue #3860be, sky #1981c1, green #346e4a — living in flat vector illustration and product UI rather than one dominant brand fill, with the orange reserved for a full-width announcement banner. Surfaces are flat: broad colour bands and #e9e9e9 hairlines separate content instead of shadows, with radii from 2px up to 8/12/20/44px. Feels: friendly, energetic, approachable, practical. Avoid: a light or loosely-tracked display, full-pill buttons, drop shadows, or collapsing the palette to a single accent.
</coda_design_language>