Coda
A collaborative document platform that blurs the line between doc and app, with a clean white canvas (#FFFFFF) and Coda's signature coral-red accent (#EF4044 / #FF5151) used on CTAs, page icons, and the brand mark. The interface is clean and minimal — a document surface with a powerful block system that can embed tables, charts, buttons, and custom formulas. Typography uses Inter for UI chrome and Tiempos Text for document body (high-quality editorial serif), signaling that Coda takes the reading and writing experience seriously. The system reads as 'Notion made by people who love spreadsheets and Figma.'
Color Tokens
version: alpha name: Coda description: "A collaborative document platform that blurs the line between doc and app, with a clean white canvas (#FFFFFF) and Coda's signature coral-red accent (#EF4044 / #FF5151) used on CTAs, page icons, and the brand mark. The interface is clean and minimal — a document surface with a powerful block system that can embed tables, charts, buttons, and custom formulas. Typography uses Inter for UI chrome and Tiempos Text for document body (high-quality editorial serif), signaling that Coda takes the reading and writing experience seriously. The system reads as 'Notion made by people who love spreadsheets and Figma.'"
colors: primary: "#FF5151" on-primary: "#ffffff" primary-hover: "#E84545" ink: "#1A1A1A" ink-muted: "#6F6F6F" canvas: "#ffffff" surface-1: "#F9F9F9" surface-2: "#F2F2F2" border: "#E5E5E5" doc-icon-red: "#FF5151" doc-icon-blue: "#4A90E2" doc-icon-green: "#27AE60" doc-icon-purple: "#9B59B6" formula-blue: "#4A90E2"
typography: display: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 44px fontWeight: 700 lineHeight: 1.15 letterSpacing: -0.02em body: fontFamily: "Tiempos Text, Georgia, serif" fontSize: 17px fontWeight: 400 lineHeight: 1.7 letterSpacing: 0 ui: fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5
spacing: base: 8px scale: [4, 8, 12, 16, 24, 32, 48, 64, 96]
radius: sm: 4px md: 8px lg: 12px pill: 9999px
shadows: card: "0 1px 4px rgba(0,0,0,0.08)" elevated: "0 4px 16px rgba(0,0,0,0.1)"
motion: duration-fast: 100ms duration-base: 200ms easing: cubic-bezier(0.4, 0, 0.2, 1)
1. Visual Theme & Atmosphere
Coda envisions every document as a potential app — a table can be a database, a button can trigger an automation, a formula can pull live data from Salesforce. The product surface is deceptively simple: clean white, generous margins, and minimal chrome that hides extraordinary power. The coral-red accent appears sparingly — Coda doesn't use color to decorate, it uses it to signal interactivity. Document icons use a full-color set to help users distinguish between docs in the sidebar.
2. Color System
- Coral red: #FF5151 — the single brand accent; primary CTA, active nav, formula highlight
- Canvas: Pure white for document surfaces
- Surface: Very faint gray for panels and hoverable areas — barely perceptible
- Document icons: Full-color palette (red, blue, green, purple) for doc identification in sidebar
- Formula color: Blue #4A90E2 — formulas have their own color in the UI, separate from brand red
- Ink: #1A1A1A — warm near-black for document body text
3. Typography
Tiempos Text (premium editorial serif) for document body — a significant design investment that communicates Coda values long-form content. Inter for all UI chrome, labels, and navigation. The typography separation (serif document / sans UI) creates a clear distinction between content and container. Display headers at 700/44px with -0.02em tracking.
4. Components & Patterns
- Block editor: Slash-command palette for inserting any block type, drag to reorder
- Table block: Spreadsheet-like data view with formula bar, filter/sort controls, view types (grid/card/calendar)
- Button block: Inline button that triggers formulas or automations — apps within docs
- Canvas view: Freeform drag-and-drop layout of doc blocks — the "app" mode
- Sidebar: Page tree with colorful icons, add page button, section collapse
- Formula bar: Excel-like formula editor with Coda's proprietary formula language
5. Spacing & Layout
Document: 740px content width centered, generous top padding (64px). Table blocks stretch to container width. Sidebar: 220px fixed. Page padding: 24px horizontal on document surface.
6. Motion & Interaction
Block insert slides in from slash command. Table rows add with a quick expand. Formula evaluation shows brief loading state. Button press triggers visual feedback immediately. Drag-to-reorder blocks uses a smooth ghost + placeholder.