Atlas UI — a fintech design system, built solo in 6 weeks
A design system built from zero, single-handedly — 54 component sets, 533 variants, 226 tokens across 4 theme modes.
When I joined, there was no system. Components were built ad hoc, screens drifted, and every handoff cost time. I built Atlas from scratch — architecture, tokens, components, docs — and today every new screen ships on it.
I built one semantic layer with four modes, so one person could own four themes.
Standard and Premium, light and dark — switched at the frame level. Every nested component recolors automatically. Four themes without four times the upkeep.
I structured everything as three-tier tokens, so meaning drives the UI, not raw values.
Primitives → semantic → layout. Color scales built on OKLCH for even steps; spacing, radius and type on a strict scale. Developers pull values straight from variables instead of asking.
I covered 100% of the product, so the system replaces guesswork, not just decorates.
54 component sets, 533 variants, 226 tokens, 22 text styles — cards, inputs, navigation, feedback, even a 14-component email kit. Documented inside Figma and in a separate web reference, with a Getting Started guide so the next hire onboards without me.
The result
A production design system covering both product platforms, built solo in six weeks alongside my product work. Screen assembly is visibly faster, and consistency became the default instead of something I police by hand.
Когда я пришёл, системы не было. Компоненты собирались ad hoc, экраны расходились, каждая передача в разработку стоила времени. Я собрал Atlas с нуля — архитектура, токены, компоненты, документация — и сегодня каждый новый экран выходит на ней.
Сделал один semantic-слой с четырьмя режимами, чтобы один человек мог тянуть четыре темы.
Standard и Premium, светлая и тёмная — переключаются на уровне фрейма. Все вложенные компоненты перекрашиваются сами. Четыре темы без учетверённой поддержки.
Выстроил всё как трёхуровневые токены, чтобы интерфейсом управляли смыслы, а не сырые значения.
Primitives → semantic → layout. Цветовые шкалы на OKLCH для равномерных переходов; spacing, radius и типографика на строгой шкале. Разработчики берут значения прямо из variables, а не спрашивают.
Покрыл 100% продукта, чтобы система заменяла угадайку, а не украшала.
54 component sets, 533 варианта, 226 токенов, 22 текст-стиля — карты, поля, навигация, feedback, даже email-кит из 14 компонентов. Документация внутри Figma и отдельный веб-референс, плюс Getting Started, чтобы следующий дизайнер онбордился без меня.
Результат
Production-система на обеих платформах продукта, собранная в соло за шесть недель параллельно с продуктовой работой. Сборка экранов заметно быстрее, а консистентность стала дефолтом, а не тем, что я контролирую руками.