v0.0.1 · Phase 4 in flight

Carbon-shaped, Avala-branded.

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.

Web components

119

Stories baselined

76 / 119

Brands × tones

8 × 2

Tokens emitted

5,292

Components

119 primitives, patterns, layout + domain extensions.

Tokens

5,292 token assignments across 16 (brand, tone) emits.

Themes

8 brands × 2 tones. Toggle the live preview from the header.

Storybook

Every component, every variant, every theme tone. Visual-regression baselined in CI.

Get started

Install @avala/design, wire the token CSS, drop in your first Button.

GitHub

Source, issues, governance, roadmap.

What's locked

Status quartet: success #50CC3D, warning #F7B100, error #D93636, info #6FC1E0. Avala's review-state language; cannot grow to a 5th hue without a GOVERNANCE amendment.
4 px global border-radius. rounded-full reserved for pills/avatars.
IBM Plex Sans for UI; IBM Plex Mono for raw values you might copy (task IDs, S3 paths, timestamps, JSON).
Dark-mode-default canvas. The lone exception is the investor brand (light by default).