витрина токеновЦвета
Имена приходят из packages/shared/src/theme.ts, значения — из сгенерированного tokens.css. Переключи тему: меняться должно всё сразу и кадром, без анимации полотна.
--bg--rail--surface--surface-2--surface-3--border--border-strong--text--text-muted--text-dim--solid--solid-fg--solid-hover--scrim--glass--glass-fg--shimmer--ph-ink--backdrop--backdrop-soft--pay-bg--pay-bg-hover--pay-fg--pay-edge--pay-insetТекст
Оба приглушённых уровня держат контраст ≥ 4.5:1 на своём фоне. Это нижняя граница, ниже не опускать.
Основной текст
--text
Вторичный текст
--text-muted
Метки и плейсхолдеры
--text-dim
Типографика
Латиница и цифры пока падают на системный шрифт — в эталон были вшиты только кириллические сабсеты. Видно на числах ниже.
Заголовок — Wix Madefor Display 800
Текст и интерфейс — Golos Text 400. Всё в одном месте: пишете задачу словами, модель подбираем сами.
Числа и метки — Inter 700 · 1 240 ₽ · ≈ 2 ₽
'Wix Madefor Display', system-ui, sans-serif
Скругления
Квадратные со скруглением, НЕ круглые пилюли.
8px10px14pxКнопки
Сплошная кнопка = инверсия темы: в тёмной белая с чёрным текстом, в светлой наоборот. Кнопка оплаты меняет фон, а не блик.
Тени
В светлой теме тени мягче и короче — там край панели держит обводка.
--shadow-pop--shadow-panel--shadow-modal--shadow-nav--shadow-drawer--shadow-knob--shadow-knob-on--pay-glow--pay-glow-hoverЗаглушки плиток
Только веб: это CSS-градиенты, в React Native понадобится expo-linear-gradient.