Coda
Ecosystem Index
Soft, muted tech—clean, spacious, with gentle curves and a calming, cool grey palette.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Inter | 64px | 700 | 1.05 | -1.92px | Aa Bb Cc |
| h2 | ui-sans-serif | 36px | 700 | 1.25 | -0.9px | Aa Bb Cc |
| h3 | ui-sans-serif | 11px | 600 | 1.5 | 1.1px | Aa Bb Cc |
| body | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | ui-sans-serif | 14px | 500 | 1.43 | 0 | Aa Bb Cc |
| button | ui-sans-serif | 14px | 500 | 1.43 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #6cccac;
--color-surface: #22624d;
--color-ink: #f9d274;
--color-accent: #a18085;
--color-detail: #dbd6c2;
}
/* CSS variables exposed by source */
:root {
--color-purple-200: oklch(90.24% .0605 306.66);
--color-fuchsia-700: oklch(46.76% .1627 324.14);
--color-rose-200: oklch(89.25% .0559 9.93);
--color-sky-500: oklch(65.87% .136 235.85);
--color-pink-500: oklch(64.64% .1975 353.62);
--color-violet-600: oklch(53.35% .2132 294.83);
--color-orange-600: oklch(60.78% .1566 44.53);
--color-red-900: oklch(35.86% .0571 20.25);
--color-orange-800: oklch(42.36% .0807 38.2);
--color-teal-400: oklch(78.45% .1325 181.94);
--color-pink-950: oklch(26.55% .0435 355.89);
--color-blue-700: oklch(47.32% .1411 266.08);
--color-old-neutral-800: oklch(26.9% 0 0);
--color-old-neutral-600: oklch(43.9% 0 0);
--color-gray-825: oklch(27.8% .0055 285.95);
--color-neutral-300: oklch(86.43% .0017 67.13);
--color-purple-800: oklch(41.29% .1135 307.66);
--color-orange-900: oklch(36.06% .0502 39.71);
--text-base--line-height: 1.5;
--color-orange-50: oklch(97.96% .0157 73.64);
--color-blue-300: oklch(80.91% .0957 251.83);
--color-cyan-700: oklch(43.99% .0657 218.87);
--color-gray-300: oklch(86.43% .0017 67.13);
--color-gray-550: oklch(51.97% .0041 39.02);
--color-yellow-400: oklch(86.06% .173 91.94);
--font-mono: "JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
--color-slate-300: oklch(86.9% .022 252.894);
--color-cyan-200: oklch(91.67% .0772 205.09);
--color-amber-300: oklch(87.9% .1533 91.61);
--color-gray-500: oklch(57.25% .0051 33.89);
--color-green-500: oklch(69.81% .1758 150.49);
--color-white: oklch(100% .0001 263.28);
--color-sky-600: oklch(54.14% .1136 238.26);
--color-gray-400: oklch(71.61% .006 30.59);
--color-blue-400: oklch(71.37% .1435 254.63);
--color-gray-375: oklch(74.86% .0057 16.69);
--radius-sm: .25rem;
--color-pink-50: oklch(97.14% .0142 342.87);
--color-gray-125: oklch(95.56% .0016 67.03);
--color-yellow-300: oklch(90.53% .1656 98.12);
--font-weight-bold: 700;
--color-gray-100: oklch(96.76% .0016 67.02);
--color-teal-950: oklch(22.96% .0207 190.54);
--color-emerald-200: oklch(90.49% .0895 164.2);
--color-purple-600: oklch(54.18% .2196 303.68);
--color-teal-900: oklch(31.25% .0303 189.04);
--color-violet-800: oklch(41.96% .1217 298.9);
--text-xs--line-height: 1.33333;
--color-old-neutral-950: oklch(14.5% 0 0);
--color-violet-500: oklch(60.27% .2044 293.24);
--color-fuchsia-600: oklch(55.47% .2118 323.2);
--color-sky-50: oklch(97.71% .0126 236.8);
--color-lime-200: oklch(93.82% .1216 124.35);
--color-fuchsia-200: oklch(90.3% .0733 319.57);
--color-green-900: oklch(34.06% .0437 157.15);
--radius-2xl: 1rem;
--radius-md: .375rem;
--color-rose-950: oklch(25.47% .0409 2.34);
--color-blue-800: oklch(40.84% .0948 268.99);
--color-pink-100: oklch(94.82% .0277 342.09);
}Drop-in prompt
Build a landing page in the visual style of Capacities — Changelog.
Reference design system (extracted from the live site):
- Palette: #6cccac, #22624d, #f9d274, #a18085, #dbd6c2
- Typefaces: Inter, ui-sans-serif
- 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/capacities-io--whats-new