An independent design system, from Figma variables to React components.
For whom
Teams designing and building web products
Scope
Design System · Ávila and Base · Light and dark
Tools
Design tokens / React components / Storybook
The idea
KeepFigmaandcodespeakingthesamelanguage.
Ávila is my own design system. I built it to align Figma variables and component properties with their React implementations. The library supports four themes and is documented in Storybook, where I can review the components in action.
Screenshots are taken from the system's Storybook, using sample data.
Primitives
Definethefoundationalvalues.
I organized eight color ramps alongside spacing, radius, blur, stroke, and typography scales in a primitive layer. Components use the semantic layer.
Valle
2550100200300400500600700800900950
Blue
2550100200300400500600700800900950
Neutral
White50100200300400500600700800900Black
Green
2550100200300400500600700800900950
Yellow
2550100200300400500600700800900950
Orange
2550100200300400500600700800900950
Red
2550100200300400500600700800900950
Purple
2550100200300400500600700800900950
193
primitive tokens
153
semantic tokens
4
themes: two brands, light and dark
Semantic roles
Giveeverytokenapurpose.
I defined roles whose names stay consistent across four themes. Primary maps to Valle in Ávila and Blue in Base; dark mode also adjusts the surface hierarchy.
Avila
Team projects
The status of every initiative, all in one place.
InfoSuccessWarningDanger
View project
Primary
Valle 600
Canvas
Neutral 100
Avila Dark
Team projects
The status of every initiative, all in one place.
InfoSuccessWarningDanger
View project
Primary
Valle 300
Canvas
Neutral 900
Base
Team projects
The status of every initiative, all in one place.
InfoSuccessWarningDanger
View project
Primary
Blue 600
Canvas
Slate 100
Base Dark
Team projects
The status of every initiative, all in one place.
InfoSuccessWarningDanger
View project
Primary
Blue 300
Canvas
Slate 900
Spacing
Namethespacingscale.
I organized fourteen steps with usage-oriented names, such as Medium for 12 px. Samples appear at actual size against a 128 px guide.
TokenValorMuestraUtilidad
Zero0 pxgap-zero
Micro1 pxgap-micro
Tiny2 pxgap-tiny
Extra Small4 pxgap-extra-small
Compact6 pxgap-compact
Small8 pxgap-small
Medium12 pxgap-medium
TokenValorMuestraUtilidad
Base16 pxgap-base
Large24 pxgap-large
Extra Large32 pxgap-extra-large
Huge48 pxgap-huge
Extra Huge64 pxgap-extra-huge
Hero96 pxgap-hero
Giant128 pxgap-giant
Radius and elevation
Definecornerradiiandelevation.
I created seven radius levels from None to Full, plus six shadows with specific offsets, blurs, and spreads to distinguish surfaces.
I used Poppins for Display, Headline, Body, and UI roles, with defined sizes, line heights, and weights for each style.
Display
Ávila
Hero96 / 115 px · 400 · 500 · 600
Ávila
Large72 / 86 px · 400 · 500 · 600
Ávila
Small48 / 58 px · 400 · 500 · 600
Headline
Ávila Design System
H136 / 43 px · 400 · 500 · 600
Ávila Design System
H224 / 28 px · 400 · 500 · 600
Ávila Design System
H320 / 26 px · 400 · 500 · 600
Body
Ávila Design System
Base16 / 20 px · 400 · 500 · 600
Ávila Design System
Small14 / 16 px · 400 · 500 · 600
Ávila Design System
Caption12 / 14 px · 400 · 500 · 600
UI
AV
Avatar L24 / 20 px · 700
AV
Avatar M20 / 20 px · 700
AV
Avatar S16 / 20 px · 700
Ávila Design System
Micro8 / 14 px · 400
Documentation
Documentworkingcomponents.
I documented usage, accessibility, implementation, and resources in Storybook, including links to Figma nodes. Documentation responds to the active theme.
Guides
Giveeverydisciplineastartingpoint.
I wrote getting-started guides for design, engineering, and content, alongside foundational concepts and token references.
Patterns
Testcomponentstogether.
I built screen patterns with navigation, search, filters, and metrics to review how components work together. Appearance changes are driven by tokens.
Themes
Combinethemesononescreen.
I implemented theme boundaries with data-brand and data-appearance. A card can use Base inside an Ávila page and have a different appearance mode.
Home
Bringthesystemintoarealproductview.
I created a workspace home with metrics, search, projects, favorites, and activity to test the system in a product context.
Implementation
HowIbuiltit.
Tokens sourced from Figma
I used a DTCG snapshot of Figma variables to generate CSS and Tailwind utilities. Components consume semantic tokens, and an automated check catches differences between the snapshot and the code.
Attribute-based themes
I implemented theme boundaries with data-brand and data-appearance. Elements inherit both attributes, and boundaries can be nested to combine brands on a single screen.
Documentation in Storybook
I documented each component in Storybook with usage, accessibility, implementation guidance, and resources, plus a link to the corresponding Figma node.
