Documentation

AvilaDS Documentation

Everything you need to build with AvilaDS — design tokens, components, and live Storybook references, all in one place.

Getting Started

Install the token stylesheet once and every AvilaDS CSS custom property is available globally. No build step, no configuration — just import and go.

CSSglobals.css
@import '@avila-ds/tokens/dist/css/tokens.light.css';

After importing, every var(--avila-*) token resolves automatically. Swap to tokens.dark.css for dark-mode values, or use both with a data-theme attribute.