'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Design with the pieces you ship
Color, type, space and icons as W3C design tokens, the guidelines behind them and a Figma kit made from the same source. What you draw is what gets built.
--alea-accent--alea-surface--alea-text--alea-text-muted--alea-border-strong--alea-status-success
Invoice paid
PaidThe same component, three themes, zero overrides.
In this section
Foundations and guidelines
- ColorsEight OKLCH scales from the Palette Generator, and the semantic tokens that change between dark and light.
- TypeCrimson Pro for titles, Inter for everything else, JetBrains Mono for code, on one size scale.
- Space and sizesA 4 px space scale, control heights, radii and shadows.
- IconsLucide icons at the kit sizes and stroke, through one Icon component you can point at another set.
- AccessibilityWhat every component does for keyboard, screen reader, contrast and motion, and what is still up to you.
- Figma kitThe same tokens as Figma variables in Dark and Light, and components with the same props.
Principles
What every decision comes back to
Accessible first
Contrast, focus, targets and motion are decided in the tokens, so every screen starts from accessible defaults.
Tokens all the way
Primitives feed base tokens, base feeds semantic. Components only read semantic tokens, so a theme is one file.
Calm surfaces
Quiet backgrounds and warm accents. Color is for meaning and for the one action that matters.
Motion with meaning
Every animation says what changed. Nothing moves just to move, and nothing travels with reduced motion.
Contrast
Check any pair, in both themes
Pick a text token and a surface. The ratio is measured from the real colors, so you see what ships in dark and in light.
color: var(--alea-text-muted); background: var(--alea-surface);How tokens flow
Three layers, one direction
Change a primitive and every theme follows. Change a semantic token and only its meaning changes. Components never skip a layer.
- 1PrimitivesRaw scales
--alea-purple-500 - 2BaseType, space, radius, motion
--alea-space-4 - 3SemanticMeaning, per theme
--alea-accent
Make it yours
Your brand, from three choices
Pick an accent, a radius and a density. brandVariables turns them into the tokens, and every component follows.
--alea-radius-xs--alea-radius-sm--alea-radius-field--alea-radius-md--alea-radius-lg--alea-radius-xlCheckout
Ana Rivas · Team plan
Seats used
8 of 10
By paying you agree to the terms.
Questions