Atlas UI
A design system built from zero, single-handedly — 54 component sets, 533 variants, 226 tokens across 4 theme modes.
The problem
Plati Po Miru issues foreign payment cards for people cut off from global payments. The product runs on two surfaces — a PWA and a Telegram Mini App — and when I joined there was no design system. Components were built ad hoc, screens drifted out of sync, and every handoff cost time: developers had no single source for spacing, color, or radius, so they came back with questions on every screen.
The company was scaling and planning to hire a second designer. Without a system, onboarding that person — and keeping two platforms consistent — would only get more painful.
I’m the only product designer here. The design system was my initiative and my call, end to end: architecture, tokens, components, documentation, adoption.
The approach
I built Atlas as a three-tier token architecture so that meaning, not raw values, drives the UI.
Primitives — the raw material: six color scales generated through OKLCH interpolation for perceptually even steps (not the uneven jumps you get from naive HSL), plus spacing on a 4px base, radius, blur, and type scales.
Semantic — one collection with four modes: Standard light/dark and Premium light/dark. Because it’s a single collection, theme switches at the frame level — every nested component recolors automatically. That was the decision that made four themes maintainable by one person instead of quadrupling the work.
Layout — semantic aliases that bind spacing and radius to real contexts (screen padding, card radius, modal radius), so layout intent survives redesigns.
On top of this: 54 component sets, 533 variants across 13 categories — buttons with glass/blur variants, a full card system (previews, status overlays, transaction cards), atomic inputs, iOS-style navigation, data display, modals, feedback, even a 14-component email kit. The inventory matters only because it proves the system covers 100% of the product’s real surface — not a Dribbble subset.
Key decisions
Monochrome Premium, not gold. The obvious move for a premium tier is gold. I rejected it for two reasons: on the physical card, gold-foil stamping sits proud of the laminate and wears badly; in the digital product, gold reads cheap. Premium signals through restraint — I banned gold from the system entirely and expressed the tier through monochrome.
Solving “white on white.” An input field (#FFFFFF) on a card (#FFFFFF) disappears. Rather than adding borders everywhere, I introduced a surface/container token — a subtle gray step for elements inside white cards — and set a clear hierarchy: background → surface → surface/container. One token, solved system-wide.
One semantic collection over four. The maintainable path for four themes was a single semantic layer with modes, not four parallel color sets. This is what let one designer own four themes without the upkeep multiplying.
The outcome
Atlas is in production — I build every new screen on it today. It covers the full product across both platforms: 54 component sets, 533 variants, 226 tokens, 22 text styles, 4 themes, documented inside Figma and in a separate shadcn-style web reference, with a Getting Started guide so the next designer or developer can onboard without me in the loop.
The practical effect: screen assembly is visibly faster — I compose from tokens and components instead of rebuilding, and developers pull values straight from variables instead of asking. Consistency between the PWA and the Mini App stopped being something I police manually and became the default.
Built solo, in six weeks, alongside my product work.
Проблема
Плати по миру выпускает зарубежные платёжные карты для тех, кто отрезан от глобальных платежей. Продукт живёт на двух платформах — PWA и Telegram Mini App — и на момент старта дизайн-системы не было. Компоненты собирались ad hoc, экраны расходились между собой, и каждая передача в разработку стоила времени: у разработчиков не было единого источника отступов, цвета и радиусов, поэтому вопросы возникали на каждом экране.
Компания росла и планировала нанять второго дизайнера. Без системы онбординг этого человека — и удержание консистентности между двумя платформами — становились бы только больнее.
Я единственный продуктовый дизайнер в компании. Дизайн-система была моей инициативой и моей ответственностью от и до: архитектура, токены, компоненты, документация, внедрение.
Подход
Я построил Atlas как трёхуровневую архитектуру токенов, чтобы интерфейсом управляли смыслы, а не сырые значения.
Primitives — сырьё: шесть цветовых шкал, сгенерированных через OKLCH-интерполяцию для перцептуально равномерных переходов (без неравномерных скачков, которые даёт наивный HSL), плюс spacing на базе 4px, radius, blur и типографические шкалы.
Semantic — одна коллекция с четырьмя режимами: Standard light/dark и Premium light/dark. Поскольку коллекция одна, тема переключается на уровне фрейма — все вложенные компоненты перекрашиваются автоматически. Именно это решение сделало четыре темы поддерживаемыми одним человеком, а не увеличило работу вчетверо.
Layout — семантические алиасы, привязывающие spacing и radius к реальным контекстам (отступ экрана, радиус карточки, радиус модалки), чтобы замысел раскладки переживал редизайны.
Поверх этого: 54 component sets, 533 варианта в 13 категориях — кнопки с glass/blur-вариантами, полная карточная система (превью, оверлеи статусов, транзакционные карточки), атомарные поля ввода, навигация в стиле iOS, data display, модалки, feedback и даже email-кит из 14 компонентов. Инвентарь важен только тем, что доказывает: система покрывает 100% реальной поверхности продукта — а не подборку для Dribbble.
Ключевые решения
Монохром для Premium, не золото. Очевидный ход для премиум-линейки — золото. Я его отверг по двум причинам: на физической карте золотое тиснение выступает над ламинатом и быстро изнашивается; в digital-продукте золото выглядит дёшево. Premium сигналит через сдержанность — я полностью запретил золото в системе и выразил линейку через монохром.
Решение «белое на белом». Поле ввода (#FFFFFF) на карточке (#FFFFFF) не видно. Вместо того чтобы навешивать бордеры повсюду, я ввёл токен surface/container — тонкую серую ступень для элементов внутри белых карточек — и задал чёткую иерархию: background → surface → surface/container. Один токен решил проблему на уровне всей системы.
Одна semantic-коллекция вместо четырёх. Поддерживаемый путь для четырёх тем — один семантический слой с режимами, а не четыре параллельных набора цветов. Именно это позволило одному дизайнеру владеть четырьмя темами без умножения поддержки.
Результат
Atlas в проде — я собираю на нём каждый новый экран. Он покрывает весь продукт на обеих платформах: 54 component sets, 533 варианта, 226 токенов, 22 текстовых стиля, 4 темы, документация внутри Figma и отдельный веб-референс в стиле shadcn, плюс Getting Started гайд, чтобы следующий дизайнер или разработчик онбордился без меня.
Практический эффект: сборка экранов стала заметно быстрее — я собираю из токенов и компонентов, а не пересобираю заново, а разработчики берут значения прямо из variables, а не спрашивают. Консистентность между PWA и Mini App перестала быть тем, что я вручную контролирую, и стала дефолтом.
Собрано в соло, за шесть недель, параллельно с продуктовой работой.