Designing
Carbon-shaped foundations, Avala-branded. Color, typography, spacing, motion, radius — every value comes from a single token source. Every surface respects the same role taxonomy.
Foundations
Roles + tokens
Background / layer / field / text / border / support — every role in Carbon's taxonomy, with Avala values per (brand, tone).
IBM Plex + role bundles
Productive + expressive scales. Body, label, helper, code, heading-01..07, display-01..04. Tabular figures mandatory in dense data.
2 → 160 px scale
Carbon's spacing-01..13 byte-equivalent. Components consume the scale; off-scale values are CI-flagged.
Six durations × six easings
duration-fast-01..-slow-02 with productive + expressive cubic-bezier curves. Carbon-aligned.
3-tier scale + override
radius-sm / -md / -lg + radius-full. Avala default = 4 px (radius-sm), Carbon default = 0 px (sharp).
Carbon AI vocabulary, Avala-branded
22 ai-* tokens covering popovers, auras, gradient borders, skeletons. Brand orange instead of IBM blue.
Voice + identity
Voice and identity
The Avala voice — technical, precise, dense. Read this before naming a new role or surface.
8 brands × 2 tones = 16 emits
Live preview of every brand × tone permutation. Carbon ships 1 brand; Avala ships 8 from one token source.
Review-state quartet
success / warning / error / info — locked across brands. The single Carbon-divergence we can't undo without governance approval.
Compare brands
Same component, all 8 brands rendered side-by-side.