Design systems, tokens die naar productie opleveren, variants waar engineers naar grijpen.
De meeste design systems sterven aan de Figma → code-grens. Wij bouwen het system in beide richtingen tegelijk: Figma-library met juiste variants en tokens, een Tailwind-config die ze mirrort, en Storybook-stories die de engineering-vorm documenteren. Het system is echt als het softwareteam het oppakt zonder te vragen.
Wat we bouwen
Tokens, geen hex-codes
Color, spacing, type, radius, shadow, allemaal gedefinieerd als tokens in Tokens Studio, geëxporteerd naar zowel de Figma-library als de Tailwind-config. Een token-change update Figma en de productie-CSS in dezelfde PR.
Variants voor elke echte state
Buttons zijn niet 'primary' en 'secondary', ze zijn primary/secondary × default/hover/active/disabled/loading, plus inverse op donkere oppervlakken. De variants bestaan in Figma zoals ze in de codebase bestaan, zodat handoff één-op-één is.
Storybook als het engineering-contract
Elke component leeft in Storybook met zijn variant-matrix, ARIA-noten en voorbeeld-usages. Engineers die de codebase lezen, refereren Storybook, niet Figma. Visuele regressies worden door Chromatic gevangen voor ze prod raken.
Toegankelijkheid ingebouwd in de variants
Focus rings, contrast-ratio's, hit areas en aria-* requirements zijn deel van de variant-definitie, geen audit aan het eind. De token-tabel bevat 'minimum touch target' en 'minimum contrast voor foreground op dit oppervlak'.
Motion is deel van het system
Easing curves, duration scales en de shadow-lanes die animeren zijn getokeniseerd naast de visuele. Een 'lift on hover' is één named token, op dezelfde manier in elke component gebruikt, exposed via de Tailwind-config.
Documentatie die engineers ook openen
Component-docs dekken wanneer te gebruiken, wanneer niet, en welke variant voor welke taak. Decision-pagina's leggen de trade-offs uit, waarom deze kleur, waarom deze radius. Het system is geen onderdelen-catalogus; het is een argument dat het team kan gebruiken.
Waar dit past
Je product heeft genoeg features opgeleverd dat hetzelfde probleem op drie verschillende manieren in drie verschillende schermen wordt opgelost.
Design handt Figma af en engineering bouwt iets dat bijna matcht; het system zou die gap dichten.
Je schaalt het team op en een design system is de enige manier om het oppervlak coherent te houden zonder dat een designer elke PR reviewt.
Tech stack
- Figma
- Tokens Studio
- Tailwind
- Storybook
- Variants
Wil je dit voor je team?
30 minuten met een oprichter of ervaren ontwikkelaar. We bepalen wat je nodig hebt en zeggen je eerlijk of Stacklane past.
Plan een gesprekVerwante capabilities