Card title
background = {bg.default},
padding = {dimension.md},
radius = {borderRadius.lg}.
DESIGN TOKENS / V1
Token Test Bench
Изолированный визуальный тест Tokens-Studio (DTCG) пайплайна.
Все значения тянутся из tokens.generated.css
через var(--token-name). Переключатель ниже
добавляет data-theme="dark" на корень страницы.
BRAND Brand Red ramp
Фирменная палитра Recca — core.json → colors.brandRed.
500 — канонический brand red #FF1F1C (тот же,
что блок «01 / RED» в demo-orange).
100
var(--colors-brand-red-100)
200
var(--colors-brand-red-200)
300
var(--colors-brand-red-300)
400
var(--colors-brand-red-400)
500
var(--colors-brand-red-500)
600
var(--colors-brand-red-600)
700
var(--colors-brand-red-700)
800
var(--colors-brand-red-800)
900
var(--colors-brand-red-900)
Semantic accents
accent.default (indigo) и новый
accent.secondary (brand orange) рядом — оба
переключаются между светлой и тёмной темой через семантический
слой.
accent.default onAccent
accent.bg
accent.secondary onSecondary
accent.secondaryBg
accent.secondaryEmphasis
Button — primary vs secondary
Бэкенд theme.button.primary /
theme.button.secondary резолвят
accent.default и accent.secondary.
Border-radius и border-width — общие через
theme.button.borderRadius/borderWidth.
Card primitive
Карточка построена на theme.card.{background,
borderRadius, padding}. Тень — из
theme.boxShadow.default (drop+inner shadow,
composite token).
Card with shadow
box-shadow токен (composite, drop+inner).
Typography scale (×1.25)
body = 16px, шкала h6..h1 через
roundTo(body * 1.25^n).
-
Recca — обмен клиентами через партнёрскую сеть
--font-sizes-xs -
Recca — обмен клиентами через партнёрскую сеть
--font-sizes-sm -
Recca — обмен клиентами через партнёрскую сеть
--font-sizes-body -
Recca — обмен клиентами через партнёрскую сеть
--font-sizes-h6 -
Recca — обмен клиентами через партнёрскую сеть
--font-sizes-h5 -
Recca — обмен клиентами через партнёрскую сеть
--font-sizes-h4 -
Recca — обмен клиентами через партнёрскую сеть
--font-sizes-h3 -
Recca — обмен клиентами через партнёрскую сеть
--font-sizes-h2 -
Recca — обмен клиентами через партнёрскую сеть
--font-sizes-h1
Spacing scale
dimension.xs = 4, далее ×scale (=2):
4 → 8 → 16 → 32 → 64.
-
--spacing-xs -
--spacing-sm -
--spacing-md -
--spacing-lg -
--spacing-xl
Border radius scale
sm = 4, lg = 8, xl = 16. card и button
используют lg.
-
--border-radius-sm -
--border-radius-lg -
--border-radius-xl