Blooms

Use as full-section panels via the .bloom-* gradient classes. The motion-blur stripes on peach and amber are intentional — they read as soft "wind" against the radial gradients, not a render glitch.

Hard rule — bloom + text in front

When text sits in front of a bloom panel, two things are non-negotiable:

The bloom always carries .bloom-veil. Bare .bloom-* panels are display-decorative; the moment any text lands on them, the veil ships with it. Body text without a veil fails the AA legibility contract on every bloom family.
The text is always white. Use color: var(--text-on-bloom) (resolves to white). Black ink fails on saturated bloom even with the veil; the veil is calibrated for white text. Coloured ink (accent, link, status) is reserved for surfaces without bloom.

This is one rule expressed in two clauses — neither half is optional. If a design needs bloom + non-white text, the design is wrong: drop the bloom, or move the text off it.

Do — .bloom-peach + .bloom-veil with color: var(--text-on-bloom). Headline, paragraph, CTA all read at AA.

Don't — .bloom-peach alone with body text. Even at weight 500, body copy fails AA against the saturated bloom.

Don't — .bloom-peach + .bloom-veil with dark or coloured ink. The veil is tuned for white; dark text reads muddy, accent links go illegible.

Three distinct bloom surfaces

The system has three bloom-family surfaces, frequently confused. They are different primitives with different rules. Each card below renders the actual recipe.

Display only

no veil

01 · raw gradient — `.bloom-peach`

Body legible — AA at 14 px

Running prose reads cleanly. The veil drops the saturation enough for ink contrast without flattening the bloom.

with veil

02 · `--paper-42` veil over gradient

bloom art

03 · composed SVG — `<BloomArt variant={1} />`

No veil — .bloom-* alone. Raw gradient. Display-size text only. See Blooms (bare).
With veil — .bloom-* + .bloom-veil. The veil is --paper-42 (42 % paper alpha) over the gradient. Body text reads at AA.
Bloom Art — <BloomArt variant={N} />. A composed painterly SVG with washes, refractive core, subject silhouette, motion streaks, specular highlight, grain, and vignette. Five canonical variants. See Bloom Art.

The veil — step by step

Same peach gradient, the veil added in stages so the stacking order is unambiguous.

Step 1 — `.bloom-peach`Raw gradient with motion-blur stripes

Step 2 — `+ .bloom-veil``rgba(245, 245, 244, 0.42)` overlay

Acme HoldingsDelaware C-Corp · registered 2026-03-12 · 4,200,000 shares outstanding

Step 3 — body textAA at 14 px on the veil

Full matrix — every family × every surface

No veilWith veilBloom Art.bloom-peach

.bloom-lavender

.bloom-sage

.bloom-amber

The matrix is the canonical lookup. Pick the row by hue family, the column by text-density requirement.

Tokens

Class	Family	Where it ships
`.bloom-peach`	peach	hero, pricing, final CTA
`.bloom-lavender`	lavender	Manage surface, AI tints
`.bloom-sage`	sage	Exit surface
`.bloom-amber`	amber	Create surface

The veil is the same --paper-42 everywhere. Strength varies via opacity ladder if a brighter or quieter band is needed — never by changing the bloom family.

Bloom-glass rule

Any Matter text that sits over a fractal must be inside glass — see Glass rule. Body text fails AA on a saturated bloom without the veil.

Underlying stops

The four families don't share a uniform ramp — see Bloom for the per-family tokens.

Reach for .bloom-* + .bloom-veil for body text. Reach for .bloom-* alone for hero canvases with display-only text. Reach for <BloomArt variant /> when the surface needs a composed painterly orb.

Don't conflate the three. They look related; they're different surfaces with different legibility contracts.