Coda

A bold, editorial fintech interface built on a warm cream canvas (#f8f9eb) with heavy black ABC Monument Grotesk display type, monospaced JetBrains Mono UI labels, and saturated color-block cards (deep blue, mint green, forest green). The system reads as confident payments-infrastructure brand — oversized condensed headlines, outlined geometric glyphs interrupting words, rounded pill chips, and a dramatic dark-green organic hero blob anchoring the fold. Brand voltage comes from extreme display weight (800) and a punchy mint accent rather than from gradients or imagery.

coda.co

Works with Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit

↓ .md ↓ All files

loading…

Color Palette

Accent

Neutrals

Typography

display 71.56px · 800 · 0.9

The quick brown fox jumps

lead 24.6px · 800 · 1.02

The quick brown fox jumps

heading 22.36px · 400 · 1.3

The quick brown fox jumps

label 14.08px · 600 · 1.7

The quick brown fox jumps

button-mono 12px · 400 · 1.2

The quick brown fox jumps

Spacing & Shape

Spacing

Name	Value	Preview
xxs	4px
xs	9px
sm	13px
md	18px
lg	27px
xl	36px
xxl	45px
xxxl	63px
section	72px
section-lg	107px

Border Radius

Name	Value	Preview
xs	2px
sm	9px
md	13px
lg	18px
xl	22px
xxl	27px
xxxl	45px
pill	9999px

FAQ

What colors does Coda use?: Coda's core palette includes #000000, #f8f9eb, #f8f9eb, #ffffff, #5a5a4f. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Coda DESIGN.md.
What font does Coda use?: Coda's primary typeface is ABC Monument Grotesk. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
What is the Coda design system?: A bold, editorial fintech interface built on a warm cream canvas (#f8f9eb) with heavy black ABC Monument Grotesk display type, monospaced JetBrains Mono UI labels, and saturated color-block cards (de…

More like this

↓ .md ↓ All files

loading…