The Design System
for Modern Products
AvilaDS connects Figma design tokens to production-ready components — accessible, themeable, and documented end-to-end.
Everything you need
A complete toolkit — from Figma tokens to accessible, documented components.
Figma-Synced Tokens
Design tokens flow directly from Figma variables to CSS custom properties — one source of truth, zero drift between design and code.
Storybook Documentation
Every component ships with interactive Storybook stories. Explore variants, sizes, and states before writing a single line of product code.
Accessible by Default
Components are built on Radix UI primitives — keyboard navigation, focus management, and ARIA semantics are baked in, not bolted on.
Dark Mode Support
Swap a single data attribute and every token resolves to its dark-mode value automatically. No component code changes required.
Button Variants
Six production-ready variants. All styled with CSS custom properties — no hardcoded hex.
Color Tokens
Primitive tokens map to semantic roles. Change one token, update the entire system.
--avila-primitive-color-hot-pink--avila-primitive-color-marigold--avila-primitive-color-cobalt--avila-primitive-color-teal--avila-primitive-color-ink-100--avila-primitive-color-parchmentBuilt from the
ground up.
AvilaDS wasn't born in a sprint planning session. It was built out of frustration — the kind that comes from watching pixel-perfect designs get lost in translation between Figma files and production code for over a decade.
After 10+ years leading design systems in fintech and iGaming, the pattern was always the same: design and code living in separate worlds, diverging slowly until the gap became a chasm. Tokens decided by gut feel. Documentation that trailed weeks behind. Components rebuilt from scratch on every new project.
The tokens, the pipeline, the documentation — every piece of AvilaDS was built with one intention: to close that gap permanently. One source of truth. Zero drift. Design and code, finally speaking the same language.
Michael Pico Jr.
Senior Product Designer & Design Systems Lead
A designer who codes, a builder who thinks in systems. With 10+ years shaping product experiences across fintech and iGaming, Michael brings the same precision to design systems that he brings to every pixel — accessible by default, documented end-to-end, and built to last.
A descendant of Pío Pico — the last Mexican Governor of Alta California — Michael carries that lineage of leadership and legacy into everything he builds.
View Portfolio →