Tokens

Theme generator

A tool that runs only on this site and produces a validated candidate brand-pack file from brand colours.

The theme generator turns brand, accent and optional neutral and status colours into a candidate brand pack, checks contrast at once with the same brand:validate code the build runs, and shows the result on real BigBang components, a chart sample and the illustration slots in light and dark mode.

The tool runs only on this site. Products never load it; product screens still take the brand from static CSS files produced at build time. Exports are unsigned candidates (unsigned-candidate): passing here is necessary, not sufficient, and the pack pipeline validates, reviews and signs the file again.

Inputs

Brand colour

#RRGGBB or oklch(L C H). Step lightness is fixed; hue and chroma come from this colour.

Accent colour

#RRGGBB or oklch(L C H). Step lightness is fixed; hue and chroma come from this colour.

Neutral tintTint the neutrals

Status colours

Only checked roles add a ramp to the pack; the others keep the DS defaults.

Danger (red)

Success (green)

Warning (orange)

Info (blue)

Shape and type

Primary colour

Corner radius

Font (licensed list)

Logo (preview only)

The file stays in your browser; it never enters an export or a link.

Ramps

brand

brand.600 L#4F55B4

accent

accent.600 L#954923

Lightness moves (logged)

No moves.

Dark-mode exceptions (0/8)

No exceptions.

Preview

Light

NeutralBrandInfoSuccessWarningDanger

Field label

Sample description text

Field label

Sample error text

Sample surface

Body text, secondary text and a link.

Dark

NeutralBrandInfoSuccessWarningDanger

Field label

Sample description text

Field label

Sample error text

Sample surface

Body text, secondary text and a link.

Checks

All blocking checks pass. 0 blocking issues, 0 warnings

Contrast matrix (351)

WCAG 2.x ratio, unrounded: text ≥ 4.5:1, borders and state indicators ≥ 3:1.
Mode	Pair	Ratio	Minimum	Verdict
Light	`text-default` / `surface-default`	16.734	4.5	✓ Pass
Light	`text-default` / `surface-layer-2`	15.313	4.5	✓ Pass
Light	`text-subtle` / `surface-default`	9.678	4.5	✓ Pass
Light	`text-default` / `surface-sunken`	16.444	4.5	✓ Pass
Light	`text-subtle` / `surface-sunken`	9.510	4.5	✓ Pass
Light	`text-default` / `surface-checker`	17.176	4.5	✓ Pass
Light	`text-subtlest` / `surface-checker`	7.486	4.5	✓ Pass
Light	`text-subtlest` / `surface-default`	7.293	4.5	✓ Pass
Light	`text-subtlest` / `surface-raised`	7.813	4.5	✓ Pass
Light	`text-placeholder` / `surface-raised`	4.741	4.5	✓ Pass
Light	`text-link` / `surface-default`	16.734	4.5	✓ Pass
Light	`text-danger` / `surface-raised`	6.456	4.5	✓ Pass
Light	`text-success` / `surface-raised`	5.685	4.5	✓ Pass
Light	`text-warning` / `surface-raised`	6.155	4.5	✓ Pass
Light	`text-info` / `surface-raised`	5.960	4.5	✓ Pass
Light	`text-on-brand` / `surface-brand`	17.176	4.5	✓ Pass
Light	`text-inverse` / `surface-inverse`	17.927	4.5	✓ Pass
Light	`action-on-primary-default` / `action-primary-default`	17.176	4.5	✓ Pass
Light	`action-on-primary-default` / `action-primary-hovered`	14.498	4.5	✓ Pass
Light	`action-on-secondary-default` / `action-secondary-default`	17.927	4.5	✓ Pass
Light	`action-on-danger-default` / `action-danger-default`	6.456	4.5	✓ Pass
Light	`action-on-danger-subtle-default` / `action-secondary-default`	6.456	4.5	✓ Pass
Light	`action-on-danger-subtle-default` / `surface-default`	6.027	4.5	✓ Pass
Light	`action-on-danger-subtle-default` / `action-danger-subtle-hovered`	5.991	4.5	✓ Pass
Light	`action-on-danger-subtle-default` / `action-danger-subtle-pressed`	5.518	4.5	✓ Pass
Light	`data-positive` / `surface-raised`	5.685	4.5	✓ Pass
Light	`data-negative` / `surface-raised`	6.456	4.5	✓ Pass
Light	`status-neutral-foreground` / `status-neutral-background`	9.510	4.5	✓ Pass
Light	`status-neutral-on-emphasis` / `status-neutral-emphasis`	4.741	4.5	✓ Pass
Light	`status-brand-foreground` / `status-brand-background`	7.792	4.5	✓ Pass
Light	`status-brand-on-emphasis` / `status-brand-emphasis`	6.381	4.5	✓ Pass
Light	`status-info-foreground` / `status-info-background`	7.289	4.5	✓ Pass
Light	`status-info-on-emphasis` / `status-info-emphasis`	4.997	4.5	✓ Pass
Light	`status-success-foreground` / `status-success-background`	7.091	4.5	✓ Pass
Light	`status-success-on-emphasis` / `status-success-emphasis`	5.073	4.5	✓ Pass
Light	`status-warning-foreground` / `status-warning-background`	7.414	4.5	✓ Pass
Light	`status-warning-on-emphasis` / `status-warning-emphasis`	4.852	4.5	✓ Pass
Light	`status-danger-foreground` / `status-danger-background`	7.689	4.5	✓ Pass
Light	`status-danger-on-emphasis` / `status-danger-emphasis`	4.677	4.5	✓ Pass
Light	`text-subtle` / `status-info-background`	8.999	4.5	✓ Pass
Light	`text-subtle` / `status-success-background`	9.094	4.5	✓ Pass
Light	`text-subtle` / `status-warning-background`	8.934	4.5	✓ Pass
Light	`text-subtle` / `status-danger-background`	8.861	4.5	✓ Pass
Light	`status-neutral-foreground` / `surface-raised`	10.368	4.5	✓ Pass
Light	`status-brand-foreground` / `surface-raised`	8.626	4.5	✓ Pass
Light	`status-info-foreground` / `surface-raised`	8.397	4.5	✓ Pass
Light	`status-success-foreground` / `surface-raised`	8.084	4.5	✓ Pass
Light	`status-warning-foreground` / `surface-raised`	8.604	4.5	✓ Pass
Light	`status-danger-foreground` / `surface-raised`	8.996	4.5	✓ Pass
Light	`tag-red-foreground` / `tag-red-background`	7.689	4.5	✓ Pass
Light	`tag-orange-foreground` / `tag-orange-background`	7.414	4.5	✓ Pass
Light	`tag-green-foreground` / `tag-green-background`	7.091	4.5	✓ Pass
Light	`tag-blue-foreground` / `tag-blue-background`	7.289	4.5	✓ Pass
Light	`tag-violet-foreground` / `tag-violet-background`	7.576	4.5	✓ Pass
Light	`tag-teal-foreground` / `tag-teal-background`	7.172	4.5	✓ Pass
Light	`tag-pink-foreground` / `tag-pink-background`	7.673	4.5	✓ Pass
Light	`status-neutral-foreground` / `surface-default`	9.678	4.5	✓ Pass
Light	`status-brand-foreground` / `surface-default`	8.052	4.5	✓ Pass
Light	`status-info-foreground` / `surface-default`	7.838	4.5	✓ Pass
Light	`status-success-foreground` / `surface-default`	7.546	4.5	✓ Pass
Light	`status-warning-foreground` / `surface-default`	8.032	4.5	✓ Pass
Light	`status-danger-foreground` / `surface-default`	8.397	4.5	✓ Pass
Light	`tag-violet-foreground` / `surface-default`	8.251	4.5	✓ Pass
Light	`tag-teal-foreground` / `surface-default`	7.647	4.5	✓ Pass
Light	`tag-pink-foreground` / `surface-default`	8.378	4.5	✓ Pass
Light	`text-default` / `surface-layer-1`	16.444	4.5	✓ Pass
Light	`text-subtle` / `surface-layer-1`	9.510	4.5	✓ Pass
Light	`border-input` / `surface-raised`	3.362	3	✓ Pass
Light	`border-focus` / `surface-default`	16.734	3	✓ Pass
Light	`focus-ring` / `surface-raised`	4.741	3	✓ Pass
Light	`icon-default` / `surface-default`	14.126	3	✓ Pass
Light	`icon-subtle` / `surface-raised`	4.741	3	✓ Pass
Light	`icon-danger` / `surface-raised`	5.046	3	✓ Pass
Light	`icon-success` / `surface-raised`	4.394	3	✓ Pass
Light	`icon-warning` / `surface-raised`	4.755	3	✓ Pass
Light	`icon-info` / `surface-raised`	4.611	3	✓ Pass
Light	`action-primary-default` / `surface-default`	16.734	3	✓ Pass
Light	`border-danger` / `action-secondary-default`	5.046	3	✓ Pass
Light	`illustration-ink` / `surface-default`	14.126	3	✓ Pass
Light	`illustration-ink` / `illustration-surface`	15.133	3	✓ Pass
Light	`illustration-ink` / `illustration-neutral-1`	13.881	3	✓ Pass
Light	`illustration-ink` / `illustration-primary-soft`	11.493	3	✓ Pass
Light	`illustration-success` / `surface-default`	4.101	3	✓ Pass
Light	`illustration-warning` / `surface-default`	4.438	3	✓ Pass
Light	`illustration-danger` / `surface-default`	4.710	3	✓ Pass
Light	`chart-categorical-1` / `surface-raised`	5.960	3	✓ Pass
Light	`chart-categorical-2` / `surface-raised`	3.261	3	✓ Pass
Light	`chart-categorical-3` / `surface-raised`	6.155	3	✓ Pass
Light	`chart-categorical-4` / `surface-raised`	3.546	3	✓ Pass
Light	`chart-categorical-5` / `surface-raised`	5.047	3	✓ Pass
Light	`chart-categorical-6` / `surface-raised`	4.394	3	✓ Pass
Light	`chart-categorical-7` / `surface-raised`	3.632	3	✓ Pass
Light	`chart-categorical-8` / `surface-raised`	7.813	3	✓ Pass
Light	`status-neutral-emphasis` / `surface-raised`	4.741	3	✓ Pass
Light	`status-neutral-emphasis` / `surface-default`	4.426	3	✓ Pass
Light	`status-brand-emphasis` / `surface-raised`	6.381	3	✓ Pass
Light	`status-brand-emphasis` / `surface-default`	5.956	3	✓ Pass
Light	`status-info-emphasis` / `surface-raised`	3.325	3	✓ Pass
Light	`status-info-emphasis` / `surface-default`	3.104	3	✓ Pass
Light	`status-success-emphasis` / `surface-raised`	3.248	3	✓ Pass
Light	`status-success-emphasis` / `surface-default`	3.032	3	✓ Pass
Light	`status-warning-emphasis` / `surface-raised`	3.470	3	✓ Pass
Light	`status-warning-emphasis` / `surface-default`	3.239	3	✓ Pass
Light	`status-danger-emphasis` / `surface-raised`	3.632	3	✓ Pass
Light	`status-danger-emphasis` / `surface-default`	3.390	3	✓ Pass
Light	`chart-categorical-1` / `surface-default`	5.563	3	✓ Pass
Light	`chart-categorical-2` / `surface-default`	3.044	3	✓ Pass
Light	`chart-categorical-3` / `surface-default`	5.745	3	✓ Pass
Light	`chart-categorical-4` / `surface-default`	3.310	3	✓ Pass
Light	`chart-categorical-5` / `surface-default`	4.711	3	✓ Pass
Light	`chart-categorical-6` / `surface-default`	4.101	3	✓ Pass
Light	`chart-categorical-7` / `surface-default`	3.390	3	✓ Pass
Light	`chart-categorical-8` / `surface-default`	7.293	3	✓ Pass
Light	`text-default` / `surface-translucent over surface-default`	17.324	4.5	✓ Pass
Light	`text-default` / `surface-translucent over surface-sunken`	17.324	4.5	✓ Pass
Light	`text-default` / `surface-translucent over surface-raised`	17.474	4.5	✓ Pass
Light	`text-default` / `material-glass-regular over #FFFFFF`	17.927	4.5	✓ Pass
Light	`text-default` / `material-glass-regular over #000000`	11.163	4.5	✓ Pass
Light	`text-default` / `material-glass-regular over #808080`	14.497	4.5	✓ Pass
Light	`text-default` / `material-glass-regular over #0000FF`	11.651	4.5	✓ Pass
Light	`text-default` / `material-glass-regular over #FFFF00`	17.439	4.5	✓ Pass
Light	`text-default` / `material-glass-regular over #FF0000`	12.601	4.5	✓ Pass
Light	`text-default` / `material-glass-regular over #00FF00`	16.001	4.5	✓ Pass
Light	`text-subtle` / `material-glass-regular over #FFFFFF`	10.368	4.5	✓ Pass
Light	`text-subtle` / `material-glass-regular over #000000`	6.456	4.5	✓ Pass
Light	`text-subtle` / `material-glass-regular over #808080`	8.384	4.5	✓ Pass
Light	`text-subtle` / `material-glass-regular over #0000FF`	6.738	4.5	✓ Pass
Light	`text-subtle` / `material-glass-regular over #FFFF00`	10.085	4.5	✓ Pass
Light	`text-subtle` / `material-glass-regular over #FF0000`	7.288	4.5	✓ Pass
Light	`text-subtle` / `material-glass-regular over #00FF00`	9.254	4.5	✓ Pass
Light	`text-subtlest` / `material-glass-regular over #FFFFFF`	7.813	4.5	✓ Pass
Light	`text-subtlest` / `material-glass-regular over #000000`	4.865	4.5	✓ Pass
Light	`text-subtlest` / `material-glass-regular over #808080`	6.318	4.5	✓ Pass
Light	`text-subtlest` / `material-glass-regular over #0000FF`	5.078	4.5	✓ Pass
Light	`text-subtlest` / `material-glass-regular over #FFFF00`	7.601	4.5	✓ Pass
Light	`text-subtlest` / `material-glass-regular over #FF0000`	5.492	4.5	✓ Pass
Light	`text-subtlest` / `material-glass-regular over #00FF00`	6.974	4.5	✓ Pass
Light	`icon-default` / `material-glass-regular over #FFFFFF`	15.133	3	✓ Pass
Light	`icon-default` / `material-glass-regular over #000000`	9.423	3	✓ Pass
Light	`icon-default` / `material-glass-regular over #808080`	12.238	3	✓ Pass
Light	`icon-default` / `material-glass-regular over #0000FF`	9.835	3	✓ Pass
Light	`icon-default` / `material-glass-regular over #FFFF00`	14.721	3	✓ Pass
Light	`icon-default` / `material-glass-regular over #FF0000`	10.637	3	✓ Pass
Light	`icon-default` / `material-glass-regular over #00FF00`	13.507	3	✓ Pass
Light	`text-default` / `material-glass-regular-contrast over #FFFFFF`	17.927	4.5	✓ Pass
Light	`text-default` / `material-glass-regular-contrast over #000000`	15.038	4.5	✓ Pass
Light	`text-default` / `material-glass-regular-contrast over #808080`	16.444	4.5	✓ Pass
Light	`text-default` / `material-glass-regular-contrast over #0000FF`	15.247	4.5	✓ Pass
Light	`text-default` / `material-glass-regular-contrast over #FFFF00`	17.719	4.5	✓ Pass
Light	`text-default` / `material-glass-regular-contrast over #FF0000`	15.652	4.5	✓ Pass
Light	`text-default` / `material-glass-regular-contrast over #00FF00`	17.104	4.5	✓ Pass
Light	`text-subtle` / `material-glass-regular-contrast over #FFFFFF`	10.368	4.5	✓ Pass
Light	`text-subtle` / `material-glass-regular-contrast over #000000`	8.697	4.5	✓ Pass
Light	`text-subtle` / `material-glass-regular-contrast over #808080`	9.510	4.5	✓ Pass
Light	`text-subtle` / `material-glass-regular-contrast over #0000FF`	8.817	4.5	✓ Pass
Light	`text-subtle` / `material-glass-regular-contrast over #FFFF00`	10.247	4.5	✓ Pass
Light	`text-subtle` / `material-glass-regular-contrast over #FF0000`	9.052	4.5	✓ Pass
Light	`text-subtle` / `material-glass-regular-contrast over #00FF00`	9.892	4.5	✓ Pass
Light	`text-subtlest` / `material-glass-regular-contrast over #FFFFFF`	7.813	4.5	✓ Pass
Light	`text-subtlest` / `material-glass-regular-contrast over #000000`	6.554	4.5	✓ Pass
Light	`text-subtlest` / `material-glass-regular-contrast over #808080`	7.167	4.5	✓ Pass
Light	`text-subtlest` / `material-glass-regular-contrast over #0000FF`	6.645	4.5	✓ Pass
Light	`text-subtlest` / `material-glass-regular-contrast over #FFFF00`	7.722	4.5	✓ Pass
Light	`text-subtlest` / `material-glass-regular-contrast over #FF0000`	6.822	4.5	✓ Pass
Light	`text-subtlest` / `material-glass-regular-contrast over #00FF00`	7.455	4.5	✓ Pass
Light	`icon-default` / `material-glass-regular-contrast over #FFFFFF`	15.133	3	✓ Pass
Light	`icon-default` / `material-glass-regular-contrast over #000000`	12.694	3	✓ Pass
Light	`icon-default` / `material-glass-regular-contrast over #808080`	13.881	3	✓ Pass
Light	`icon-default` / `material-glass-regular-contrast over #0000FF`	12.870	3	✓ Pass
Light	`icon-default` / `material-glass-regular-contrast over #FFFF00`	14.957	3	✓ Pass
Light	`icon-default` / `material-glass-regular-contrast over #FF0000`	13.212	3	✓ Pass
Light	`icon-default` / `material-glass-regular-contrast over #00FF00`	14.438	3	✓ Pass
Light	`action-on-primary-default` / `action-primary-default glass over #FFFFFF`	13.010	4.5	✓ Pass
Light	`action-on-primary-default` / `action-primary-default glass over #000000`	17.495	4.5	✓ Pass
Light	`action-on-primary-default` / `action-primary-default glass over #808080`	15.242	4.5	✓ Pass
Light	`action-on-primary-default` / `action-primary-default glass over #0000FF`	17.070	4.5	✓ Pass
Light	`action-on-primary-default` / `action-primary-default glass over #FFFF00`	13.255	4.5	✓ Pass
Light	`action-on-primary-default` / `action-primary-default glass over #FF0000`	16.300	4.5	✓ Pass
Light	`action-on-primary-default` / `action-primary-default glass over #00FF00`	14.035	4.5	✓ Pass
Dark	`text-default` / `surface-default`	15.972	4.5	✓ Pass
Dark	`text-default` / `surface-layer-2`	12.644	4.5	✓ Pass
Dark	`text-subtle` / `surface-default`	11.247	4.5	✓ Pass
Dark	`text-default` / `surface-sunken`	17.176	4.5	✓ Pass
Dark	`text-subtle` / `surface-sunken`	12.094	4.5	✓ Pass
Dark	`text-default` / `surface-checker`	18.230	4.5	✓ Pass
Dark	`text-subtlest` / `surface-checker`	7.364	4.5	✓ Pass
Dark	`text-subtlest` / `surface-default`	6.452	4.5	✓ Pass
Dark	`text-subtlest` / `surface-raised`	5.857	4.5	✓ Pass
Dark	`text-placeholder` / `surface-raised`	5.857	4.5	✓ Pass
Dark	`text-link` / `surface-default`	15.972	4.5	✓ Pass
Dark	`text-danger` / `surface-raised`	9.609	4.5	✓ Pass
Dark	`text-success` / `surface-raised`	10.217	4.5	✓ Pass
Dark	`text-warning` / `surface-raised`	9.748	4.5	✓ Pass
Dark	`text-info` / `surface-raised`	9.981	4.5	✓ Pass
Dark	`text-on-brand` / `surface-brand`	14.231	4.5	✓ Pass
Dark	`text-inverse` / `surface-inverse`	17.176	4.5	✓ Pass
Dark	`action-on-primary-default` / `action-primary-default`	14.231	4.5	✓ Pass
Dark	`action-on-primary-default` / `action-primary-hovered`	12.094	4.5	✓ Pass
Dark	`action-on-secondary-default` / `action-secondary-default`	14.498	4.5	✓ Pass
Dark	`action-on-danger-default` / `action-danger-default`	9.730	4.5	✓ Pass
Dark	`action-on-danger-subtle-default` / `action-secondary-default`	9.609	4.5	✓ Pass
Dark	`action-on-danger-subtle-default` / `surface-default`	10.586	4.5	✓ Pass
Dark	`action-on-danger-subtle-default` / `action-danger-subtle-hovered`	10.788	4.5	✓ Pass
Dark	`action-on-danger-subtle-default` / `action-danger-subtle-pressed`	8.885	4.5	✓ Pass
Dark	`data-positive` / `surface-raised`	10.217	4.5	✓ Pass
Dark	`data-negative` / `surface-raised`	9.609	4.5	✓ Pass
Dark	`status-neutral-foreground` / `status-neutral-background`	10.477	4.5	✓ Pass
Dark	`status-neutral-on-emphasis` / `status-neutral-emphasis`	7.662	4.5	✓ Pass
Dark	`status-brand-foreground` / `status-brand-background`	9.205	4.5	✓ Pass
Dark	`status-brand-on-emphasis` / `status-brand-emphasis`	8.741	4.5	✓ Pass
Dark	`status-info-foreground` / `status-info-background`	10.449	4.5	✓ Pass
Dark	`status-info-on-emphasis` / `status-info-emphasis`	8.685	4.5	✓ Pass
Dark	`status-success-foreground` / `status-success-background`	10.487	4.5	✓ Pass
Dark	`status-success-on-emphasis` / `status-success-emphasis`	8.922	4.5	✓ Pass
Dark	`status-warning-foreground` / `status-warning-background`	10.486	4.5	✓ Pass
Dark	`status-warning-on-emphasis` / `status-warning-emphasis`	8.526	4.5	✓ Pass
Dark	`status-danger-foreground` / `status-danger-background`	10.542	4.5	✓ Pass
Dark	`status-danger-on-emphasis` / `status-danger-emphasis`	8.350	4.5	✓ Pass
Dark	`text-subtle` / `status-info-background`	9.190	4.5	✓ Pass
Dark	`text-subtle` / `status-success-background`	9.020	4.5	✓ Pass
Dark	`text-subtle` / `status-warning-background`	9.303	4.5	✓ Pass
Dark	`text-subtle` / `status-danger-background`	9.440	4.5	✓ Pass
Dark	`status-neutral-foreground` / `surface-raised`	12.013	4.5	✓ Pass
Dark	`status-brand-foreground` / `surface-raised`	8.938	4.5	✓ Pass
Dark	`status-info-foreground` / `surface-raised`	11.607	4.5	✓ Pass
Dark	`status-success-foreground` / `surface-raised`	11.869	4.5	✓ Pass
Dark	`status-warning-foreground` / `surface-raised`	11.507	4.5	✓ Pass
Dark	`status-danger-foreground` / `surface-raised`	11.401	4.5	✓ Pass
Dark	`tag-red-foreground` / `tag-red-background`	10.542	4.5	✓ Pass
Dark	`tag-orange-foreground` / `tag-orange-background`	10.486	4.5	✓ Pass
Dark	`tag-green-foreground` / `tag-green-background`	10.487	4.5	✓ Pass
Dark	`tag-blue-foreground` / `tag-blue-background`	10.449	4.5	✓ Pass
Dark	`tag-violet-foreground` / `tag-violet-background`	10.545	4.5	✓ Pass
Dark	`tag-teal-foreground` / `tag-teal-background`	10.441	4.5	✓ Pass
Dark	`tag-pink-foreground` / `tag-pink-background`	10.529	4.5	✓ Pass
Dark	`status-neutral-foreground` / `surface-default`	13.234	4.5	✓ Pass
Dark	`status-brand-foreground` / `surface-default`	9.846	4.5	✓ Pass
Dark	`status-info-foreground` / `surface-default`	12.787	4.5	✓ Pass
Dark	`status-success-foreground` / `surface-default`	13.075	4.5	✓ Pass
Dark	`status-warning-foreground` / `surface-default`	12.676	4.5	✓ Pass
Dark	`status-danger-foreground` / `surface-default`	12.559	4.5	✓ Pass
Dark	`tag-violet-foreground` / `surface-default`	12.660	4.5	✓ Pass
Dark	`tag-teal-foreground` / `surface-default`	13.002	4.5	✓ Pass
Dark	`tag-pink-foreground` / `surface-default`	12.473	4.5	✓ Pass
Dark	`text-default` / `surface-layer-1`	14.498	4.5	✓ Pass
Dark	`text-subtle` / `surface-layer-1`	10.209	4.5	✓ Pass
Dark	`border-input` / `surface-raised`	3.191	3	✓ Pass
Dark	`border-focus` / `surface-default`	13.234	3	✓ Pass
Dark	`focus-ring` / `surface-raised`	4.500	3	✓ Pass
Dark	`icon-default` / `surface-default`	15.291	3	✓ Pass
Dark	`icon-subtle` / `surface-raised`	5.857	3	✓ Pass
Dark	`icon-danger` / `surface-raised`	7.437	3	✓ Pass
Dark	`icon-success` / `surface-raised`	8.192	3	✓ Pass
Dark	`icon-warning` / `surface-raised`	7.662	3	✓ Pass
Dark	`icon-info` / `surface-raised`	7.908	3	✓ Pass
Dark	`action-primary-default` / `surface-default`	13.234	3	✓ Pass
Dark	`border-danger` / `action-secondary-default`	7.437	3	✓ Pass
Dark	`illustration-ink` / `surface-default`	15.291	3	✓ Pass
Dark	`illustration-ink` / `illustration-surface`	13.881	3	✓ Pass
Dark	`illustration-ink` / `illustration-neutral-1`	12.105	3	✓ Pass
Dark	`illustration-ink` / `illustration-primary-soft`	10.586	3	✓ Pass
Dark	`illustration-success` / `surface-default`	9.024	3	✓ Pass
Dark	`illustration-warning` / `surface-default`	8.441	3	✓ Pass
Dark	`illustration-danger` / `surface-default`	8.193	3	✓ Pass
Dark	`chart-categorical-1` / `surface-raised`	7.908	3	✓ Pass
Dark	`chart-categorical-2` / `surface-raised`	10.104	3	✓ Pass
Dark	`chart-categorical-3` / `surface-raised`	4.360	3	✓ Pass
Dark	`chart-categorical-4` / `surface-raised`	4.266	3	✓ Pass
Dark	`chart-categorical-5` / `surface-raised`	7.374	3	✓ Pass
Dark	`chart-categorical-6` / `surface-raised`	4.658	3	✓ Pass
Dark	`chart-categorical-7` / `surface-raised`	9.609	3	✓ Pass
Dark	`chart-categorical-8` / `surface-raised`	5.857	3	✓ Pass
Dark	`status-neutral-emphasis` / `surface-raised`	5.857	3	✓ Pass
Dark	`status-neutral-emphasis` / `surface-default`	6.452	3	✓ Pass
Dark	`status-brand-emphasis` / `surface-raised`	6.682	3	✓ Pass
Dark	`status-brand-emphasis` / `surface-default`	7.361	3	✓ Pass
Dark	`status-info-emphasis` / `surface-raised`	7.908	3	✓ Pass
Dark	`status-info-emphasis` / `surface-default`	8.711	3	✓ Pass
Dark	`status-success-emphasis` / `surface-raised`	8.192	3	✓ Pass
Dark	`status-success-emphasis` / `surface-default`	9.024	3	✓ Pass
Dark	`status-warning-emphasis` / `surface-raised`	7.662	3	✓ Pass
Dark	`status-warning-emphasis` / `surface-default`	8.441	3	✓ Pass
Dark	`status-danger-emphasis` / `surface-raised`	7.437	3	✓ Pass
Dark	`status-danger-emphasis` / `surface-default`	8.193	3	✓ Pass
Dark	`chart-categorical-1` / `surface-default`	8.711	3	✓ Pass
Dark	`chart-categorical-2` / `surface-default`	11.130	3	✓ Pass
Dark	`chart-categorical-3` / `surface-default`	4.803	3	✓ Pass
Dark	`chart-categorical-4` / `surface-default`	4.700	3	✓ Pass
Dark	`chart-categorical-5` / `surface-default`	8.123	3	✓ Pass
Dark	`chart-categorical-6` / `surface-default`	5.131	3	✓ Pass
Dark	`chart-categorical-7` / `surface-default`	10.586	3	✓ Pass
Dark	`chart-categorical-8` / `surface-default`	6.452	3	✓ Pass
Dark	`text-default` / `surface-translucent over surface-default`	15.972	4.5	✓ Pass
Dark	`text-default` / `surface-translucent over surface-sunken`	16.150	4.5	✓ Pass
Dark	`text-default` / `surface-translucent over surface-raised`	15.791	4.5	✓ Pass
Dark	`text-default` / `material-glass-regular over #FFFFFF`	6.816	4.5	✓ Pass
Dark	`text-default` / `material-glass-regular over #000000`	11.751	4.5	✓ Pass
Dark	`text-default` / `material-glass-regular over #808080`	8.901	4.5	✓ Pass
Dark	`text-default` / `material-glass-regular over #0000FF`	11.167	4.5	✓ Pass
Dark	`text-default` / `material-glass-regular over #FFFF00`	7.029	4.5	✓ Pass
Dark	`text-default` / `material-glass-regular over #FF0000`	10.184	4.5	✓ Pass
Dark	`text-default` / `material-glass-regular over #00FF00`	7.742	4.5	✓ Pass
Dark	`text-subtle` / `material-glass-regular over #FFFFFF`	4.799	4.5	✓ Pass
Dark	`text-subtle` / `material-glass-regular over #000000`	8.275	4.5	✓ Pass
Dark	`text-subtle` / `material-glass-regular over #808080`	6.268	4.5	✓ Pass
Dark	`text-subtle` / `material-glass-regular over #0000FF`	7.864	4.5	✓ Pass
Dark	`text-subtle` / `material-glass-regular over #FFFF00`	4.949	4.5	✓ Pass
Dark	`text-subtle` / `material-glass-regular over #FF0000`	7.171	4.5	✓ Pass
Dark	`text-subtle` / `material-glass-regular over #00FF00`	5.451	4.5	✓ Pass
Dark	`icon-default` / `material-glass-regular over #FFFFFF`	6.525	3	✓ Pass
Dark	`icon-default` / `material-glass-regular over #000000`	11.250	3	✓ Pass
Dark	`icon-default` / `material-glass-regular over #808080`	8.522	3	✓ Pass
Dark	`icon-default` / `material-glass-regular over #0000FF`	10.691	3	✓ Pass
Dark	`icon-default` / `material-glass-regular over #FFFF00`	6.729	3	✓ Pass
Dark	`icon-default` / `material-glass-regular over #FF0000`	9.749	3	✓ Pass
Dark	`icon-default` / `material-glass-regular over #00FF00`	7.412	3	✓ Pass
Dark	`text-default` / `material-glass-regular-contrast over #FFFFFF`	7.725	4.5	✓ Pass
Dark	`text-default` / `material-glass-regular-contrast over #000000`	11.577	4.5	✓ Pass
Dark	`text-default` / `material-glass-regular-contrast over #808080`	9.478	4.5	✓ Pass
Dark	`text-default` / `material-glass-regular-contrast over #0000FF`	11.175	4.5	✓ Pass
Dark	`text-default` / `material-glass-regular-contrast over #FFFF00`	7.915	4.5	✓ Pass
Dark	`text-default` / `material-glass-regular-contrast over #FF0000`	10.467	4.5	✓ Pass
Dark	`text-default` / `material-glass-regular-contrast over #00FF00`	8.533	4.5	✓ Pass
Dark	`text-subtle` / `material-glass-regular-contrast over #FFFFFF`	5.439	4.5	✓ Pass
Dark	`text-subtle` / `material-glass-regular-contrast over #000000`	8.152	4.5	✓ Pass
Dark	`text-subtle` / `material-glass-regular-contrast over #808080`	6.674	4.5	✓ Pass
Dark	`text-subtle` / `material-glass-regular-contrast over #0000FF`	7.869	4.5	✓ Pass
Dark	`text-subtle` / `material-glass-regular-contrast over #FFFF00`	5.573	4.5	✓ Pass
Dark	`text-subtle` / `material-glass-regular-contrast over #FF0000`	7.371	4.5	✓ Pass
Dark	`text-subtle` / `material-glass-regular-contrast over #00FF00`	6.009	4.5	✓ Pass
Dark	`icon-default` / `material-glass-regular-contrast over #FFFFFF`	7.395	3	✓ Pass
Dark	`icon-default` / `material-glass-regular-contrast over #000000`	11.084	3	✓ Pass
Dark	`icon-default` / `material-glass-regular-contrast over #808080`	9.074	3	✓ Pass
Dark	`icon-default` / `material-glass-regular-contrast over #0000FF`	10.698	3	✓ Pass
Dark	`icon-default` / `material-glass-regular-contrast over #FFFF00`	7.578	3	✓ Pass
Dark	`icon-default` / `material-glass-regular-contrast over #FF0000`	10.021	3	✓ Pass
Dark	`icon-default` / `material-glass-regular-contrast over #00FF00`	8.170	3	✓ Pass
Dark	`action-on-primary-default` / `action-primary-default glass over #FFFFFF`	14.497	4.5	✓ Pass
Dark	`action-on-primary-default` / `action-primary-default glass over #000000`	11.507	4.5	✓ Pass
Dark	`action-on-primary-default` / `action-primary-default glass over #808080`	12.948	4.5	✓ Pass
Dark	`action-on-primary-default` / `action-primary-default glass over #0000FF`	11.723	4.5	✓ Pass
Dark	`action-on-primary-default` / `action-primary-default glass over #FFFF00`	14.281	4.5	✓ Pass
Dark	`action-on-primary-default` / `action-primary-default glass over #FF0000`	12.143	4.5	✓ Pass
Dark	`action-on-primary-default` / `action-primary-default glass over #00FF00`	13.646	4.5	✓ Pass
Dark	`icon-default` / `material-glass-clear over #FFFFFF`	3.251	3	✓ Pass
Dark	`icon-default` / `material-glass-clear over #000000`	13.702	3	✓ Pass
Dark	`icon-default` / `material-glass-clear over #808080`	6.525	3	✓ Pass
Dark	`icon-default` / `material-glass-clear over #0000FF`	11.121	3	✓ Pass
Dark	`icon-default` / `material-glass-clear over #FFFF00`	3.440	3	✓ Pass
Dark	`icon-default` / `material-glass-clear over #FF0000`	8.139	3	✓ Pass
Dark	`icon-default` / `material-glass-clear over #00FF00`	4.153	3	✓ Pass

Export

Exports are unsigned candidates (unsigned-candidate), not approved. Signing and versioning happen in the brand-pack pipeline.

Share link

Import

Paste or choose a brand file, a DTCG export or a manifest candidate.

Choose file

How it works

Ramp: Each colour is converted to OKLCH. The lightness of the 11 steps (50–950) comes from one fixed table shared by every brand; hue comes from the input colour, and chroma from the input’s chroma along a per-step curve. A step outside sRGB keeps its lightness and hue, loses only chroma, and is flagged “clamped”.
Contrast gate: Every light and dark pair is measured with the WCAG 2.x ratio, unrounded: text at least 4.5:1, borders and state indicators at least 3:1. If one pair fails, export is locked and the first failing check is named.
Suggestions: For a failing pair the tool moves only the lightness of the brand-owned step (hue and chroma ratio kept) and shows the ratio before and after. Each applied move is logged in the brand file and the contrast report.
Dark mode: Colours are not inverted. The dark mapping of the semantic layer uses the same ramps; for a pair that fails in dark mode the tool proposes an exception that points the token at another step of the same ramp. At most 8 exceptions are allowed; a 9th locks export.
Colour vision: The preview can be viewed with protan, deutan and tritan simulation. Chart palette pairs are checked by Oklab distance (ΔE OK) in normal vision and under each simulation; pairs that are too close are listed as warnings.
Material: The Material switch shows the preview on solid or glass. Glass draws a token gradient behind each mode and adds the glass Buttons, so the brand can be seen through the glass tints. Glass is chosen by the app, not stored in the brand file.

Exports

File	Contents
`<id>.json`	Brand file; the same schema as `packages/tokens/src/brands/`, with seed colours and logged lightness moves
`<id>.manifest.candidate.json`	Candidate manifest fields: font and its licence, corner radius preset, a `packVersion` proposal
`<id>.tokens.dtcg.json`	Ramps as DTCG 2025.10 colour objects (`oklch` components and sRGB `hex`)
`<id>.preview.css`	`--bigbang-color-*` variables for light and dark mode; for preview and diffs only
`<id>.figma-variables.json`	Colour variables with `light` and `dark` modes; channel values 0–1
`<id>.contrast.json`, `<id>.contrast.md`	The same pairs, ratios and verdicts; lightness moves and dark exceptions
`<id>.echarts-theme.json`	An ECharts theme per mode: categorical palette, axis and text colours, sequential palette

Import accepts a brand file, a DTCG export and a manifest candidate; an unknown key is rejected with its schema path. Share link writes the state, compressed, after the # of the address; it carries only colours and options, never the brand id or the logo. If the link would exceed 2,000 characters the tool offers a file download instead.

Limits

The logo is shown in the preview only; an SVG with a script, an event attribute or an external reference is rejected. The logo never enters an export or a link.
The chart preview does not load the ECharts library; it is an SVG sample drawn with the colours of the exported theme.
The APCA measure stays off until its licence review is complete; the gate is the WCAG 2.x ratio.

Keyboard

Every control is reachable with Tab. Colour fields accept typed #RRGGBB or oklch(L C H) next to the picker; Enter applies it. Left and right arrow keys move between preview tabs. When the check summary changes, one polite live region announces the counts only.