All design systems Codadesign system · reference
Light interfaceMeasured coda.io

Coda

A warm, creative doc tool with cream backgrounds and friendly accent colours.

This page is styled with Coda’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#FFFFFF
Page behind everything

Surface#FCFAF7
Cards, panels, menus

Text#292827
Headings and body

Muted text#73716D
Secondary info

Line#DEDBD5
Dividers and outlines

Accent#714CB6
Main button, links, selection

On accent#FFFFFF
Text on the accent

Contrast

Text on background 14.7:1Muted on background 4.9:1Text on accent 6.2:1

Every colour found on their site

#292827#73716D#141413#FFFFFF#714CB6#FCFAF7#F8AD40#EE5A29#BEA1F5#DEDBD5

Typography

Headings use Calibre-R (company-only; shown here with the free look-alike Inter). Body text uses Inter (free).

h1Calibre-R · 72px · 700 · -3.24px
Your all-in-one collaborative workspace.
h2Calibre-R · 38px · 700 · -0.95px
Coda is now Superhuman Docs!
pCalibre-R · 72px · 700 · -3.24px
Your all-in-one collaborative workspace.

Corners & shadows

Corner sizes used

8px
4px
12px

Shadows

Shadow 1
Shadow 2
Shadow 3

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompaniesContactsMeetings
InterestedCallbackBengaluru
Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

CompanyOwnerStatusLast touch
Zomato
Food tech · Gurugram
PRCallback18 days ago
Licious
Food tech · Bengaluru
RMInterestedToday
Delhivery
Logistics · Gurugram
ASNo answer35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Coda’s live website. Click to enlarge.

Buttons · 1

#FFFFFF · corners 8px · 40px

Buttons · 5

no fill · corners 8px · Super Sans VF 14px
fill #FFFFFF · corners 8px · Inter 16px
fill #141413 · corners 8px · Inter 16px
fill #141413 · corners 12px · Inter 20px
fill #FFFFFF · corners 12px · Inter 20px

Tags and badges · 2

no fill · corners 8px · Super Sans VF 14px
fill #BEA1F5 · corners 4px · Inter 10px

Icons

1 icons copied exactly from their site’s code.

Product screens

10 real screens from web image search, each linked to where it was found.

1412 × 822
1480 × 987
1000 × 600
1366 × 800
1280 × 720
1920 × 1035
1200 × 750
1016 × 782
1352 × 760
1100 × 572

Do & don’t

What makes it Coda
  • Warm off-white cream background instead of stark white
  • Playful accent colours like purple, orange, and yellow used as highlights
  • Soft rounded corners and gentle shadows on cards
Do
  • Use a warm cream surface instead of pure white
  • Add one playful accent colour (like purple) for highlights and links
  • Keep corners softly rounded with light shadows for depth
Don’t
  • Don't use cold, stark white everywhere
  • Don't keep the palette fully grayscale
  • Don't use sharp corners or hard edges

For AltLeads: Borrow the warm cream surface and friendly accent colour to make daily call lists feel approachable rather than clinical.

Copy the tokens

Paste into any project to try this look.

/* Coda · values measured from https://coda.io/ · reference only, their brand belongs to them */
:root {
  --bg: #FFFFFF;
  --surface: #FCFAF7;
  --text: #292827;
  --muted: #73716D;
  --line: #DEDBD5;
  --accent: #714CB6;
  --on-accent: #FFFFFF;
  --radius-button: 8px;
  --radius-card: 8px;
  --radius-small: 4px;
  --button-height: 40px;
  --font-heading: "Calibre-R", "Inter", system-ui, sans-serif;
  --font-body: "Inter", "Inter", system-ui, sans-serif;
  --shadow: rgb(41, 40, 39) 0px 0px 0px 1.5px inset;
}
Enlarged image
Coda