02 · Colour & atmosphere

Pink is the hero.

Foundation colours ground us. The block quad is the brand personality. Warm neutrals soften everything so we don't look like a developer dashboard. Pink carries the moments that matter — buttons, highlights, human moments. Below all of that, a shared ambient layer gives every page a lit, not-drawn feel.

2.1 Foundation

The bedrock four. Text, background, soft voice, lift.

#191E32
Ink
Primary text
#FFFFFF
Paper
Default bg
#466099
Slate
Muted text
#6E90CC
Lavender
Soft accent

2.2 Block quad · pink (hero)

Pink-700 is the signature accent. 500 is the base. 300 is for highlights, pressed states, and anywhere you want the colour to glow without shouting.

#FE84A9
Pink 300
Highlight
#FF5B8D
Pink 500
Base
#FF3F7A
Pink 700
Accent

2.3 Block quad · supporting

Yellow, green, and blue round out the quad. Each has highlight / base / shadow the same way pink does.

#FFD878
Yellow 300
Highlight
#F9C33E
Yellow 500
Base
#F9AD03
Yellow 700
Shadow
#7DF4D0
Green 300
Highlight
#47DDB2
Green 500
Base
#37BC9B
Green 700
Shadow
#5BD9FC
Blue 300
Highlight
#30C4F2
Blue 500
Base
#1FAAE8
Blue 700
Shadow

2.4 Warm neutrals

The quiet three. Warm 3 is the canonical page background in light mode. Warm 5 is the sunken surface. Warm 7 is the divider and deep-shadow tint.

#F4ECE4
Warm 3
Page bg
#E8DBCB
Warm 5
Surface
#D2BFAA
Warm 7
Divider

2.5 The 70/20/10 split

Use warm paper as your air. Use ink for the structural frame. Save pink for the moment that actually matters.

Composition ratio

  • 70% Warm neutrals & paper — the breathing room
  • 20% Ink — the structure
  • 10% Pink — the moment that matters

2.6 Accessible pairings

WCAG AA requires 4.5:1 for normal text, 3:1 for large text. These pairings all pass at normal-text level unless noted.

Ink on Paper AAA · 15.8:1
Ink on Warm 3 AAA · 13.5:1
Paper on Ink AAA · 15.8:1
Pink 300 on Ink AA · 5.2:1
Paper on Pink 700 Large only · 3.6:1
Slate on Paper AA · 5.1:1
Agent note · pink hex drift Generated icon / logo SVGs currently use the older pink triad #EA2880 · #EF56A3 · #F982C3. The canonical brand pinks above are #FF3F7A · #FF5B8D · #FE84A9. Use the canonical values for any new work. A one-pass SVG re-render would bring everything into alignment.

2.7 Surface modes · three rooms

Flat UI runs out of air. Three surface modes (paper, warm, ink) divide the page into rooms; the ambient glow travels through all of them.

.section.paper
Paper
#FFFFFF · token --bg-paper

The default — clean, neutral, lets colour and type do the work. Use for any reading-heavy surface.

.section.warm
Warm
#F4ECE4 · token --warm-3

A half-tone warmer. Soft break between paper sections, and the canonical page background in light mode.

.section.ink
Ink
#191E32 · token --ink

The dramatic room — messaging, testimonials, anything that benefits from pink-on-dark contrast. Also the dark-mode base.

2.8 Ambient glow

A three-stop radial stack lives behind every page via body::before. Position-fixed so it never clips on scroll. Tokens shift hue and intensity between light and dark so the mood holds in both.

Light mode
Warm paper, pink in the corner, blue across the room.
--glow-pink rgba(255, 63, 122, 0.06)
--glow-blue rgba(31, 170, 232, 0.04)
--glow-warm rgba(249, 195, 62, 0.03)
Dark mode
Ink surface, lifted hues so the pink still sings.
--glow-pink rgba(255, 110, 157, 0.14)
--glow-blue rgba(91, 217, 252, 0.07)
--glow-warm rgba(255, 216, 120, 0.05)

2.9 Stage hash

A 45° hairline hatch marks the “staging” area behind every component preview. The --stage-hash token flips value so the pattern is visible on cream and ink alike — never full-contrast, always felt more than seen.

Light · --stage-hash rgba(25, 30, 50, 0.035) .demo-stage on paper
Dark · --stage-hash rgba(244, 236, 228, 0.04) .demo-stage on ink

2.10 Atmosphere tokens · copy-ready

Every token below ships in _shared.css, theme-aware out of the box.

--glow-pink
hero corner · warm emphasis
--glow-blue
counter-balance · cool depth
--glow-warm
mid-wash · ambient warmth
--stage-hash
demo-stage texture
--bg-paper
clean surface · dominant
--warm-3
page background · light mode
--ink
dramatic surface · dark base
body::before
fixed ambient layer

2.11 Rules & notes

A few things that can break the atmosphere. Avoid them.

Rules of the atmosphere Never clip the glow with overflow: hidden on a root container — use a mask-image fade if you need the edge to soften. Keep per-page hero gradients subtle; the body layer does most of the work. In dark mode, the glow is pre-tuned — don't add extra pink to compensate.