---
name: Coda
tagline: 'White-canvas productivity surface — Calibre display over Inter body, near-black UI with a single confident #0066ff blue and warm-cream callouts.'
updated_at: 2026-05-29T21:44:57.076Z
published_at: 2026-05-29T21:44:57.076Z
author: webdesignhot
source_url: https://coda.io
spec: webdesignhot/0.1
quality: curated
featured: false
categories: [saas]
tags: [light, sans, structured]
preview_swatch: ['#ffffff', '#0066ff', '#f8ad40']
related: [notion, linear, stripe]
description: 'Coda''s marketing surface is the all-in-one document workspace made literal — a paper-white `#ffffff` canvas, Calibre as the confident display face over Inter for body, and near-black `#212121` text that never quite hits pure black. Primary CTAs are solid black (`#000000`) pills at 8px radius; the signature accent is a single decisive `#0066ff` blue reserved for links, focus, and interactive emphasis. Warm-cream callouts (`#fff6ec` → `#ffe6c9`) and an amber highlight (`#f8ad40`) carry the only non-blue chroma — the document-block flavour that makes a Coda page feel like a structured doc rather than a generic SaaS landing. The card primitive holds at 12px, buttons at 8px, and the whole system reads productivity-first: calm, legible, structured.'


# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
  background: bg
  foreground: text
  primary: brand
  primary-foreground: on-brand
  accent: accent
  muted: text-muted
  border: border
  ring: brand

colors:
  bg: '#ffffff'              # paper-white canvas; the document page made literal
  surface: '#ffffff'         # cards default to white; depth via border + tone
  surface-soft: '#fafafa'    # softest panel tint, a half-step off white
  surface-muted: '#f0f0f0'   # --neutral200; panel/callout neutral ground
  text: '#212121'            # rgb(33,33,33); near-black body, never pure #000
  text-muted: '#444444'      # rgb(68,68,68); secondary CTA + metadata grey
  text-faint: '#717171'      # tertiary captions, timestamps, placeholders
  brand: '#0066ff'           # rgb(0,102,255); single confident action/link blue
  brand-hover: '#0052cc'     # pressed/hover step into deeper blue
  brand-soft: '#e6efff'      # soft action tint surface for selection & info
  cta-primary: '#000000'     # solid-black primary "Get started" pill
  on-brand: '#ffffff'        # white text on black CTA / blue accent
  accent: '#f8ad40'          # --block-color-highlight; warm amber highlight
  accent-cream: '#fff6ec'    # warmest callout/cream surface tint
  accent-callout: '#ffe6c9'  # --block-callout-background; peach callout fill
  accent-warm: '#f0e5dc'     # --block-color-accent-light; warm sand panel
  block-green: '#006838'     # --codaBrandGreen; document-block decorative green
  border: '#e3e3e3'          # standard hairline divider on white
  border-soft: '#ededed'     # lighter nested divider / table row line
  border-strong: '#cccccc'   # emphasised divider / form field border
  success: '#1a7f4b'         # confident editorial green
  success-bg: '#e7f4ec'      # success surface tint
  warning: '#9a6400'         # warm amber-brown, not yellow
  warning-bg: '#fff3df'      # warning surface tint
  danger: '#c0392b'          # restrained brick red
  danger-bg: '#fbeae8'       # danger surface tint
  info: '#0066ff'            # info reuses the action blue
  info-bg: '#e6efff'         # info surface tint

typography:
  display:
    family: 'Calibre-R, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif'
    weights: [500, 600, 700]
  body:
    family: 'Inter, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif'
    weights: [400, 500, 600]
  mono:
    family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace'
    weights: [400, 500]
  scale:
    display-hero:    { size: 72, weight: 700, lineHeight: 1.0,  tracking: '-0.02em',  family: display }
    display-lg:      { size: 56, weight: 700, lineHeight: 1.05, tracking: '-0.018em', family: display }
    h1:              { size: 48, weight: 700, lineHeight: 1.1,  tracking: '-0.015em', family: display }
    h2:              { size: 38, weight: 700, lineHeight: 1.15, tracking: '-0.012em', family: display }
    h3:              { size: 28, weight: 600, lineHeight: 1.25, tracking: '-0.008em', family: display }
    h4:              { size: 22, weight: 600, lineHeight: 1.3,  tracking: '-0.004em', family: display }
    h5:              { size: 18, weight: 600, lineHeight: 1.35, tracking: '0',        family: body }
    h6:              { size: 16, weight: 600, lineHeight: 1.4,  tracking: '0',        family: body }
    body-lg:         { size: 18, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body:            { size: 16, weight: 400, lineHeight: 1.55, tracking: '0',        family: body }
    body-ui:         { size: 14, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    body-sm:         { size: 13, weight: 400, lineHeight: 1.5,  tracking: '0',        family: body }
    label:           { size: 13, weight: 500, lineHeight: 1.4,  tracking: '0.01em',   family: body }
    caption:         { size: 12, weight: 500, lineHeight: 1.4,  tracking: '0.02em',   family: body }
    code:            { size: 13, weight: 400, lineHeight: 1.5,  tracking: '0',        family: mono }

radius:
  micro: 2
  sm: 4
  md: 8
  lg: 12
  xl: 16
  pill: 9999

spacing:
  base: 4
  scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96]

layout:
  page-width: 1280
  prose-width: 720
  header-height: 64

components:
  button-primary:
    backgroundColor: cta-primary
    textColor: on-brand
    radius: md
    padding: '10px 16px'
    font: { family: body, weight: 600, size: 16 }
    hover: { backgroundColor: '#1a1a1a' }
    use: 'Solid-black "Get started" — the canonical primary action'
  button-secondary:
    backgroundColor: bg
    textColor: text
    border: border-strong
    radius: md
    padding: '10px 16px'
    font: { family: body, weight: 600, size: 16 }
    hover: { backgroundColor: surface-soft }
    use: 'Outlined "Request a demo" — white fill, near-black label'
  button-accent:
    backgroundColor: brand
    textColor: on-brand
    radius: md
    padding: '10px 16px'
    font: { family: body, weight: 600, size: 16 }
    hover: { backgroundColor: brand-hover }
    use: 'Blue accent action where the brand colour earns emphasis'
  button-ghost:
    backgroundColor: transparent
    textColor: text-muted
    radius: lg
    padding: '10px 16px'
    font: { family: body, weight: 500, size: 16 }
    hover: { backgroundColor: surface-muted }
    use: 'Translucent "Contact sales" tertiary action'
  card:
    backgroundColor: surface
    border: border
    radius: lg
    padding: 24
    shadow: 'none'
    use: 'White panel; depth via hairline border, not shadow'
  card-callout:
    backgroundColor: accent-cream
    border: accent-callout
    radius: lg
    padding: 24
    use: 'Warm-cream document-block callout — the Coda doc flavour'
  input:
    backgroundColor: bg
    border: border-strong
    textColor: text
    radius: md
    padding: '8px 12px'
    font: { family: body, weight: 400, size: 16 }
    focus: { border: brand, ring: '0 0 0 3px rgba(0,102,255,0.18)' }
  badge:
    backgroundColor: surface-muted
    textColor: text-muted
    radius: pill
    padding: '4px 10px'
    font: { family: body, weight: 500, size: 13 }

motion:
  ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
  ease-decelerate: 'cubic-bezier(0, 0, 0.2, 1)'
  duration-fast: 150
  duration-standard: 240
  duration-slow: 320
  hover-lift: 'translateY(-1px)'
  page-transition: 'opacity-only, 200ms standard'
  reduced-motion: 'respects prefers-reduced-motion: reduce — transitions collapse to opacity-only at 100ms'

breakpoints:
  mobile: 640
  tablet: 1024
  desktop: 1280
  wide: 1536

shadows:
  none: 'none'
  ambient: 'rgba(0,0,0,0.04) 0 1px 2px'
  raised: 'rgba(0,0,0,0.06) 0 1px 2px, rgba(0,0,0,0.05) 0 4px 12px'
  elevated: 'rgba(0,0,0,0.08) 0 8px 24px, rgba(0,0,0,0.05) 0 2px 6px'
  popover: 'rgba(0,0,0,0.12) 0 12px 32px, rgba(0,0,0,0.06) 0 4px 8px'
  ring: '0 0 0 3px rgba(0,102,255,0.18)'

accessibility:
  contrast-text-on-bg: 16.1             # AAA at body sizes (#212121 on #ffffff)
  contrast-on-brand: 4.83               # AA at body+ (#ffffff on #0066ff)
  contrast-on-cta-primary: 21.0         # AAA (#ffffff on #000000)
  contrast-muted-on-bg: 9.74            # AAA (#444444 on #ffffff)
  contrast-text-on-accent: 8.47         # AAA (#212121 on #f8ad40)
  focus-ring: '3px solid rgba(0,102,255,0.4) with 1px offset'
  reduced-motion-honored: true
  keyboard-trap-free: true
  min-touch-target: 44

dark-mode: light-only

lineage:
  summary: |
    Coda's marketing surface belongs to the post-Notion document-workspace lineage:
    a paper-white canvas treated as a literal page, near-black text that stops short
    of pure `#000`, and a single confident accent rather than a multi-hue palette.
    Calibre — the Klim Type Foundry geometric-humanist sans used by Dropbox and a
    generation of SaaS brands — carries the display register, while Inter handles
    body and UI text; this Calibre-display / Inter-body pairing is the contemporary
    productivity-tool dialect (Linear, Vercel, and Stripe all sit in adjacent
    territory). The action colour is one decisive `#0066ff` blue, a Stripe-style
    trust-via-restraint move that reserves saturation for links, focus rings, and
    interactive emphasis. Where Coda diverges is the document-block warmth: callouts
    render in cream-to-peach (`#fff6ec` → `#ffe6c9`) with an amber highlight
    (`#f8ad40`) and a decorative brand green (`#006838`) — the visual residue of
    Coda's actual product, where doc blocks, callouts, and highlights are first-class
    primitives. Primary CTAs are solid black `#000000` pills, a confident
    high-contrast choice that keeps the blue free for navigation and content links.
  influences:
    - name: Notion
      role: Defined the document-workspace marketing register — paper-white canvas, near-black text, single accent — that Coda competes within.
      url: https://www.notion.com
    - name: Klim Type Foundry (Calibre)
      role: Calibre display face — the geometric-humanist sans that gives the headlines their confident, neutral-modern voice.
      url: https://klim.co.nz/retail-fonts/calibre/
    - name: Inter (Rasmus Andersson)
      role: Body and UI typeface — the screen-optimised workhorse sans underpinning legibility at small sizes.
      url: https://rsms.me/inter/
    - name: Stripe
      role: Single-blue, trust-via-restraint chromatic discipline — one saturated action colour, no hue inflation.
      url: https://stripe.com
    - name: Linear
      role: Contemporary productivity-SaaS register — Calibre/Inter-class type, hairline borders, white-on-white tonal depth.
      url: https://linear.app
---

## 1. Visual Theme & Atmosphere

Coda's marketing surface presents the all-in-one collaborative workspace as a literal page. The base canvas is paper-white `#ffffff`, the text sits at a near-black `#212121` (rgb 33, 33, 33) that deliberately stops short of pure black, and the whole composition reads productivity-first: calm, legible, and structured. Where a consumer brand would reach for gradient and saturation, Coda reaches for whitespace and a single decisive accent. The page feels like an empty Coda doc waiting to be filled — which is exactly the metaphor.

The type does the heavy lifting. Calibre — the Klim Type Foundry geometric-humanist sans — carries the display register, hitting 72px at 700 weight for the hero headline with a tight negative track that gives it a confident, neutral-modern voice. Inter handles body and UI text, including the 14px base size observed across the chrome. This Calibre-display / Inter-body pairing is the contemporary productivity-tool dialect; it places Coda firmly alongside Linear, Vercel, and Stripe rather than the consumer-app crowd. The headlines feel engineered rather than decorated.

Chromatically the system is disciplined to the point of austerity, then warmed in one place. The action colour is a single confident `#0066ff` blue — re-probed from the SVG layer, used for links, focus rings, and interactive emphasis but never sprayed across the page. Primary CTAs ("Get started") are solid black `#000000` pills at 8px radius, a high-contrast choice that keeps the blue free for content and navigation. Secondary CTAs ("Request a demo") are outlined white pills at the same 8px; the translucent tertiary ("Contact sales") softens to a 12px radius and a muted `#444444` label.

The one place Coda lets warmth in is the document-block flavour. Callouts render in a cream-to-peach family — `#fff6ec` cream, `#ffe6c9` peach callout fill, `#f0e5dc` warm sand — accented by an amber highlight (`#f8ad40`) and a decorative brand green (`#006838`). These are the visual residue of Coda's actual product, where callouts, highlights, and coloured doc blocks are first-class primitives. On the marketing surface they appear as occasional warm accents against the cool white-and-blue scaffolding, signalling "this is a structured document tool" without ever overwhelming the restraint.

The net atmosphere is calm productivity: a white page, near-black confident type, one trustworthy blue, and a thread of document-block warmth. It is the visual equivalent of a well-organised workspace — nothing shouts, everything has a place.

**Key Characteristics**

- Paper-white `#ffffff` canvas treated as a literal document page
- Calibre display face (72px / 700 hero) over Inter for body and UI
- Near-black `#212121` text that never hits pure `#000`
- Solid-black `#000000` primary CTA pills at 8px radius
- Single confident `#0066ff` blue for links, focus, and interactive emphasis
- Warm-cream document-block callouts (`#fff6ec` → `#ffe6c9`) as the only non-blue chroma
- Amber highlight (`#f8ad40`) and decorative brand green (`#006838`) from the product palette
- Hairline `#e3e3e3` borders; depth via tone and border, not shadow
- 12px card radius, 8px button radius, 9999px pill for badges
- Productivity-first, structured register — restrained, legible, never loud

## 2. Color Palette & Roles

### Canvas & Surface

- **bg** (`#ffffff`): paper-white canvas; the document page made literal.
- **surface** (`#ffffff`): cards default to white, with depth carried by border and tone rather than fill.
- **surface-soft** (`#fafafa`): softest panel tint, a half-step off pure white.
- **surface-muted** (`#f0f0f0`) [→ `--neutral200`]: neutral panel and block ground; the workhorse grey.

### Text

- **text** (`#212121`) [→ rgb(33,33,33)]: near-black body text; calibrated for paper-on-paper softness, never pure black.
- **text-muted** (`#444444`) [→ rgb(68,68,68)]: secondary CTA labels, metadata, supporting copy.
- **text-faint** (`#717171`): tertiary captions, timestamps, placeholder text.

### Brand & Accent

- **brand** (`#0066ff`) [→ rgb(0,102,255)]: single confident action and link blue; the only saturated cool chroma on the page.
- **brand-hover** (`#0052cc`): pressed/hover step into a deeper blue.
- **brand-soft** (`#e6efff`): soft action tint for selection states and info banners.
- **cta-primary** (`#000000`): solid-black primary "Get started" pill fill.
- **accent** (`#f8ad40`) [→ `--block-color-highlight`]: warm amber highlight from the doc-block palette.
- **accent-cream** (`#fff6ec`): warmest callout/cream surface tint.
- **accent-callout** (`#ffe6c9`) [→ `--block-callout-background`]: peach callout fill for document-block notices.
- **accent-warm** (`#f0e5dc`) [→ `--block-color-accent-light`]: warm sand panel tint.
- **block-green** (`#006838`) [→ `--codaBrandGreen`]: decorative document-block green; never an action colour.

### Interactive

- **link**: identical to `brand` (`#0066ff`); the action blue and the link blue are deliberately the same hue.
- **link-hover**: `brand-hover` (`#0052cc`); link gains underline at hover, never colour shift alone.
- **selected**: `brand-soft` (`#e6efff`) fill, `brand` text.
- **disabled**: `text-faint` (`#717171`) on `surface-muted` (`#f0f0f0`).

### Borders

- **border** (`#e3e3e3`): standard hairline divider on white; the universal separator.
- **border-soft** (`#ededed`): lighter nested divider and table-row line.
- **border-strong** (`#cccccc`): emphasised divider and form-field border.

### Shadow Colors

- **ambient**: `rgba(0,0,0,0.04) 0 1px 2px` — barely-there resting shadow for elevated cards.
- **raised**: two-layer neutral shadow (`0 1px 2px` + `0 4px 12px`) for floating panels.
- **popover**: deeper multi-layer shadow for menus and tooltips.

Note: Coda's shadows are neutral black at very low opacity — depth is achieved primarily through the hairline border and surface tone, with shadow reserved for genuinely floating elements.

### Semantic

- **success** (`#1a7f4b`) on **success-bg** (`#e7f4ec`): confident editorial green, never a saturated chartreuse.
- **warning** (`#9a6400`) on **warning-bg** (`#fff3df`): warm amber-brown that harmonises with the cream callouts, not yellow.
- **danger** (`#c0392b`) on **danger-bg** (`#fbeae8`): restrained brick red, never crayon-red.
- **info** (`#0066ff`) on **info-bg** (`#e6efff`): info reuses the action blue; the system avoids inventing a separate info hue.

## 3. Typography Rules

### Font Family

- **Display**: Calibre-R → system-ui → -apple-system → Segoe UI → Helvetica → Arial → sans-serif. Calibre carries every headline; its geometric-humanist forms give the display register a confident, neutral-modern voice.
- **Body & UI**: Inter → system-ui → -apple-system → Segoe UI → Helvetica → Arial → sans-serif. Inter handles body copy and the 14px UI base; it is the screen-optimised workhorse that keeps small text crisp.
- **Mono**: ui-monospace → SFMono-Regular → SF Mono → Menlo → Consolas → monospace. Reserved for code blocks, formula snippets, and tabular data echoing Coda's doc primitives.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| display-hero | Calibre | 72 | 700 | 1.0 | -0.02em | the observed hero size — confident, tightly tracked |
| display-lg | Calibre | 56 | 700 | 1.05 | -0.018em | secondary heroes |
| h1 | Calibre | 48 | 700 | 1.1 | -0.015em | primary section heads |
| h2 | Calibre | 38 | 700 | 1.15 | -0.012em | feature-band heads (observed) |
| h3 | Calibre | 28 | 600 | 1.25 | -0.008em | sub-feature heads |
| h4 | Calibre | 22 | 600 | 1.3 | -0.004em | card heads |
| h5 | Inter | 18 | 600 | 1.35 | 0 | inline emphasis heads |
| h6 | Inter | 16 | 600 | 1.4 | 0 | label-grade heads |
| body-lg | Inter | 18 | 400 | 1.55 | 0 | hero subheads |
| body | Inter | 16 | 400 | 1.55 | 0 | default reading size |
| body-ui | Inter | 14 | 400 | 1.5 | 0 | chrome/UI base (observed) |
| body-sm | Inter | 13 | 400 | 1.5 | 0 | secondary copy |
| label | Inter | 13 | 500 | 1.4 | 0.01em | form labels, eyebrows |
| caption | Inter | 12 | 500 | 1.4 | 0.02em | image and chart captions |
| code | mono | 13 | 400 | 1.5 | 0 | inline + block code |

### Principles

- **Calibre declares, Inter informs**: headlines belong to Calibre at 600–700 weight; everything readable at a glance and below — body, UI, captions — belongs to Inter. The two faces are never swapped.
- **Negative tracking at display scale**: hero copy tightens to roughly `-0.02em`; without that compression Calibre at 700 reads as competent rather than declarative.
- **Near-black, not black**: body text holds at `#212121` rather than `#000000` — a deliberate softening that reduces glare on the white canvas and keeps long reads comfortable.
- **14px UI base**: chrome, navigation, and dense UI run at Inter 14px; the marketing body steps up to 16px for hero subheads and prose.
- **Weight, not colour, for emphasis**: hierarchy is built from Calibre/Inter weight steps and size, not from colour shifts — colour stays reserved for the blue accent.
- **Generous line-height for prose**: body copy runs 1.55 line-height, giving the document-page register its breathing room.

## 4. Component Stylings

### Buttons

**Primary — "Get started"**
- Background: `#000000`. Text: `#ffffff` at Inter 600 / 16px. Padding: `10px 16px`. Radius: 8px. Border: none.
- Hover: background → `#1a1a1a`. Active: background → `#000000` with the focus ring.
- Use: the canonical primary action; solid black keeps the blue free for links.

**Secondary — "Request a demo"**
- Background: `#ffffff`. Text: `#212121` at Inter 600 / 16px. Padding: `10px 16px`. Radius: 8px. Border: `1px solid #cccccc`.
- Hover: background → `#fafafa`, border → `#b3b3b3`. Use: secondary action paired beside the black primary.

**Accent — blue action**
- Background: `#0066ff`. Text: `#ffffff` at Inter 600 / 16px. Padding: `10px 16px`. Radius: 8px. Border: none.
- Hover: background → `#0052cc`. Use: where the brand colour earns emphasis (in-doc CTAs, feature highlights). Use sparingly so the single-blue discipline holds.

**Ghost / translucent — "Contact sales"**
- Background: `rgba(255,255,255,0.85)` over coloured bands, transparent over white. Text: `#444444` at Inter 500 / 16px. Padding: `10px 16px`. Radius: 12px.
- Hover: background → `#f0f0f0`. Use: tertiary action, lowest visual weight.

### Cards

**Standard card**
- Background: `#ffffff`. Border: `1px solid #e3e3e3`. Radius: 12px. Padding: 24px. No shadow.
- Use: feature-band content tile; depth via hairline border and tone, not shadow.

**Callout card (document-block)**
- Background: `#fff6ec`. Border: `1px solid #ffe6c9`. Radius: 12px. Padding: 24px.
- Optional left accent bar in `#f8ad40` (highlight) or `#006838` (block green).
- Use: warm-cream notices echoing Coda's in-product callout blocks — the doc flavour.

**Elevated card**
- Background: `#ffffff`. Border: `1px solid #e3e3e3`. Radius: 12px. Padding: 28px.
- Shadow: `rgba(0,0,0,0.06) 0 1px 2px, rgba(0,0,0,0.05) 0 4px 12px`.
- Use: pricing tiers and demo previews that should float above the canvas.

### Badges, Tags, Pills

**Neutral tag**
- Background: `#f0f0f0`. Text: `#444444` at Inter 500 / 13px. Padding: `4px 10px`. Radius: 9999px.
- Use: feature labels, category cues.

**Status badge**
- Background: `#e6efff`. Text: `#0066ff` at Inter 500 / 13px. Padding: `4px 10px`. Radius: 9999px.
- Use: "New", "Beta", inline status callouts.

**Warm doc-block badge**
- Background: `#ffe6c9`. Text: `#9a6400` at Inter 500 / 13px. Padding: `4px 10px`. Radius: 9999px.
- Use: highlight tags that match the cream-callout family.

### Inputs / Forms

**Text input**
- Background: `#ffffff`. Border: `1px solid #cccccc`. Radius: 8px. Padding: `8px 12px`. Font: Inter 400 / 16px.
- Focus: border → `#0066ff`, ring `0 0 0 3px rgba(0,102,255,0.18)`.
- Placeholder colour: `#717171`.

**Search input**
- Background: `#f0f0f0`. Border: none. Radius: 8px. Padding: `8px 12px 8px 36px` (icon-prefixed).
- Focus: background → `#ffffff`, ring `0 0 0 3px rgba(0,102,255,0.18)`.

### Navigation

**Top bar**
- Background: `#ffffff` with `1px solid #e3e3e3` bottom border. Height: 64px.
- Logo at Calibre 700 / 18px. Nav items at Inter 500 / 14px, colour `#212121`.
- Hover: nav item colour → `#0066ff` or background → `#f0f0f0`; no underline shift on the bar.

**Side nav (in-product mockups)**
- Background: `#fafafa`. Border: none. Item padding: `6px 8px`. Radius: 8px on hover background.
- Active item: `#e6efff` fill, `#0066ff` text — the doc-page navigation pattern.

### Tooltips, Toasts, Modals

- **Tooltip**: background `#212121`, text `#ffffff` at Inter 500 / 12px, radius 8px, padding `6px 10px`. Shadow: `rgba(0,0,0,0.12) 0 12px 32px`.
- **Toast**: background `#ffffff`, border `1px solid #e3e3e3`, radius 12px, shadow `popover`. Status icon at left in semantic colour.
- **Modal**: background `#ffffff`, radius 16px, shadow `popover`, backdrop `rgba(33,33,33,0.4)`, padding 32px.

## 5. Layout Principles

### Spacing System

Base unit: 4px. Scale: `[0, 4, 8, 12, 16, 24, 32, 48, 64, 96]`. The 24px gutter is the workhorse, 48px separates stacked feature blocks within a band, and 64–96px separates major bands. Coda runs moderately spaced — looser than dense dashboards, tighter than the most editorial SaaS sites — matching its productivity register where content density matters.

### Grid & Container

- **Page width**: 1280px max, centred.
- **Prose width**: 720px max for editorial text columns.
- **Hero treatment**: hero copy claims roughly 800–900px horizontal; product imagery spans the full container width below.
- **Feature grid**: 3-column at 1024px+, 2-column at 640–1024px, 1-column below 640px. Card gap: 24px.

### Whitespace Philosophy

Whitespace is structural breathing room, not decorative void. Section padding lives between 64–96px on desktop, and inside cards Coda runs 24–28px padding. The page gives the eye a beat between bands, reinforcing the document-page metaphor — each section reads like a distinct block in a well-organised doc.

### Section Cadence

The pattern is light throughout: `light hero → light feature grid → light social-proof → light pricing → light footer`. Visual variety comes from warm-cream callout cards and coloured doc-block accents punctuating the white canvas, not from full-bleed dark bands. The rhythm is calm and consistent — the document never abandons its white page.

## 6. Shapes & Radius Scale

| Tier | Value | Use |
|---|---|---|
| micro | 2px | inline tags, tiny inline pills |
| sm | 4px | small badges, tight UI primitives |
| md | 8px | buttons, inputs, primary CTA pills |
| lg | 12px | cards, callout blocks, secondary panels |
| xl | 16px | modals, emphasis blocks |
| pill | 9999px | badges, avatars, status tags |

Coda's radii are moderate-modern: nothing sharper than 2px, nothing more pillowy than 16px (excluding pills). The 8px button radius and 12px card radius are the brand's most recognisable shape primitives — the same modern-SaaS pairing seen across the productivity-tool lineage. The translucent "Contact sales" button is the one exception, softening to 12px.

## 7. Depth & Elevation

| Level | Treatment | Use |
|---|---|---|
| 0 | flat, no shadow, on `#ffffff` | body content, default surfaces |
| 1 | `1px hairline border` (`#e3e3e3`) | standard cards within a feature band |
| 2 | `hairline + ambient shadow` | elevated cards over white |
| 3 | `raised` two-layer shadow | pricing, demo previews, floating panels |
| 4 | `popover` shadow, 12px radius | tooltips, dropdowns, toasts |
| 5 | `popover` shadow + backdrop, 16px radius | modals, lightboxes |

**Shadow Philosophy**: Coda achieves most depth through the hairline `#e3e3e3` border and surface tone (`#ffffff` → `#fafafa` → `#f0f0f0`), reserving shadow for genuinely floating elements — pricing tiers, dropdowns, modals. Shadows are neutral black at very low opacity (`rgba(0,0,0,0.04–0.12)`), never tinted or heavy. The default card treatment is bordered-flat; a card that casts a shadow is a card that is meant to float.

## 8. Interaction & Motion

### Easing

- **standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — the workhorse Material-style ease for most transitions.
- **decelerate**: `cubic-bezier(0, 0, 0.2, 1)` — used when an element enters from off-canvas or a dropdown expands.

### Durations

- **fast** (150ms): button hover colour shift, card hover tint, link underline grow.
- **standard** (240ms): dropdown open, button hover lift, accordion expand.
- **slow** (320ms): modal open, page band cross-fade.

### Per-component micro-states

- **Button hover**: background colour shift over 150ms with `standard` ease; primary black lifts to `#1a1a1a`, blue accent to `#0052cc`. Optional `translateY(-1px)` lift.
- **Card hover**: border deepens (`#e3e3e3` → `#cccccc`) over 150ms; if elevated, shadow intensifies one tier.
- **Link hover**: underline grows over 150ms with `decelerate` ease; colour stays `#0066ff`, never shifts on hover alone.
- **Input focus**: ring fades in at 100ms; border colour shifts to `#0066ff` simultaneously.

### Page transitions

Coda's marketing site keeps transitions quiet — opacity-only fades at roughly 200ms with `standard` ease. No slide, no parallax, no scale. The productivity register favours stillness; the page should feel as calm as an open document.

### Reduced-motion strategy

`prefers-reduced-motion: reduce` is respected: transform-based animations collapse to opacity-only at 100ms, hover lifts disappear, and page transitions become near-instant cuts. The hero remains static rather than animating in.

## 9. Accessibility & A11y

### Contrast pairs (computed)

- **text on bg**: `#212121` on `#ffffff` → 16.1:1 (AAA at all sizes).
- **text-muted on bg**: `#444444` on `#ffffff` → 9.74:1 (AAA at body sizes).
- **on-brand on brand**: `#ffffff` on `#0066ff` → 4.83:1 (AA at body, AAA at large).
- **on-cta on cta-primary**: `#ffffff` on `#000000` → 21.0:1 (AAA, maximum contrast).
- **text on accent**: `#212121` on `#f8ad40` → 8.47:1 (AAA — dark text on the amber highlight is the only safe pairing).

Note: white text on `#f8ad40` fails contrast — always pair the amber highlight with near-black `#212121` text, never white.

### Focus indicators

- **Default focus ring**: `3px solid rgba(0,102,255,0.4)` with 1px offset; never removed for mouse users.
- **Within input fields**: border colour shifts to `#0066ff` and adds a `0 0 0 3px rgba(0,102,255,0.18)` ring.
- **On the black primary CTA**: ring uses an offset white halo plus the blue ring so it reads against the black fill.

### ARIA patterns

- Header search uses `role="combobox"` with `aria-expanded`, `aria-controls`, `aria-activedescendant`.
- Modals use `role="dialog"`, `aria-modal="true"`, focus trap, `Esc` to close.
- Tabs use `role="tablist"` / `role="tab"` / `role="tabpanel"` with arrow-key navigation.
- Pricing toggles use `role="radiogroup"` rather than tabs.

### Keyboard nav order

Top bar → hero CTAs → feature bands in DOM order → pricing → footer. `Tab` order matches visual order. A `Skip to content` link appears at the top of the DOM, visible on focus.

### Screen reader hints

- Decorative doc-block illustrations carry `aria-hidden="true"`.
- Icon-only buttons carry `aria-label` describing the action ("Open menu", "Get started").
- Stat callouts use `aria-label="X million users"` rather than relying on numeral parsing.

### Reduced motion

Honored throughout — see §8.

## 10. Responsive Behavior

### Breakpoints

| Tier | Width | Behavior |
|---|---|---|
| mobile | < 640px | single column, 16px gutter, 48px section padding |
| tablet | 640–1024px | 2-column feature grids, 24px gutter, 64px section padding |
| desktop | 1024–1280px | 3-column feature grids, 24px gutter, 96px section padding |
| wide | 1280px+ | container caps at 1280px, content centred |

### Touch Targets

Minimum 44×44px on touch devices, achieved through padding (10px vertical + 16px font line-height ≈ 44px). Inline links increase tap area through `padding: 8px 0` rather than relying on font line-height alone.

### Collapsing strategy

- **Top nav**: hamburger menu < 1024px; full nav above.
- **Feature grid**: 3 → 2 → 1 columns at 1024 / 640.
- **Hero**: product image moves below copy < 640px; copy claims full width.
- **CTA pair**: primary and secondary stack vertically < 640px, primary on top.
- **Pricing**: tiers stack vertically < 1024px, with the recommended tier highlighted via order shift.
- **Footer**: 4-column → 2-column → 1-column at 1024 / 640.

### Image behavior

Hero and product imagery use `srcset` with 1x/2x densities and `sizes` matched to container width. Below 640px, `object-fit: cover` and a locked `aspect-ratio` keep product screenshots from distorting.

### Container queries

Used inside the in-product side-nav mockups — the nav switches between condensed and expanded modes based on container width rather than viewport.

## 11. Content & Voice

### Tone

Coda's tone is **structured-confident**: clear, practical, and quietly capable. It writes like product documentation that learned to market itself — present tense, plain declaratives, and a focus on what the workspace lets you do rather than how it feels. Headlines name the value directly ("Your all-in-one collaborative workspace.") and sentences favour periods over exclamation marks. The voice is productivity-first: helpful, precise, never breathless.

### Microcopy patterns

- **Button verbs**: "Get started", "Request a demo", "Contact sales". The primary is the generic confident "Get started"; the secondary and tertiary name the sales motion. Verbs are short and action-led.
- **Error messages**: pattern is "Couldn't [action] because [reason]. Try [recovery]." e.g. "Couldn't sync the doc because the connection dropped. Check your network and retry."
- **Success confirmations**: short, declarative, single-line. "Doc created." rather than "Your doc has been created successfully!"

### Empty states

Empty states are practical and inviting rather than cheerful. "No docs yet — start from a template" (link to gallery) or "Your first doc" with an embedded preview. The cream-callout block is a natural home for empty-state guidance. Never empty-state cartoons or "Oops!" copy.

### CTA verb conventions

- **Primary marketing CTA**: "Get started" (the canonical phrase, on the black pill).
- **Demo CTA**: "Request a demo".
- **Sales CTA**: "Contact sales".
- **In-product**: "New doc", "Add page", "Insert block" — verb-plus-noun naming the doc primitive.

## 12. Dark Mode & Theming

Light-only for the marketing surface — no full dark variant is offered. The canvas stays paper-white `#ffffff` throughout, and visual variety comes from warm-cream callouts and coloured doc-block accents rather than dark bands.

The product application ships its own theming with coloured doc blocks (the `--codaBrandGreen #006838`, `--block-color-highlight #f8ad40`, and callout backgrounds observed in the token layer), but the marketing site commits to a single light register. Designers building Coda-style marketing pages should not introduce a dark mode; instead, use the cream-callout family (`#fff6ec` → `#ffe6c9`) and the amber highlight to create warmth and emphasis against the white page.

If a dark surface is genuinely required for a component (for example, a code-block or a footer accent), keep it bounded and exceptional: a near-black `#212121` ground with `#ffffff` text and a lighter blue accent to hold contrast — but treat it as a deliberate one-off, not a system-wide theme.

## 13. Lineage & Influences

Coda sits squarely in the post-Notion document-workspace lineage. Notion defined the marketing register these tools now share — a paper-white canvas treated as a literal page, near-black text that stops short of pure black, and a single restrained accent rather than a multi-hue palette. Coda adopts that register wholesale and then adds its own document-block warmth: the cream-to-peach callouts (`#fff6ec` → `#ffe6c9`), the amber highlight (`#f8ad40`), and the decorative brand green (`#006838`) are the visual residue of Coda's actual product, where coloured blocks and callouts are first-class primitives.

Typographically, Coda speaks the contemporary productivity-tool dialect: Calibre — Klim Type Foundry's geometric-humanist sans, used by Dropbox and a generation of SaaS brands — carries the confident display register, while Inter (Rasmus Andersson's screen-optimised workhorse) handles body and UI. The single confident `#0066ff` blue is a Stripe move — one chromatic event, no hue inflation — and the hairline borders with white-on-white tonal depth place Coda adjacent to Linear. What Coda rejects: gradient-heavy consumer aesthetics, multi-accent palettes, dark default canvases, and drop-shadow elevation as a default. The restraint is the discipline; the cream callout is the surprise; the solid-black CTA is the confident signature that keeps the blue free for content.

**Named influences**

- **Notion** ([notion.com](https://www.notion.com)) — Defined the document-workspace marketing register Coda competes within.
- **Klim Type Foundry — Calibre** ([klim.co.nz](https://klim.co.nz/retail-fonts/calibre/)) — Calibre display face; the confident, neutral-modern headline voice.
- **Inter** ([rsms.me/inter](https://rsms.me/inter/)) — Body and UI typeface; screen-optimised legibility at small sizes.
- **Stripe** ([stripe.com](https://stripe.com)) — Single-blue, trust-via-restraint chromatic discipline.
- **Linear** ([linear.app](https://linear.app)) — Contemporary productivity-SaaS register; hairline borders and white-on-white tonal depth.

## 14. Do's and Don'ts

**Do**

- Keep the canvas paper-white `#ffffff` and the text near-black `#212121`; the restraint is the brand.
- Use Calibre for every headline (600–700 weight) and Inter for all body and UI text; never swap the roles.
- Reserve `#0066ff` blue for links, focus rings, and selective interactive emphasis — one confident chromatic event.
- Make the primary CTA a solid-black `#000000` pill at 8px radius; it keeps the blue free for content.
- Reach for the cream-callout family (`#fff6ec` → `#ffe6c9`) and amber highlight (`#f8ad40`) to add warmth and signal the document-block flavour.
- Pair the amber highlight only with near-black text (`#212121`); white on amber fails contrast.
- Build depth from the hairline `#e3e3e3` border and surface tone first; add shadow only for genuinely floating elements.
- Run hero headlines in Calibre 700 at roughly `-0.02em` tracking; the negative track carries the confident voice.
- Use 8px radius for buttons and inputs, 12px for cards and callouts.
- Honor `prefers-reduced-motion: reduce` — collapse hover lifts and slide-ins to opacity-only.

**Don't**

- Don't introduce a dark default canvas; the marketing surface is light-only.
- Don't use pure black `#000000` for body text — the near-black `#212121` is calibrated for paper-on-paper softness.
- Don't spray the `#0066ff` blue across the page; more than one saturated cool accent breaks the discipline.
- Don't add a second non-blue accent beyond the cream/amber/green doc-block family.
- Don't put white text on the amber highlight (`#f8ad40`) — it fails contrast; use `#212121`.
- Don't apply heavy drop-shadows to default cards; depth here is bordered and tonal.
- Don't replace the solid-black primary CTA with a blue one as the default; the black pill is the signature.
- Don't break the hairline-border discipline with thick or saturated dividers.
- Don't reach for gradient-heavy consumer aesthetics; Coda is structured, not flashy.
- Don't run Calibre below 600 weight for headlines; the confident voice needs the weight.

## 15. Agent Prompt Guide

### Quick Color Reference

```
bg: #ffffff
surface-muted: #f0f0f0
text: #212121
text-muted: #444444
brand: #0066ff
brand-hover: #0052cc
brand-soft: #e6efff
cta-primary: #000000
accent (amber highlight): #f8ad40
accent-cream: #fff6ec
accent-callout: #ffe6c9
border: #e3e3e3
```

### Example Component Prompts

1. "Create a marketing hero in the Coda style: paper-white `#ffffff` canvas, Calibre 72px / 700 weight headline in `#212121` with `-0.02em` tracking, 18px subhead at Inter 400 in `#444444`, a solid-black primary CTA pill (`#000000` background, white text, 8px radius, `10px 16px` padding) reading 'Get started', and an outlined secondary button (`#ffffff` background, `1px solid #cccccc`, `#212121` text) reading 'Request a demo'."

2. "Design a feature card in the Coda style: `#ffffff` background, 12px radius, `1px solid #e3e3e3` hairline border, 24px padding, Calibre 600 / 22px H4 title in `#212121`, body at Inter 400 / 16px in `#212121`, no drop-shadow."

3. "Render a document-block callout: warm-cream `#fff6ec` background, `1px solid #ffe6c9` border, 12px radius, 24px padding, a `#f8ad40` amber accent bar on the left edge, body text in Inter 400 / 16px `#212121`."

4. "Create a pricing tier card: `#ffffff` background, `1px solid #e3e3e3` hairline, 12px radius, 28px padding, raised shadow (`rgba(0,0,0,0.06) 0 1px 2px, rgba(0,0,0,0.05) 0 4px 12px`), tier name in Calibre 600 / 20px, price in Calibre 700 / 48px, feature list in Inter 16px / 1.55 with `#0066ff` bullet markers, and a solid-black 'Get started' CTA pill."

5. "Design a top navigation bar: `#ffffff` background with `1px solid #e3e3e3` bottom border, 64px height, Calibre 700 / 18px logo, Inter 500 / 14px nav items in `#212121` that turn `#0066ff` on hover, and a solid-black 'Get started' pill at the right."

6. "Render a status badge row: a neutral pill (`#f0f0f0` background, `#444444` Inter 500 / 13px text, 9999px radius) and a blue status pill (`#e6efff` background, `#0066ff` text) and a warm doc-block pill (`#ffe6c9` background, `#9a6400` text), each at `4px 10px` padding."

### Iteration Guide

1. **Start with the canvas**: confirm the `#ffffff` paper-white base and the 8px / 12px button-card radius pair. If it looks too consumer, you have likely added gradient or saturation.
2. **Verify the type pairing**: headlines must be Calibre at 600–700; body and UI must be Inter. If a headline reads soft, tighten the track toward `-0.02em` and confirm it is Calibre, not Inter.
3. **Audit the action colour**: the `#0066ff` blue should appear only on links, focus, and selective emphasis — and the primary CTA should be solid black `#000000`. If the page has two saturated blues, one is wrong.
4. **Check the near-black**: body text is `#212121`, never pure `#000`. If your text looks harsh, you have drifted to full black.
5. **Add the doc-block warmth**: every page benefits from one cream callout (`#fff6ec` / `#ffe6c9`) or amber highlight (`#f8ad40`) to signal the document-tool flavour. An all-blue-and-white page reads as generic SaaS.
6. **Confirm the border treatment**: dividers and default cards use a `#e3e3e3` hairline, not shadow. If you see drop-shadows on resting cards, remove them.
7. **Test the contrast on amber**: amber highlights (`#f8ad40`) must carry near-black `#212121` text, never white — white fails WCAG on amber.
8. **Check the reduced-motion path**: hover lifts and slide-ins should collapse to opacity-only when `prefers-reduced-motion: reduce` is set.