What is Coda's primary brand color?

Coda hero canvas is a warm peach (#fbf7f5) that fills the entire above-the-fold band — not white. The primary CTA is a separate near-black (#212121) pill, the same hex as the h1/h2 display ink. The amber accent (#f8ad40) survives only as a chip background inside the embedded workspace mockup, with two appearances on the entire page. The Korbit --kr-* CSS variables expose a richer chart palette (red #a91e1e, yellow #e4a709, blue #0f58bd, green #187b34, purple #6e21ba, pink #a12b86, orange #c45b1c) reserved for in-product chips, reactions, and emoji — never for page chrome.

What font does Coda use, and what should I substitute?

Coda runs a dual-typeface system. Calibre-R carries the display tier — 72px / 700 / -3.24px tracking for the hero h1, 52px / 700 for marketing h2, 38px / 700 for sub-sections. Inter carries everything from the 22px sub-head down to the 10px micro-uppercase, mostly at weight 400 with 600 for buttons and titles. A single Tiempos-Headline serif callout at 38px / 300 appears as a one-off pull-quote treatment. If Calibre-R isn't available, Inter Display at the same sizes with weight 700 and -3% letter-spacing is the closest open-source substitute; the body stack already runs Inter natively.

Why is Coda's hero peach instead of white?

The peach band ("#fbf7f5") is the brand voltage. Where Notion paints a navy hero, Airtable a pure-white one, and Linear a dark canvas, Coda runs an off-white peach with a black CTA — a tonal choice that signals warmth and "document, not app." The peach survives across the full hero region until the canvas resets to white below the partner-logo wall. The "--header-background-rbga" CSS variable confirms the band is intentional, not a stale stylesheet residue.

Why are Coda's buttons 8px rectangles rather than full pills?

Coda renders buttons at 8px radius across the marketing site — "Get started for free", "Contact sales", and "Request a demo" are all 8px rectangles, not 9999px pills. Cards sit at 12px ("{rounded.lg}"), the inline workspace mockup at 9.6px (the Codas internal radius), and only the avatar dots inside the mockup carry full 44px rounding. The rectangular geometry sober-editorial — closer to Notion's 8px posture than to Linear's pill UI — and reinforces the document identity over the app identity.

What are the Korbit "--kr-*" variables, and should I use them?

They are Coda in-product chart-and-emoji palette, exposed at :root through 55 CSS custom properties. Seven hue families (red, yellow, blue, green, purple, pink, orange) each ship four stops: chartprimary (the saturated mid), medium (the working color), light (the fill tint), and gradient (the soft variant). The palette is reserved for chips, reaction emoji, calendar tags, and in-document highlighting inside the workspace — none of it leaks into the page chrome. If you are building Coda-adjacent components (tables, reactions, status chips), use these directly. If you are building general marketing chrome, ignore them entirely.

Can I use this DESIGN.md to build a React workspace?

Yes — feed it to Claude, Cursor, or Copilot and the agent will reproduce Coda posture: peach hero band, near-black 8px-rectangle CTA, Calibre-R headlines at -3.24px tracking, Inter body, and the Korbit chart palette scoped to in-product chips. Reference tokens directly inside Tailwind config or CSS variables — every hex (#fbf7f5, #212121, #f8ad40, the seven Korbit hues), every typography role, every radius and spacing value is quoted. The system is worth studying as a counter-example: it shows that workspace branding can come from canvas tone alone, with no gradient, no accent wall, no atmospheric mesh.

Coda Design System

Coda's design system as a DESIGN.md file.

About Coda DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source coda.io

Productivity & SaaS
Workflow & No-code

Coda's homepage is the warmest workspace canvas in the directory. The hero sits on a peach band ("#fbf7f5") that holds the full above-the-fold composition — wordmark, six-item Inter nav, a 72px Calibre-R headline at -3.24px tracking, a 22px Inter sub-head, and a near-black "Get started for free" pill paired with a white "Contact sales" rectangle. The cream backdrop is the brand voltage. Where Notion runs deep navy, Airtable runs pure white, and Linear runs canvas dark, Coda runs an off-white peach with a black CTA — a tonal split that survives across the page until the canvas resets below the logo wall.

This DESIGN.md captures the system as a single Google Labs spec file. Inside: 22 color tokens grouped into the peach hero band, two near-black inks ("#212121", "#000000"), a graded gray scale ("#444444", "#666666", "#8e8e8e", "#e0e0e0"), the amber accent ("#f8ad40"), and a 14-entry Korbit chart-color palette pulled from the live "--kr-*" CSS variables — red, yellow, blue, green, purple, pink, orange each with chartprimary, medium, light, and gradient stops; 13 typography tokens covering Calibre-R from 72px hero down to 38px h2 with a Tiempos-Headline serif callout, and Inter from 22px lede down to 10px micro-uppercase; five corner radii (8px buttons, 12px cards, 44px pill orbs); ten spacing tokens; and 22 component definitions spanning the peach hero band, button pair, top-nav, the embedded Project Hub workspace mockup card, the logo wall, the reaction-chip cluster, and the dark "We're overwhelmed with the work about work" CTA panel.

A working developer feeds this file to Claude, Cursor, or Copilot and gets components that match Coda's specific posture — peach band hero instead of generic white, 8px-rectangle pills instead of the consumer pill default, the Korbit chart palette reserved to in-product chips, and Calibre-R density at the headline tier — rather than the default shadcn theme. Every hex, every font, every radius is quoted ready to paste into Tailwind config, CSS variables, or your own primitives. The system is worth studying because it answers a single question the all-in-one-workspace category rarely answers: how do you brand the canvas without painting it?

What makes it distinct

Peach hero band#fbf7f5 fills the entire above-the-fold canvas, not white, separating Coda from the white-hero Notion-Airtable-Linear default
Dual-typeface splitCalibre-R 700 carries 38-72px display; Inter 400-600 carries every 14-22px nav, body, and button label
Korbit chart palette as in-product voltageseven hue pairs (red, yellow, blue, green, purple, pink, orange) reserved for chips, reactions, and the live workspace mockup, never the page chrome
Near-black #212121 doing double dutyprimary CTA fill and h1/h2 ink share the same hex, the Notion-Airtable move
72px hero display at -3.24px trackingthe tightest cap-height-to-tracking ratio in the directory; signals 'all-in-one workspace' density

Live at coda.io

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

coda.io

Explore Coda

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Coda design system FAQ

Common questions about Coda's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Coda — official site

The all-in-one collaborative workspace combining docs, spreadsheets, applications, and AI.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Coda in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→