Brand swap · 7 seeds × 2 themes
Changing the brand is a change to 7 values
Every control below is the production component, unmodified. Pick a brand: the 7 primitives of the brand ramp are replaced, the 16 semantic tokens that alias them follow, and nothing else in the system moves — not the type scale, not the spacing, not one component file.
- contrast measurements
- 210
- brands passing WCAG
- 6/7
- semantic decisions needed
- 4
- component files changed
- 0
Actions
Feedback
Input
USD, fees included
Brand surface
What the verifier measured
Two generators run for every seed and the cheaper one does not always win. Luminance-locked keeps each step's relative luminance, so WCAG contrast is preserved by construction — but the seed itself is kept verbatim, and a seed far from the step it replaces lands out of order inside its own ramp, which makes the primary button get lighter on hover. Structure-locked keeps the ramp's perceptual spacing around the seed, so ordering always holds — but luminance moves, so contrast has to be measured rather than assumed. Six brands ship on structure-locked; the original ships on luminance-locked because for it the two agree.
| brand | seed | ramp | generator | token rules | contrast | on-brand ink |
|---|---|---|---|---|---|---|
| Signal Yellowthe measured original ramp | #ffdd00 | luminance-lockedthe other: 0 inversions, 0 failing | pass | 30/30 pass | unchanged | |
| Cobaltthe default, and the hardest swap: a dark seed under dark text | #1f5fd8 | structure-lockedthe other: 1 inversions, 2 failing | pass | 30/30 pass | flipped light | |
| Tealmid-luminance, low chroma headroom | #0e8f8f | structure-lockedthe other: 1 inversions, 0 failing | pass | 30/30 pass | unchanged | |
| Magentahigh chroma, narrow gamut at the light end | #c2186e | structure-lockedthe other: 1 inversions, 2 failing | pass | 30/30 pass | flipped light | |
| Violetthe darkest seed in the set | #6b3bd9 | structure-lockedthe other: 1 inversions, 2 failing | pass | 30/30 pass2 declared exceptions — sys.feedback.warning aliases the brand ramp; fix is a dedicated amber ramp in Figma | flipped light | |
| Emberwarm, closest in luminance to the original | #e8591a | structure-lockedthe other: 1 inversions, 0 failing | pass | 30/30 pass | unchanged | |
| Forestdark and green: the pair most often got wrong | #1e7a3c | structure-lockedthe other: 1 inversions, 2 failing | pass | 30/30 pass | flipped light |
Four of the seven needed exactly one semantic decision: which foreground rides on the brand surface. That is not a workaround — it is the decision the semantic layer exists to hold, and the instrument is what tells you it is needed. Run it yourself with node scripts/themes/build-themes.mjs; it exits non-zero when any brand fails, so it can gate a build like every other check here.