Skip to main content

White-Labeling Playground

Customize components with your brand colors

Real-time preview with built-in accessibility checking so your design meets WCAG standards.

Color Tokens

Drive the preview and accessibility checks

Main brand color for buttons and accents

Main background color

Card and elevated surfaces

Borders and dividers

Primary text color

Secondary text color

Live Preview

See your theme on real components

58 components

Install the package and add the provider. Use the tokens to theme buttons, cards, and forms.

Accessibility Compliance

Contrast from your tokens, applies to the preview

Adjust tokens to meet WCAG AA or AAA. Ratios are calculated from the pairs below.

WCAG reference

  • AA Normal: 4.5:1 (text < 18pt)
  • AA Large: 3:1 (18pt+ or 14pt+ bold)
  • AAA Normal: 7:1
  • AAA Large: 4.5:1

Primary Button

Passes AA for large text only (18pt+ or 14pt+ bold)

AA
on
3.14:1
Contrast ratio
AA Normal< 18pt
AA Large18pt+
AAA Normal< 18pt
AAA Large18pt+

Primary Text

Enhanced contrast - passes AAA for all text sizes

AAA
on
19.80:1
Contrast ratio
AA Normal< 18pt
AA Large18pt+
AAA Normal< 18pt
AAA Large18pt+

Secondary Text

Enhanced contrast - passes AAA for all text sizes

AAA
on
7.66:1
Contrast ratio
AA Normal< 18pt
AA Large18pt+
AAA Normal< 18pt
AAA Large18pt+

Surface Text

Enhanced contrast - passes AAA for all text sizes

AAA
on
17.40:1
Contrast ratio
AA Normal< 18pt
AA Large18pt+
AAA Normal< 18pt
AAA Large18pt+