Developing
Three install paths, one token source. Pick your platform and ship in five minutes.
React + Tailwind v4
@avala/design — Carbon-shaped React components, Radix a11y backbone, Tailwind v4 token bridge.
Native Dart
avala_design — first-class Flutter kit. Goldens + Widgetbook stories. Carbon's Flutter port is community-maintained; ours isn't.
DTCG JSON + CSS + SCSS + Dart
@avala/design-tokens — single source. Style Dictionary 4 emits CSS / SCSS / JS / Dart / DTCG JSON in lockstep for 16 (brand × tone) pairs.
5-minute install (web)
Three lines of CSS, one wrapper component, done. The kit ships its own Tailwind v4 token bridge so consumers add no design-system CSS of their own.
package.jsonjson"dependencies": {
"@avala/design": "^0.1.0",
"@avala/design-tokens": "^0.1.0"
}src/app/globals.csscss@import "tailwindcss";
@import "@avala/design/styles";
@import "@avala/design-tokens/css/avala.css";src/app/layout.tsxtsximport { ThemeProvider } from "@avala/design";
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" suppressHydrationWarning>
<body>
<ThemeProvider defaultBrand="avala" defaultTone="g100">
{children}
</ThemeProvider>
</body>
</html>
);
}Reference
Storybook (every component)
Live previews of every variant × size × tone. Embedded into each component's Usage tab.
Flutter Widgetbook
Equivalent for the Flutter kit. Goldens + Widgetbook stories, one per primitive + pattern + domain component.
Source
Apache-2.0. Open-source Carbon-shaped design system.
From Carbon → Avala
Token rename map, role-by-role mapping, cutover plan.