One design system. Eight brands. Two tones. Every component, themed in place.
Avala Design forks IBM Carbon's role taxonomy, component contracts, spacing/type scales, motion, and a11y standards verbatim — and overrides the values with Avala's brand. One kit for web (React + Tailwind v4 + Radix), one kit for Flutter (native), one set of tokens for everything.
Pick a path
Three top-level paths. Foundations (Designing) for designers, install paths (Developing) for engineers, the catalog (Components, Tokens, Themes) for everyone.
Foundations
Color, typography, spacing, motion, radius. Voice and identity. Brand × tone matrix. Locked review-state quartet.
Install
Web (React + Tailwind v4), Flutter (native), Tokens (DTCG JSON). Five-minute install for every platform.
Catalog
Primitives, patterns, layout, domain components. Each with Usage / Style / Code / Accessibility tabs.
Where we beat Carbon
Carbon is the gold standard. Here are the places Avala goes further — features Carbon's docs site doesn't ship.
16 emits, one source
Carbon ships 1 brand. Avala ships 8 brands × 2 tones, all live-swappable. Live preview at /themes.
DTCG JSON browser
Carbon's docs surface SCSS only. We surface DTCG-format tokens directly, browseable per (brand, tone).
Brand-orange overrides
Carbon's AI vocabulary, Avala-branded. 22 ai-* tokens with a dedicated playground.
Token rename map
Carbon doesn't surface its own v10 → v11 token rename table. Ours maps Carbon → Avala outright.
Same component, 8 brands
Render the same Button across all 8 brands at once. Differences visible at a glance.
Per-component badges
Story / test / usage doc coverage shown on every component page. Not data-by-vibes.