---
version: alpha
name: Coda
description: Warm-canvas collaborative workspace — Calibre-R bold display over a blush-peach `#fbf7f5` ground, Inter at every functional register, pure-black CTAs with inset 1.5px shadow borders, and a hover-indigo link system that gives a decidedly human productivity tool a quiet visual authority.

colors:
  # Surface / canvas
  background: "#fbf7f5"           # warm blush-peach — the signature canvas (manifest:theme_color)
  surface: "#ffffff"              # white cards, nav bar, modal backdrops
  surface-warm: "#f5ede8"         # deeper warm tone for alternate sections

  # Ink
  ink: "#212121"                  # near-black primary text (rgb 33,33,33)
  ink-secondary: "#666666"        # secondary body, caption copy (rgb 102,102,102)
  ink-muted: "#8e8e8e"            # placeholder, meta text (rgb 142,142,142)
  ink-light: "#444444"            # ghost button label on white (rgb 68,68,68)

  # Brand / primary
  primary: "#000000"              # primary CTA fill — pure black
  on-primary: "#ffffff"           # text on black buttons
  primary-container: "#f2f2f2"    # was rgba(33,33,33,0.06) on white — hover tint on nav items

  # Secondary CTA (ghost / white)
  secondary: "#ffffff"            # ghost button fill (white, bordered)
  on-secondary: "#444444"         # ghost button label

  # Interactive
  link-hover: "#3860be"           # link / nav hover color (rgb 56,96,190)
  focus-ring: "#3860be"           # focus state reuses hover indigo

  # Borders
  border: "#e0e0e0"               # 1.5px inset box-shadow on buttons (rgb 224,224,224)
  border-input: "#e0e0e0"         # input field hairline

  # Shadow tint
  shadow-soft: "#000000"          # was rgba(0,0,0,0.08) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Calibre-R, Calibre, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -3.24px
  display:
    fontFamily: "Calibre-R, Calibre, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 52px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -1.82px
  heading-section:
    fontFamily: "Calibre-R, Calibre, -apple-system, BlinkMacSystemFont, sans-serif"
    fontSize: 38px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.95px
  body-xl:
    fontFamily: "Inter, system-ui, -apple-system, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body-large:
    fontFamily: "Inter, system-ui, -apple-system, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.66px
  body-medium-bold:
    fontFamily: "Inter, system-ui, -apple-system, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -0.6px
  body:
    fontFamily: "Inter, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.48px
  button-ui:
    fontFamily: "Inter, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: -0.48px
  caption:
    fontFamily: "Inter, system-ui, -apple-system, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: -0.14px
  label:
    fontFamily: "Inter, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.96px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 8px 12px
    boxShadow: "inset 0 0 0 1.5px #212121"
  button-primary-large:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-medium-bold}"
    rounded: "{rounded.lg}"
    padding: 16px 28px
    boxShadow: "inset 0 0 0 1.5px #212121"
  button-primary-hover:
    backgroundColor: "#1a1a1a"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 8px 12px
    boxShadow: "inset 0 0 0 1.5px {colors.border}"
  button-secondary-large:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.body-medium-bold}"
    rounded: "{rounded.lg}"
    padding: 16px 28px
    boxShadow: "inset 0 0 0 1.5px {colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.md}"
    padding: 0px 12px
    border: "1px solid {colors.border}"
  button-ghost-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
  nav-link:
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 8px 12px
    rounded: "{rounded.md}"
  nav-link-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    padding: 24px
    boxShadow: "0 1px 3px rgba(0,0,0,0.08)"
  card-hover:
    boxShadow: "0 4px 12px rgba(0,0,0,0.12)"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    border: "1px solid {colors.border-input}"
  input-focus:
    border: "1.5px solid {colors.focus-ring}"
    outline: "none"
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  tooltip:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 6px 10px
---

# Coda Design System

## Overview

Coda's visual identity is built around a single, decisive choice: a warm blush-peach canvas (`{colors.background}`) that immediately separates it from the sterile white of most productivity tools. The ground is genuinely warm — not cream, not off-white, but a muted rosé that reads as inviting rather than clinical. Against it, pure-black CTAs land with stark authority, and the product UI mockup floats on clean white (`{colors.surface}`) as if resting in warm light. This contrast between warm ground and white-surface product creates a layered depth that makes the homepage feel like looking through glass at something alive.

The typography plays a counterintuitive game. Calibre-R — a custom-licensed geometric sans with tight apertures and confident weight — carries all the display headlines at 700 weight with aggressive negative tracking, pushing −3.24px at the hero size. This is the boldness of a brand that knows what it is. Then the moment you enter any functional context — navigation, body copy, buttons, captions — Inter takes over, smooth and neutral. The dual-font system encodes a clear worldview: shout with confidence, then get out of the way and let the product speak.

Interaction states are anchored by a single hover color, `{colors.link-hover}` (a mid-saturation corporate indigo), that appears consistently on links, nav items, and focus rings. It is never used as a fill; it is only ever a tint or text shift. The button system uses inset box-shadows (1.5px) rather than CSS `border` for its visible outlines, ensuring button height is not affected by border-width across variants. Motion is fast and uniform: 0.15s ease for all background-color and color transitions, 0.05s for scale-type responses.

**Key Characteristics:**
- Warm blush-peach ground (`{colors.background}`) as the defining canvas signature — the system's single strongest brand cue
- Pure-black primary CTAs with inset 1.5px shadow outline, not a CSS border — height stays stable across states
- Calibre-R 700 at display sizes (72px, 52px, 38px) with deeply negative tracking (−3.24px to −0.95px)
- Inter for all functional text — navigation, body, UI labels, captions
- Two-tier button scale: compact (8×12px padding, `{rounded.md}`) for nav chrome; large (16×28px, `{rounded.lg}`) for hero CTAs
- Ghost/secondary button uses the same inset shadow in `{colors.border}` on a white fill
- Hover transitions at exactly 0.15s ease for color and background; 0.05s for fill/opacity
- `{colors.link-hover}` as the sole interactive accent — mid-indigo used only as a state signal, never as a fill color
- `{colors.primary-container}` (rgba(33,33,33,0.06) flattened to opaque) as the universal nav-hover tint
- Product UI always shown on white `{colors.surface}` cards, floated against the warm canvas
- Radix UI primitives underpinning accessible dropdown, dialog, and popover patterns
- No semantic color system exposed in the marketing surface (success/warning/error are internal to the app)

## Colors

### Primary

- **Blush canvas** (`{colors.background}`): The signature warm ground. Every page section defaults to this — it reads as parchment-warm but modern, not vintage.
- **White surface** (`{colors.surface}`): Clean card and nav backgrounds that float on top of the canvas, creating a two-layer depth model.
- **Near-black ink** (`{colors.ink}`): Primary text, nav labels, icon fills. All headline and body copy lands here unless on a dark section.

### Brand Accent

- **Pure black** (`{colors.primary}`): The primary CTA fill. No brand color in buttons — pure black is the authority. Combined with `{colors.on-primary}` text and an inset shadow border.
- **Hover indigo** (`{colors.link-hover}`): The single interactive accent. Applied to link hover states, nav item text transitions, and focus rings. Never used as a standalone fill.

### Text States

- **Secondary ink** (`{colors.ink-secondary}`): Supporting copy, subheadings, inline descriptors.
- **Muted ink** (`{colors.ink-muted}`): Placeholders, metadata, timestamp-level text.
- **Ghost button label** (`{colors.ink-light}`): Slightly lighter than primary ink for the secondary / contact-sales button variant.

### Borders and Surfaces

- **Border** (`{colors.border}`): The 1.5px inset shadow color on bordered buttons and hairline input edges. A light gray that separates without competing.
- **Nav hover tint** (`{colors.primary-container}`): A very faint warm gray applied as a background on hovered nav items and interactive anchors. Was `rgba(33,33,33,0.06)` — flattened to opaque over white.

## Typography

### Font Family

- **Display**: `Calibre-R` (custom licensed, Klim Type Foundry), a geometric sans with confident weight. Closest Google Font approximation: `DM Sans` (bold weight). Full stack: `Calibre-R, Calibre, -apple-system, BlinkMacSystemFont, sans-serif`.
- **Functional / body**: `Inter` (variable), with `system-ui` fallback. Used for all navigation, body copy, UI labels, buttons, and captions.

### Hierarchy

The complete type scale is declared in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | Hero headline at page-level impact (72px / −3.24px tracking) |
| `display` | Section-level headline, feature callouts (52px) |
| `heading-section` | Feature group titles, mid-page anchors (38px) |
| `body-xl` | Lead paragraph text, key value propositions (24px) |
| `body-large` | Feature descriptions, card body copy (22px) |
| `body-medium-bold` | Semibold callouts, feature labels (20px / 600) |
| `body` | Standard body copy, list items (16px) |
| `button-ui` | All button labels, nav items (16px / 600) |
| `caption` | Fine print, metadata, helper text (14px) |
| `label` | Uppercase micro-labels, tag text (12px / 700 / +0.96px tracking) |

### Principles

- Calibre-R carries brand confidence at scale; Inter carries usability everywhere else. Never mix them within the same element.
- Negative tracking at display sizes is non-negotiable: −3.24px at 72px locks the headline into a monolithic weight.
- Button labels always use `{typography.button-ui}` (Inter 600 / 16px) regardless of button size — only padding changes between the compact and large scales.
- `{typography.label}` is the one token with positive letter-spacing (+0.96px), reserved for uppercase micro-labels and tag text.

## Layout

### Spacing System

The complete spacing scale is in the `spacing:` token block above. Base unit: 4px.

Coda's layout is generous without being spacious: the home page packs feature callouts tightly in grid formations, then breathes with large padding offsets (96px and above) at section transitions. The warm canvas holds the eye so that negative space functions as warmth, not emptiness.

### Grid & Container

- Max content width: 1280px (breakpoint confirmed at 1280px)
- Desktop: 12-column grid with fluid gutters
- Nav bar: full-width sticky, white `{colors.surface}` background, content max 1280px centered
- Product UI mockup: centered card floating in the canvas with white `{colors.surface}` background

### Whitespace Philosophy

- Section-level padding runs at 64px–96px vertically — substantial but not extravagant
- Cards use 24px padding internally (`{spacing.xl}`) matching the card component spec
- The warm ground absorbs negative space: emptiness reads as comfort, not neglect

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Body text areas, full-bleed sections |
| Hairline (Level 1) | `inset 0 0 0 1.5px {colors.border}` | Button outlines, input borders |
| Card (Level 2) | `0 1px 3px rgba(0,0,0,0.08)` | Feature cards, pricing tiles |
| Elevated (Level 3) | `0 4px 12px rgba(0,0,0,0.12)` | Hovered cards, active modals |
| Nav (Level 3+) | White `{colors.surface}` fill + subtle shadow | Sticky nav bar sitting above the warm canvas |
| Focus Ring | `0 0 0 2px {colors.focus-ring}` | Keyboard-focused interactive elements |

**Shadow Philosophy**: Coda's shadow system is restrained and inset-first. The most visible "shadow" is actually the inset box-shadow on buttons — a 1.5px ring that reads as a border without taking box-model space. Layered elevation shadows are low-opacity, warm-neutral, and only appear on cards in hover or active states. Nothing floats dramatically; everything sits close to the surface.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed section dividers, horizontal rules |
| `sm` | 4px | Tooltips, small UI chips |
| `md` | 8px | Compact buttons, nav item hover tints, input fields |
| `lg` | 12px | Hero CTAs (large button variant), feature cards |
| `xl` | 16px | Product UI mockup card frame, large modal dialogs |
| `pill` | 9999px | Tag / badge components |

The system is soft and approachable: nothing is sharp (no `0px` borders on user-facing controls), but nothing is a bubble. The `{rounded.md}` / `{rounded.lg}` binary covers nearly all cases — compact chrome at `md`, large CTAs and content containers at `lg`.

## Components

The complete component spec lives in the `components:` token block above.

### Button variants

- **`button-primary`** — Pure-black fill, white label, 8×12px compact padding, `{rounded.md}`. Used in the nav bar ("Get started"). The `inset 0 0 0 1.5px #212121` shadow creates a visible ring that darkens on hover without shifting layout.
- **`button-primary-large`** — Same black fill at hero scale: 16×28px padding, `{rounded.lg}`. Used for the page-hero "Get started for free" CTA.
- **`button-secondary`** — White fill with `{colors.border}` inset shadow. Compact scale matches primary compact; used for "Request a demo."
- **`button-secondary-large`** — White fill at hero scale for "Contact sales" — matches the large CTA row height.
- **`button-ghost`** — Transparent fill, `{colors.border}` CSS border, small padding. Used for "Skip to content" and ancillary utility actions.

### Cards

Cards use `{colors.surface}` (white) on the warm `{colors.background}` canvas, `{rounded.lg}` corners, and a level-2 shadow that steps up to level-3 on hover. Internal padding is 24px (`{spacing.xl}`).

### Inputs

Text inputs follow `{components.input}`: white fill, `{colors.border-input}` hairline, `{rounded.md}` corners. Focus promotes the border to 1.5px `{colors.focus-ring}` indigo — matching the interactive accent used by links and nav hovers throughout the system.

### Badges / Tags

Badges use the faint `{colors.primary-container}` fill with `{colors.ink}` text, Inter label size, and `{rounded.pill}` to signal categorical metadata without color aggression.

### Navigation

Sticky top nav, white `{colors.surface}` fill, max-width 1280px. Nav items use `{typography.button-ui}` with `{colors.ink}` default color, shifting background to `{colors.primary-container}` tint on hover. Primary and secondary CTAs sit at the trailing edge.

## Do's and Don'ts

### Do

- Use `{colors.background}` (warm blush-peach) as the default page canvas — it is the brand's strongest visual cue
- Restrict `{colors.primary}` (pure black) to the single most-important CTA on any given viewport
- Apply `{typography.display-hero}` and `{typography.display}` exclusively with Calibre-R at 700 weight — the tracking values are tuned for this font
- Mirror the inset-shadow button pattern for all bordered buttons: `inset 0 0 0 1.5px` preserves box height across states
- Use `{colors.link-hover}` only as a state transition color (hover, focus) — never as a static fill or standalone brand color
- Keep feature cards and product mockups on `{colors.surface}` (white) floating against the warm canvas to maintain the two-layer depth model
- Maintain the 0.15s ease timing for all `background-color` and `color` transitions
- Use `{rounded.md}` for compact interactive elements and `{rounded.lg}` for large CTAs and content containers

### Don't

- Don't use pure white (`{colors.surface}`) as the page background — it breaks the warm canvas identity
- Don't introduce a brand accent fill color for buttons: the system uses black and white only for button fills
- Don't use Calibre-R for body copy or UI labels — Inter handles all functional registers
- Don't mix border-radius tiers arbitrarily: the system is effectively a `md`/`lg` binary for interactive elements
- Don't use CSS `border` on buttons — the inset box-shadow pattern avoids layout shifts and preserves consistent heights
- Don't apply `{colors.link-hover}` (indigo) as a static text or background color outside hover/focus states
- Don't lighten `{typography.display-hero}` below 700 weight — Calibre-R at lighter weights loses the headline authority
- Don't skip the warm canvas background on marketing sections — white-only layouts read as a different product

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <426px | Single column, full-width CTAs, hero text reflows to ~36px |
| Mobile | 426–699px | Single column, reduced hero font size, stacked nav |
| Tablet | 700–1023px | Two-column feature grid, nav collapses to hamburger at 920px |
| Desktop | 1024–1280px | Full nav, three-column feature grids, hero at full 72px |
| Large Desktop | >1280px | Content locked at 1280px max-width, canvas bleeds to viewport edges |

### Touch Targets

- All buttons maintain minimum 44px tap height via padding + line-height
- Nav items expand to full-width tap zones on mobile
- Compact button variant (8px padding) pairs with 16px type to meet the 44px height threshold

### Collapsing Strategy

- Navigation collapses at 920px (confirmed breakpoint); hamburger or full-bleed mobile nav
- Hero display text cascades from 72px → ~48px → ~36px across breakpoints
- Feature grids collapse from three columns → two → single, maintaining 24px card gutters
- Product mockup image scales proportionally, maintaining aspect ratio rather than cropping

### Image Behavior

- Product UI screenshots are contained within white `{colors.surface}` card frames at all viewport sizes
- The card frame scales proportionally with viewport; at mobile widths it becomes full-width minus screen margins
- Decorative brand imagery (team photos, use-case illustrations) uses `object-fit: cover` within fixed-aspect containers

## Agent Prompt Guide

### Quick Color Reference

- Background: `{colors.background}`
- Text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Muted text: `{colors.ink-muted}`
- Brand CTA fill: `{colors.primary}`
- Border / button ring: `{colors.border}`
- Interactive hover: `{colors.link-hover}`
- Card / nav background: `{colors.surface}`

### Example Component Prompts

- "Build a hero section with background `{colors.background}` (#fbf7f5), a Calibre-R 700 / 72px headline with −3.24px letter-spacing in `{colors.ink}` (#212121), a lead paragraph in Inter 400 / 22px / 1.55 line-height, and two CTA buttons: primary (black fill #000000, white text, 16×28px padding, 12px radius, inset shadow `0 0 0 1.5px #212121`) and secondary (white fill, #444444 text, same padding and radius, inset shadow `0 0 0 1.5px #e0e0e0`). Center the button row with 16px gap."
- "Create a feature card with white (`{colors.surface}`) background, 12px border-radius, 24px padding, shadow `0 1px 3px rgba(0,0,0,0.08)` that elevates to `0 4px 12px rgba(0,0,0,0.12)` on hover. Card title: Inter 600 / 20px / −0.6px tracking in `{colors.ink}`. Body: Inter 400 / 16px / 1.5 line-height in `{colors.ink-secondary}`. Cards float on `{colors.background}` (#fbf7f5) canvas."
- "Build a sticky navigation bar with white (`{colors.surface}`) background, max-width 1280px centered content. Logo left-aligned. Nav links use Inter 600 / 16px in `{colors.ink}`; on hover, background shifts to rgba(33,33,33,0.06) (#f2f2f2) with 8px radius and 150ms ease transition. Trailing CTAs: 'Request a demo' (white fill, gray inset shadow) + 'Get started' (black fill, white text, 8×12px padding, 8px radius)."
- "Design a tag/badge component with background `{colors.primary-container}` (#f2f2f2), `{colors.ink}` (#212121) text, Inter 700 / 12px / +0.96px letter-spacing, 4×10px padding, pill border-radius (9999px). Used for category labels and feature flags."
- "Create a text input field with white background, 1px solid `{colors.border-input}` (#e0e0e0) border, 8px border-radius, 10×14px padding, Inter 400 / 16px in `{colors.ink}`. On focus: border becomes 1.5px solid `{colors.focus-ring}` (#3860be) with no outer outline. Placeholder text uses `{colors.ink-muted}` (#8e8e8e)."

### Iteration Guide

1. Start with the warm canvas: set `background-color: {colors.background}` (#fbf7f5) on the root. All marketing sections inherit this ground unless they explicitly use white `{colors.surface}` cards.
2. Primary CTAs use pure black (`{colors.primary}`) — resist adding brand color. The warmth comes from the canvas, not the button.
3. Headlines need Calibre-R 700 with deeply negative tracking — approximated by DM Sans 700 if Calibre-R is unavailable.
4. All interaction states reference `{colors.link-hover}` (#3860be) for text and `{colors.primary-container}` (#f2f2f2) for background tints; 0.15s ease timing throughout.
5. Keep white `{colors.surface}` cards floating on the warm canvas — the contrast between #fbf7f5 and #ffffff is subtle but essential.
6. Border-radius lives at `{rounded.md}` (8px) for compact elements and `{rounded.lg}` (12px) for large CTAs and containers. No intermediate values.
7. The shadow system is inset-first for buttons (1.5px ring) and barely-there for cards (1px soft drop). Never add heavy shadows.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Coda. Brand names and trademarks belong to their respective owners.