Дизайн-система для финтех-продукта: семантические токены, типографика и библиотека компонентов с вариантами и состояниями — то, что держит интерфейс консистентным на всех экранах.A design system for a fintech product: semantic tokens, typography and a component library with variants and states — what keeps the interface consistent across every screen.
Alloca Design System — единый язык продуктаAlloca Design System — one product language
Цвет как смысловые токены, а не сырой hexColor as meaningful tokens, not raw hex
Палитра разложена на семантические токены в стиле $camelCase и сгруппирована по назначению — бренд, поверхности, текст, обводки, нейтральные и статусы. В макетах используются токены, а не конкретные значения.The palette is broken into semantic $camelCase tokens, grouped by purpose — brand, surfaces, text, strokes, neutrals and statuses. Designs reference tokens, not raw values.
Чёткая шкала: дисплей, заголовки, текстA clear scale: display, headings, body
Четыре текстовых стиля задают иерархию: выразительный дисплейный заголовок, секционные заголовки и читаемый основной текст. Размеры и интерлиньяж зафиксированы как стили.Four text styles set the hierarchy: an expressive display heading, section headings and readable body text. Sizes and line-heights are fixed as styles.
Библиотека с вариантами и состояниямиA library with variants and states
Каждый компонент собран с вариантами и состояниями и понятными правилами применения — например, кнопки: три стиля по приоритету действия.Every component is built with variants, states and clear usage rules — buttons, for instance: three styles by action priority.
Пример: компонент «Кнопки» — матрица стилей (Fill · Outline · Text) × состояний (Default · Hover · Disabled) с правилами.Example: the “Buttons” component — a matrix of styles (Fill · Outline · Text) × states (Default · Hover · Disabled) with rules.
Что даёт системаWhat the system gives
- Семантические токены ($camelCase) — меняем значение в одном месте, обновляется весь продукт.Semantic tokens ($camelCase) — change a value in one place and the whole product updates.
- Компоненты с вариантами и состояниями — консистентность на всех экранах и быстрая сборка макетов.Components with variants and states — consistency on every screen and fast mockup assembly.
- Понятные правила применения — один стиль действия на экран, предсказуемая иерархия.Clear usage rules — one action style per screen, a predictable hierarchy.
- Масштабируемость — палитра и шкала легко расширяются под новые модули.Scalability — the palette and scale extend easily for new modules.