8 brands · 2 tones · 5,324 token emits
Brand × tone matrix
Eight brands. Two tones. 16 emits, every component re-themed in place. Carbon Design ships one brand; Avala ships a full multi-brand multi-tone surface from one token source.
Avala
Mission Control · default canvas
PrimaryTertiaryLink →
SuccessWarningErrorInfo
Card title
Avala renders this canvas with your tokens.
345 tokensInspect →
Avala
Mission Control · default canvas
PrimaryTertiaryLink →
SuccessWarningErrorInfo
Card title
Avala renders this canvas with your tokens.
345 tokensInspect →
Chat
Chat product
PrimaryTertiaryLink →
SuccessWarningErrorInfo
Card title
Avala renders this canvas with your tokens.
331 tokensInspect →
Chat
Chat product
PrimaryTertiaryLink →
SuccessWarningErrorInfo
Card title
Avala renders this canvas with your tokens.
331 tokensInspect →
Investor
Investor relations · light-default
PrimaryTertiaryLink →
SuccessWarningErrorInfo
Card title
Avala renders this canvas with your tokens.
331 tokensInspect →
Investor
Investor relations · light-default
PrimaryTertiaryLink →
SuccessWarningErrorInfo
Card title
Avala renders this canvas with your tokens.
331 tokensInspect →
Learning
Learning platform
PrimaryTertiaryLink →
SuccessWarningErrorInfo
Card title
Avala renders this canvas with your tokens.
331 tokensInspect →
Learning
Learning platform
PrimaryTertiaryLink →
SuccessWarningErrorInfo
Card title
Avala renders this canvas with your tokens.
331 tokensInspect →
Neutral
Generic / unbranded
PrimaryTertiaryLink →
SuccessWarningErrorInfo
Card title
Avala renders this canvas with your tokens.
331 tokensInspect →
Neutral
Generic / unbranded
PrimaryTertiaryLink →
SuccessWarningErrorInfo
Card title
Avala renders this canvas with your tokens.
331 tokensInspect →
Operations
Internal ops dashboards
PrimaryTertiaryLink →
SuccessWarningErrorInfo
Card title
Avala renders this canvas with your tokens.
331 tokensInspect →
Operations
Internal ops dashboards
PrimaryTertiaryLink →
SuccessWarningErrorInfo
Card title
Avala renders this canvas with your tokens.
331 tokensInspect →
Pay
Payments product
PrimaryTertiaryLink →
SuccessWarningErrorInfo
Card title
Avala renders this canvas with your tokens.
331 tokensInspect →
Pay
Payments product
PrimaryTertiaryLink →
SuccessWarningErrorInfo
Card title
Avala renders this canvas with your tokens.
331 tokensInspect →
Tickets
Support / tickets
PrimaryTertiaryLink →
SuccessWarningErrorInfo
Card title
Avala renders this canvas with your tokens.
331 tokensInspect →
Tickets
Support / tickets
PrimaryTertiaryLink →
SuccessWarningErrorInfo
Card title
Avala renders this canvas with your tokens.
331 tokensInspect →
How it works
One source
Token JSON files in tokens/themes/<brand>/<tone>.json drive everything. Style Dictionary emits CSS / SCSS / Dart / JSON / Figma JSON in lockstep.
Carbon-shaped roles
Every brand uses Carbon's role taxonomy verbatim — background, layer-01..03, support-*, focus. Only the values flip.
Live swap
The site's theme switcher rewrites <link href="/design-tokens/..."> at runtime; every component re-themes in place. No route change, no reload.