lab · exploring

Dynamic tone

tone="dynamic" end to end: a ColorPicker seed recolors a subtree of cards, badges, stamps, an avatar, an alert, progress and a checkbox live with the generator's diagnostics and a contrast table of every text pair, server-rendered tenant cards each scope their own seed with no script, and an unset scope falls back to neutral.

frameworksastro

Exploringcard badge stamp avatar alert progress checkbox kbd color-picker

Raster auditGrid guides

scenarioSeed picker recolors a subtree

Every part inside the scope follows the picked seed in both modes; text stays readable on every surface; the diagnostics list what the generator had to clamp.

Seed: oklch(0.62 0.17 300)
Kind: chromatic
Clamped (light): text.contrast.bold
Clamped (dark): text.contrast.bold

Autumn reading club

14 members · meets Thursdays

This week: chapters 4–6. Bring one passage you would cut and one you would read aloud.

Book club Weekly Hybrid

62%

Host this week

Rosa picks the next title.

Reminder

RSVP closes Wednesday at noon. Press R on the event to reply.

Send me the reading list

scenarioContrast pairs for the seed

Every text token of the picked seed, on the weakest surface step it sits on (contrast text on the accent fill), in both modes — nothing may fall below AA; a clamped token shows as AA only.

Text contrast of the dynamic family, graded against the generator's targets

Text contrast of the dynamic family, graded against the generator's targets
Mode	Text token	On (weakest step)	WCAG	APCA Lc	Target	Result
light	text	surface.ground	7.63:1	76	7:1 · Lc 75	✓ target
light	text.bold	surface.ground	16.60:1	90	10:1 · Lc 90	✓ target
light	text.muted	surface.ground	4.60:1	64	4.5:1 · Lc 55	✓ target
light	text.accent	surface.ground	4.61:1	63	4.5:1 · Lc 60	✓ target
light	text.contrast	accent.surface.peak	4.59:1	68	4.5:1 · Lc 60	✓ target
light	text.contrast.bold	accent.surface.peak	5.58:1	83	7:1 · Lc 75	AA only (clamped)
light	text.contrast.muted	accent.surface.peak	4.59:1	68	4.5:1 · Lc 50	✓ target
light	text.contrast.accent	accent.surface.peak	4.58:1	68	4.5:1 · Lc 50	✓ target
dark	text	surface.peak	12.91:1	81	7:1 · Lc 75	✓ target
dark	text.bold	surface.peak	16.12:1	96	10:1 · Lc 90	✓ target
dark	text.muted	surface.peak	8.94:1	60	4.5:1 · Lc 55	✓ target
dark	text.accent	surface.peak	9.89:1	66	4.5:1 · Lc 60	✓ target
dark	text.contrast	accent.surface.peak	4.59:1	65	4.5:1 · Lc 60	✓ target
dark	text.contrast.bold	accent.surface.peak	6.12:1	85	7:1 · Lc 75	AA only (clamped)
dark	text.contrast.muted	accent.surface.peak	4.59:1	65	4.5:1 · Lc 50	✓ target
dark	text.contrast.accent	accent.surface.peak	4.62:1	65	4.5:1 · Lc 50	✓ target

scenarioOne seed per tenant, rendered on the server

Each card wears its tenant's color with no script; the near-gray seed becomes a tinted neutral, the yellow one keeps readable text, and the invalid seed falls back to neutral.

Harbor Coffee

Growth plan

chromatic#b45309

Northwind Clinic

Care plan

chromatic#0f766e

Lumen Studio

Studio plan

chromatic#db2777

Atlas Freight

Fleet plan

chromatic#1d4ed8

Quarry Books

Starter plan

neutral#78716c

Citrine Labs

Research plan

chromatic#facc15

Unknown tenant

Seed is not a color

neutral fallbacknot-a-color

scenarioNo scope: dynamic renders as neutral

Without a toneStyle()/applyTone() ancestor, tone="dynamic" matches tone="neutral" exactly.

tone="dynamic"

Label Label

tone="neutral"