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
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.
Use this design
Copy the DESIGN.md and paste it at the top of your AI prompt.
Format for