Coda DESIGN.md

All-in-one doc design with bold indigo identity, canvas-first surfaces, flexible grid UX, and building-block content hierarchy.

1. Visual Theme & Atmosphere

Coda should feel powerful, flexible, and creative. The design language communicates documents as apps, combining rich text, tables, charts, buttons, and automations in a single canvas.

• Mood: creative, powerful, collaborative, structured
• Density: variable — low in document mode, high in table/builder mode
• Character: bold indigo brand, crisp white canvas, block-oriented layout, subtle grid overlays

2. Color Palette & Roles

Use indigo for primary actions and the doc header. Teal is strictly for formula and automation surfaces — it signals "code-like" behavior.

3. Typography Rules

css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-serif: "Georgia", "Times New Roman", serif;
--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

4. Component Stylings

css.button-primary {
  min-height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 6px;
  background: #4338CA;
  color: #FFFFFF;
  font: 600 14px/1 Inter, sans-serif;
}

.doc-block {
  border-radius: 8px;
  padding: 12px 16px;
  background: #FFFFFF;
  border: 1px solid transparent;
  transition: border-color 0.15s;
}

.doc-block:hover {
  border-color: #E5E7EB;
}

.formula-chip {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 4px;
  background: #EFF6FF;
  color: #0891B2;
  font: 500 13px/1.5 "JetBrains Mono", monospace;
}

5. Layout Principles

The canvas should be wide and uncluttered. Toolbars appear contextually — never permanently visible unless in table mode.

6. Depth & Elevation

css.shadow-block  { box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06); }
.shadow-panel  { box-shadow: 0 8px 24px rgba(67, 56, 202, 0.10); }
.shadow-modal  { box-shadow: 0 20px 50px rgba(17, 24, 39, 0.16); }

Document surfaces are nearly flat. Menus and insert panels use moderate shadow. Never use heavy elevation on the doc canvas itself.

7. Do's and Don'ts

Do make block insertion feel seamless with a minimal "/" command. Do keep the document canvas free of persistent chrome. Do use teal consistently for formula language. Do not use serif fonts outside of document body prose. Do not let toolbars cover content.

8. Responsive Behavior

Table editing and builder mode require desktop. Mobile should focus on document consumption.

9. Agent Prompt Guide

Design like Coda: bold indigo CTAs, flexible white document canvas, contextual block toolbars, teal formula accents, Inter typography, and content-first building-block hierarchy.