Color
One saturated cobalt does the talking. Everything else is a family of cool-tinted neutrals, kept quiet so the blue reads as the only colour move that matters. The palette is restrained on purpose: this is a light page with one editorial accent, not a brand that paints with every hue it owns.
Primary
Two blues, one voice
Royal is the voice colour, reserved for emphasis. Cobalt is the deeper, more pressed sibling that carries solid fills: buttons, drenches, the mark. Hold the line between them; they are not interchangeable.
#4856F8oklch(54.8% 0.238 272)The voice colour. Editorial word-emphasis in headings, the FAQ active state, the close-CTA ground.
#2233F0oklch(47.4% 0.271 267)The deeper sibling. Primary buttons, drenched heroes, the Stacklane comparison column, the mark's middle card.
Neutrals
A single cool family
Ten steps from ink to white, each carrying a measurable cool tint toward hue 270. They read as one family with the blue, never as separately-sourced grays. That coherence is what lets the cobalt stay the only thing that looks like colour.
#222222oklch(25.2% 0.000 90)Primary ink. Body and headings.
#1E1D22oklch(23.4% 0.010 295)Dark drench, inverse pills.
#6F717Foklch(55.2% 0.022 279)Secondary text, card bodies.
#9CA2AFoklch(71.2% 0.020 266)Dimmed emphasis word, subtitles.
#BDBDCCoklch(80.3% 0.021 286)Dimmest text grade, captions.
#D2D6DFoklch(87.6% 0.013 267)Secondary-button + card borders.
#E4E4E4oklch(91.9% 0.000 90)Default 1px pill border.
#EDEEF8oklch(95.1% 0.013 282)Tinted surfaces, bento shells, soft borders.
#FAFAFFoklch(98.7% 0.007 286)Warm-cool off-white, illustration grounds.
#FFFFFFoklch(100% 0 0)Page background, cards, pills.
Named rule
Colour is emphasis, not decoration
Royal marks the editorially-meaningful word inside a heading: the verb, the named alternative, the contradiction. Pair it with one dimmed Gray Chateau word in the same line. Ink, then blue, then gray, is the triad that carries the brand’s voice in type. Used anywhere else, the blue competes with the headings and the meaning evaporates.
From idea to shipped features
ink → blue → grayContrast
Pairings that pass
Body and UI text clears 4.5:1; large display text clears 3:1. Cobalt and ink are safe on white for any size. Royal clears AA for body but is happiest on emphasis-sized type. Gray Chateau is large-display only: it is the dimmed emphasis word, never a body colour.
15.9:1AAA7.5:1AAA5.3:1AA4.8:1AA13.8:1AAA2.6:1Large only