№ trychroma-com

Trychroma

Deep charcoal expanse, stark sans-serif geometry, precise grid – a digital laboratory's cool focus.

Feature Stackminimalism brutalism monochrome swiss developer tools ailight

The page uses a stark, dark aesthetic with a prominent hero section and a clear separation of features. The typography is clean and functional, prioritizing readability and conveying a sense of technical precision. The overall feeling is efficient and focused. · ai search, developer tools, search infrastructure, chroma, dark ssa, technical landing page, minimalist ai, developer platform

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: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#3c82fc
OKLCHoklch(62.8% 0.195 261)
RoleDominant
find sites →
Hex#023082
OKLCHoklch(34.2% 0.146 261)
RoleSurface
find sites →
Hex#649cfc
OKLCHoklch(69.8% 0.154 261)
RoleInk
find sites →
Hex#8c74ac
OKLCHoklch(60.3% 0.087 304)
RoleAccent
find sites →
Hex#cec4b4
OKLCHoklch(82.4% 0.025 80)
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	Sample
h1	Inter	24px	400	1.5	Aa Bb Cc
h2	Inter	16px	500	1	Aa Bb Cc
h3	Inter	14px	600	1.43	Aa Bb Cc
body	Inter	16px	400	1.5	Aa Bb Cc
caption	Inter	14px	500	1.43	Aa Bb Cc
button	Inter	16px	400	1.5	Aa Bb Cc

Spacing scale

24px

Radius scale

0px

4px

6px

8px

10px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #3c82fc;
  --color-surface: #023082;
  --color-ink: #649cfc;
  --color-accent: #8c74ac;
  --color-detail: #cec4b4;
}

/* CSS variables exposed by source */
:root {
  --color-purple-200: lab(87.8405% 13.4282 -18.7159);
  --border: lab(90.952% 0 -.0000119209);
  --color-zinc-200: lab(90.6853% .399232 -1.45452);
  --color-rose-200: lab(86.806% 19.1909 4.07754);
  --color-slate-200: lab(91.7353% -.998765 -4.76968);
  --color-sky-500: lab(63.3038% -18.433 -51.0407);
  --color-pink-500: lab(56.9303% 76.8162 -8.07021);
  --color-orange-600: lab(57.1026% 64.2584 89.8886);
  --color-violet-600: lab(41.088% 68.9966 -91.995);
  --color-neutral-600: lab(34.924% 0 0);
  --primary-foreground: lab(98.26% 0 0);
  --color-blue-700: lab(36.9089% 35.0961 -85.6872);
  --color-neutral-300: lab(84.92% 0 -.0000119209);
  --color-slate-500: lab(48.0876% -2.03595 -16.5814);
  --text-base--line-height: calc(1.5 / 1);
  --color-blue-300: lab(77.5052% -6.4629 -36.42);
  --color-neutral-200: lab(90.952% 0 -.0000119209);
  --color-gray-300: lab(85.1236% -.612259 -3.7138);
  --color-yellow-400: lab(83.2664% 8.65132 106.895);
  --color-cyan-200: lab(91.0821% -24.0435 -12.8306);
  --color-gray-500: lab(47.7841% -.393182 -10.0268);
  --color-green-500: lab(70.5521% -66.5147 45.8073);
  --color-white: #fff;
  --color-sky-600: lab(51.7754% -11.4712 -49.8349);
  --color-gray-400: lab(65.9269% -.832707 -8.17473);
  --color-blue-400: lab(65.0361% -1.42065 -56.9802);
  --color-stone-900: lab(9.03835% 1.15298 1.92955);
  --color-yellow-300: lab(89.7033% -.480294 84.4917);
  --font-weight-bold: 700;
  --color-gray-100: lab(96.1596% -.0823438 -1.13575);
  --color-chroma-black: #27201c;
  --color-emerald-200: lab(90.2247% -31.039 9.47084);
  --text-xs--line-height: calc(1 / .75);
  --color-neutral-700: lab(27.036% 0 0);
  --color-fuchsia-600: lab(47.5131% 83.4271 -63.0363);
  --color-lime-200: lab(94.0718% -22.5338 42.5238);
  --color-fuchsia-200: lab(87.7108% 19.9958 -18.2054);
  --radius-md: calc(.625rem - 2px);
  --color-blue-800: lab(30.2514% 27.7853 -70.2699);
  --color-neutral-900: lab(7.78201% -.0000149012 0);
  --text-xl: 1.25rem;
  --color-neutral-100: lab(96.52% -.0000298023 .0000119209);
  --color-blue-100: lab(92.0301% -2.24757 -11.6453);
  --color-green-600: lab(59.0978% -58.6621 41.2579);
  --color-violet-950: lab(14.0706% 33.3353 -46.7553);
  --accent: lab(96.52% -.0000298023 .0000119209);
  --color-zinc-900: lab(8.30603% .618205 -2.16572);
  --color-red-300: lab(76.5514% 36.422 15.5335);
  --color-cyan-500: lab(67.805% -35.3952 -30.2018);
  --text-2xl--line-height: calc(2 / 1.5);
  --color-slate-600: lab(35.5623% -1.74978 -15.4316);
  --secondary-foreground: lab(7.78201% -.0000149012 0);
  --spacing: .25rem;
  --background: lab(100% 0 0);
  --color-stone-600: lab(35.5168% 1.08604 4.07829);
  --text-xl--line-height: calc(1.75 / 1.25);
  --text-sm: .875rem;
  --color-green-400: lab(78.503% -64.9265 39.7492);
  --color-emerald-500: lab(66.9756% -58.27 19.5419);
  --color-yellow-50: lab(98.6846% -1.79055 9.7766);
}

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 Trychroma.
Reference design system (extracted from the live site):
- Palette: #3c82fc, #023082, #649cfc, #8c74ac, #cec4b4
- Typefaces: Inter
- Macrostructure: Feature Stack
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/trychroma-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Inter

24px

400

1.5

Aa Bb Cc

Inter

16px

500

Aa Bb Cc

Inter

14px

600

1.43

Aa Bb Cc

body

Inter

16px

400

1.5

Aa Bb Cc

caption

Inter

14px

500

1.43

Aa Bb Cc

button

Inter

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #3c82fc; --color-surface: #023082; --color-ink: #649cfc; --color-accent: #8c74ac; --color-detail: #cec4b4; } /* CSS variables exposed by source */ :root { --color-purple-200: lab(87.8405% 13.4282 -18.7159); --border: lab(90.952% 0 -.0000119209); --color-zinc-200: lab(90.6853% .399232 -1.45452); --color-rose-200: lab(86.806% 19.1909 4.07754); --color-slate-200: lab(91.7353% -.998765 -4.76968); --color-sky-500: lab(63.3038% -18.433 -51.0407); --color-pink-500: lab(56.9303% 76.8162 -8.07021); --color-orange-600: lab(57.1026% 64.2584 89.8886); --color-violet-600: lab(41.088% 68.9966 -91.995); --color-neutral-600: lab(34.924% 0 0); --primary-foreground: lab(98.26% 0 0); --color-blue-700: lab(36.9089% 35.0961 -85.6872); --color-neutral-300: lab(84.92% 0 -.0000119209); --color-slate-500: lab(48.0876% -2.03595 -16.5814); --text-base--line-height: calc(1.5 / 1); --color-blue-300: lab(77.5052% -6.4629 -36.42); --color-neutral-200: lab(90.952% 0 -.0000119209); --color-gray-300: lab(85.1236% -.612259 -3.7138); --color-yellow-400: lab(83.2664% 8.65132 106.895); --color-cyan-200: lab(91.0821% -24.0435 -12.8306); --color-gray-500: lab(47.7841% -.393182 -10.0268); --color-green-500: lab(70.5521% -66.5147 45.8073); --color-white: #fff; --color-sky-600: lab(51.7754% -11.4712 -49.8349); --color-gray-400: lab(65.9269% -.832707 -8.17473); --color-blue-400: lab(65.0361% -1.42065 -56.9802); --color-stone-900: lab(9.03835% 1.15298 1.92955); --color-yellow-300: lab(89.7033% -.480294 84.4917); --font-weight-bold: 700; --color-gray-100: lab(96.1596% -.0823438 -1.13575); --color-chroma-black: #27201c; --color-emerald-200: lab(90.2247% -31.039 9.47084); --text-xs--line-height: calc(1 / .75); --color-neutral-700: lab(27.036% 0 0); --color-fuchsia-600: lab(47.5131% 83.4271 -63.0363); --color-lime-200: lab(94.0718% -22.5338 42.5238); --color-fuchsia-200: lab(87.7108% 19.9958 -18.2054); --radius-md: calc(.625rem - 2px); --color-blue-800: lab(30.2514% 27.7853 -70.2699); --color-neutral-900: lab(7.78201% -.0000149012 0); --text-xl: 1.25rem; --color-neutral-100: lab(96.52% -.0000298023 .0000119209); --color-blue-100: lab(92.0301% -2.24757 -11.6453); --color-green-600: lab(59.0978% -58.6621 41.2579); --color-violet-950: lab(14.0706% 33.3353 -46.7553); --accent: lab(96.52% -.0000298023 .0000119209); --color-zinc-900: lab(8.30603% .618205 -2.16572); --color-red-300: lab(76.5514% 36.422 15.5335); --color-cyan-500: lab(67.805% -35.3952 -30.2018); --text-2xl--line-height: calc(2 / 1.5); --color-slate-600: lab(35.5623% -1.74978 -15.4316); --secondary-foreground: lab(7.78201% -.0000149012 0); --spacing: .25rem; --background: lab(100% 0 0); --color-stone-600: lab(35.5168% 1.08604 4.07829); --text-xl--line-height: calc(1.75 / 1.25); --text-sm: .875rem; --color-green-400: lab(78.503% -64.9265 39.7492); --color-emerald-500: lab(66.9756% -58.27 19.5419); --color-yellow-50: lab(98.6846% -1.79055 9.7766); }

Build a landing page in the visual style of Trychroma. Reference design system (extracted from the live site): - Palette: #3c82fc, #023082, #649cfc, #8c74ac, #cec4b4 - Typefaces: Inter - Macrostructure: Feature Stack 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/trychroma-com