Bloom
The four bloom families don't share a uniform ramp. Peach has 3 stops, lavender and sage have 2, amber has none (rendered directly in the gradient). Don't invent missing tokens; use the gradient classes for full panels.
Three surfaces share these colors
The four families power three distinct surfaces, each with its own rule:
- Bloom with veil (
.bloom-* + .bloom-veil) — for body text. See Surfaces / Blooms. - Bloom without veil (
.bloom-*alone) — for display-only headlines and decorative bands. See Blooms (bare). - Bloom Art (
<BloomArt variant />) — composed painterly orb, five canonical variants. See Bloom Art.
Different surfaces, same colors below.
Hard rule — bloom + text in front
Whenever text sits in front of a bloom, two clauses ship together:
- The bloom carries
.bloom-veil. No bare-bloom + text combinations, ever. - The text is white —
color: var(--text-on-bloom). The veil is calibrated for white ink; dark or coloured text on a veiled bloom reads as muddy or illegible.
Long form, including do/don't pairs, at Surfaces / Blooms — Hard rule.
Four backdrops
Peach — hero, pricing, final CTA
| Token | Value |
|---|---|
--peach-1 | #FFD4B8 |
--peach-2 | #FFB58A |
--peach-3 | #F0A074 |
Lavender — Manage surface, AI tints
| Token | Value |
|---|---|
--lavender-1 | #E0DEF2 |
--lavender-2 | #C8C5E6 |
Sage — Exit surface
| Token | Value |
|---|---|
--sage-1 | #DCE6D6 |
--sage-2 | #BFD2B2 |
Amber — Create surface
Rendered directly in the gradient classes — no discrete stop tokens.
Gradient classes
| Class | Family |
|---|---|
.bloom-peach | peach gradient with motion-blur stripes |
.bloom-lavender | lavender gradient |
.bloom-sage | sage gradient |
.bloom-amber | amber gradient with motion-blur stripes |
The motion-blur stripes on peach and amber are intentional — they read as soft "wind" against the radial gradients, not a render glitch.
Render bloom only inside a bounded card. Use the gradient class.
Don't invent a
--peach-4 or --lavender-3. The families are 3 + 2 + 2 + (gradient) by rule.