Design System v4 · Tokens
env: prod
Skin club — палитра theme-club.
Тёплый бежевый surface, deep yellow primary, brown secondary.
Pages
Все страницы UI Kit сгруппированы. Внутри каждой группы пункты идут по алфавиту.
Base
Forms
Game
Layout
Showcase
Colors
Бренд + поверхности + текст + границы + семантика. Тёмная тема переопределяет surface/text/border/shadow через .dark.
--color-primary
--color-secondary
--color-surface
--color-surface-elevated
--color-text-base
--color-text-muted
--color-border
--color-success
--color-warning
--color-danger
--color-info
Typography
30px / 36 — heading 1
Турниры начинаются скоро
24px / 32 — heading 2
Популярные игры
20px / 28 — heading 3
Лига Чемпионов
16px / 24 — body
Обычный текст параграфа. Съешь ещё этих мягких французских булок.
14px / 20 — small
Вспомогательный текст, метаданные, подписи.
12px / 16 — caption
CAPTION · TIMESTAMP · LABEL
Spacing
Шаг 4px.
--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
20px
--space-6
24px
--space-8
32px
--space-10
40px
--space-12
48px
--space-16
64px
--space-20
80px
--space-24
96px
Radius
Базовые + семантические (radius-card, radius-button). Skin может менять.
--radius-sm
--radius-md
--radius-lg
--radius-xl
--radius-full
--radius-card
--radius-button
--radius-input
--radius-badge
Shadow
--shadow-sm
--shadow-md
--shadow-lg
Motion + Z-index
--duration-fast
120ms
--duration-base
200ms
--duration-slow
320ms
--z-dropdown
10
--z-sticky
20
--z-modal
50
--z-tooltip
60