№ coda-io--blog

Coda — Blog

Warm, muted terracotta and deep charcoal, clean sans-serif, spacious, technically grounded.

Ecosystem Indexminimalism swiss brutalism saaslight

The layout prioritizes a clean, functional presentation of the product's features. A prominent hero section introduces the core value proposition, followed by a visually organized section showcasing key functionalities through concise blocks. The overall aesthetic is straightforward and efficient. · saas landing page, collaboration workspace, project management tools, timeline feature, minimalist design, technical ui, productivity software, workflow management

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · cool · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#f1a651
OKLCHoklch(78.2% 0.134 67)
RoleDominant
find sites →
Hex#7a4509
OKLCHoklch(44.5% 0.099 61)
RoleSurface
find sites →
Hex#fcd47c
OKLCHoklch(88.6% 0.116 86)
RoleInk
find sites →
Hex#9f5556
OKLCHoklch(53.8% 0.098 20)
RoleAccent
find sites →
Hex#c5b4a0
OKLCHoklch(77.9% 0.034 72)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Calibre-R	72px	700	1	-3.24px	Aa Bb Cc
h2	Calibre-R	38px	700	1.1	-0.95px	Aa Bb Cc
body	Inter	14px	400	1.43	-0.14px	Aa Bb Cc
button	Inter	14px	600	1.43	-0.14px	Aa Bb Cc

Spacing scale

32px

36px

60px

Radius scale

0px

8px

12px

Export

:root {
  --color-dominant: #f1a651;
  --color-surface: #7a4509;
  --color-ink: #fcd47c;
  --color-accent: #9f5556;
  --color-detail: #c5b4a0;
}

/* CSS variables exposed by source */
:root {
  --kr-red-medium-rgb: 201,22,22;
  --kr-gray-chartprimary-rgb: 102,102,102;
  --kr-red-light-rgb: 255,220,220;
  --kr-gray-medium-rgb: 102,102,102;
  --kr-red-dark-rgb: 169,30,30;
  --kr-yellow-chartprimary-rgb: 228,167,9;
  --kr-yellow-chart-rgb: 252,188,12;
  --kr-purple-light-rgb: 237,223,246;
  --kr-red-gradient-rgb: 255,146,146;
  --kr-yellow-light-rgb: 253,243,216;
  --kr-yellow-gradient-rgb: 255,206,70;
  --kr-blue-chartprimary-rgb: 15,88,189;
  --kr-green-gradient-rgb: 142,203,114;
  --kr-pink-gradient-rgb: 248,140,217;
  --kr-orange-light-rgb: 252,227,206;
  --header-bottom-border-rgba: transparent;
  --sanity-header-menu-small-top: calc(64px + 0px);
  --kr-red-chart-rgb: 221,72,72;
  --kr-yellow-dark-rgb: 139,108,29;
  --kr-gray-gradient-rgb: 190,190,190;
  --header-background-rbga: rgba(255,255,255,100%);
  --kr-gray-dark-rgb: 102,102,102;
  --kr-yellow-medium-rgb: 228,167,9;
  --kr-purple-chart-rgb: 167,98,217;
  --kr-pink-light-rgb: 248,231,243;
  --kr-orange-chart-rgb: 250,135,66;
  --kr-green-light-rgb: 226,248,232;
  --kr-gray-light-rgb: 240,240,240;
  --kr-purple-medium-rgb: 133,65,181;
  --header-bg-alpha: 0;
  --kr-blue-medium-rgb: 47,117,215;
  --kr-green-dark-rgb: 24,123,52;
  --kr-gray-chart-rgb: 142,142,142;
  --kr-pink-medium-rgb: 206,66,166;
  --kr-purple-chartprimary-rgb: 110,33,186;
  --kr-blue-gradient-rgb: 107,183,255;
  --kr-orange-medium-rgb: 236,101,21;
  --kr-purple-gradient-rgb: 210,163,225;
  --sanity-header-menu-large-top: calc(calc(64px + 0px) + 40px);
  --kr-green-chart-rgb: 66,195,102;
  --kr-pink-dark-rgb: 161,43,134;
  --kr-orange-chartprimary-rgb: 196,91,28;
  --kr-blue-chart-rgb: 82,156,226;
  --kr-pink-chartprimary-rgb: 161,43,134;
  --kr-green-medium-rgb: 46,150,75;
  --kr-pink-chart-rgb: 220,69,177;
  --kr-green-chartprimary-rgb: 24,123,52;
  --kr-orange-gradient-rgb: 252,152,92;
  --kr-red-chartprimary-rgb: 169,30,30;
  --kr-orange-dark-rgb: 196,91,28;
  --sanity-header-padding-size: 32px 32px;
  --kr-blue-dark-rgb: 15,88,189;
  --kr-purple-dark-rgb: 110,33,186;
  --kr-blue-light-rgb: 221,237,253;
  --header-no-background-rbga: rgba(255,255,255,0%);
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Coda — Blog.
Reference design system (extracted from the live site):
- Palette: #f1a651, #7a4509, #fcd47c, #9f5556, #c5b4a0
- Typefaces: Calibre-R, Inter
- Macrostructure: Ecosystem Index
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/coda-io--blog

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Calibre-R

72px

700

-3.24px

Aa Bb Cc

Calibre-R

38px

700

1.1

-0.95px

Aa Bb Cc

body

Inter

14px

400

1.43

-0.14px

Aa Bb Cc

button

Inter

14px

600

1.43

-0.14px

Aa Bb Cc

:root { --color-dominant: #f1a651; --color-surface: #7a4509; --color-ink: #fcd47c; --color-accent: #9f5556; --color-detail: #c5b4a0; } /* CSS variables exposed by source */ :root { --kr-red-medium-rgb: 201,22,22; --kr-gray-chartprimary-rgb: 102,102,102; --kr-red-light-rgb: 255,220,220; --kr-gray-medium-rgb: 102,102,102; --kr-red-dark-rgb: 169,30,30; --kr-yellow-chartprimary-rgb: 228,167,9; --kr-yellow-chart-rgb: 252,188,12; --kr-purple-light-rgb: 237,223,246; --kr-red-gradient-rgb: 255,146,146; --kr-yellow-light-rgb: 253,243,216; --kr-yellow-gradient-rgb: 255,206,70; --kr-blue-chartprimary-rgb: 15,88,189; --kr-green-gradient-rgb: 142,203,114; --kr-pink-gradient-rgb: 248,140,217; --kr-orange-light-rgb: 252,227,206; --header-bottom-border-rgba: transparent; --sanity-header-menu-small-top: calc(64px + 0px); --kr-red-chart-rgb: 221,72,72; --kr-yellow-dark-rgb: 139,108,29; --kr-gray-gradient-rgb: 190,190,190; --header-background-rbga: rgba(255,255,255,100%); --kr-gray-dark-rgb: 102,102,102; --kr-yellow-medium-rgb: 228,167,9; --kr-purple-chart-rgb: 167,98,217; --kr-pink-light-rgb: 248,231,243; --kr-orange-chart-rgb: 250,135,66; --kr-green-light-rgb: 226,248,232; --kr-gray-light-rgb: 240,240,240; --kr-purple-medium-rgb: 133,65,181; --header-bg-alpha: 0; --kr-blue-medium-rgb: 47,117,215; --kr-green-dark-rgb: 24,123,52; --kr-gray-chart-rgb: 142,142,142; --kr-pink-medium-rgb: 206,66,166; --kr-purple-chartprimary-rgb: 110,33,186; --kr-blue-gradient-rgb: 107,183,255; --kr-orange-medium-rgb: 236,101,21; --kr-purple-gradient-rgb: 210,163,225; --sanity-header-menu-large-top: calc(calc(64px + 0px) + 40px); --kr-green-chart-rgb: 66,195,102; --kr-pink-dark-rgb: 161,43,134; --kr-orange-chartprimary-rgb: 196,91,28; --kr-blue-chart-rgb: 82,156,226; --kr-pink-chartprimary-rgb: 161,43,134; --kr-green-medium-rgb: 46,150,75; --kr-pink-chart-rgb: 220,69,177; --kr-green-chartprimary-rgb: 24,123,52; --kr-orange-gradient-rgb: 252,152,92; --kr-red-chartprimary-rgb: 169,30,30; --kr-orange-dark-rgb: 196,91,28; --sanity-header-padding-size: 32px 32px; --kr-blue-dark-rgb: 15,88,189; --kr-purple-dark-rgb: 110,33,186; --kr-blue-light-rgb: 221,237,253; --header-no-background-rbga: rgba(255,255,255,0%); }

Build a landing page in the visual style of Coda — Blog. Reference design system (extracted from the live site): - Palette: #f1a651, #7a4509, #fcd47c, #9f5556, #c5b4a0 - Typefaces: Calibre-R, Inter - Macrostructure: Ecosystem Index Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/coda-io--blog