Три слоя токенов: tokens.css — примитивы (палитра, шрифты, радиусы, движение), themes.css — семантика тем (--text-muted, --surface-card, --accent…), board-skins.css — скины доски. Компоненты используют только семантические токены, поэтому тема переключается атрибутом data-theme — на всём сайте или на любом поддереве.
Темы рядом
Одни и те же компоненты внутри data-theme="dark" и data-theme="light".
Тёмная
ИдётРегистрацияСкороЗавершён
Весенний Кубок 2026
Nardgammon League · Олимпийская
Светлая
ИдётРегистрацияСкороЗавершён
Весенний Кубок 2026
Nardgammon League · Олимпийская
Цвета
Семантические токены текущей темы.
Фон и поверхности
--bg-page
--surface-card
--surface-card-elevated
--surface-panel
--surface-subtle
--surface-sunken
--surface-header
--surface-sidebar
Текст
Аа
--text-strong
Аа
--text-primary
Аа
--text-secondary
Аа
--text-tertiary
Аа
--text-muted
Аа
--text-faint
Аа
--text-ghost
Акцент
--accent
--accent-text
--accent-muted
--accent-soft
--accent-soft-strong
--accent-border
--accent-fill
Статусы
--success
--success-soft
--danger
--danger-soft
--info
--info-soft
--warning
Границы
--border-subtle
--border-default
--border-strong
Медали
--medal-gold
--medal-silver
--medal-bronze
Типографика
IBM Plex Sans — заголовки и цифры (--font-display), Manrope — текст (--font-body).
display · 54 / 700Лига нард
display · 26 / 700Рейтинг лиги
display · 16 / 700Весенний Кубок 2026
body · 13 · secondaryИграйте онлайн и следите за матчами в прямом эфире.
body · 11 · capsПризовой фонд
Кнопки
<Button variant size> — с href становится ссылкой.
Метки и статусы
ИдётРегистрацияСкороЗавершёнЗаписьFeaturedВы🏆 3 победы
ОлимпийскаяКлассика 1:30до 7 очков▲ 12▼ 8+4-2
Фильтры и поиск
Поверхности
Card
--surface-card · interactive
Card featured
золотая рамка и кольцо
Card elevated
--surface-card-elevated
Прогресс, аватары, логотип
О
B
A
О
NARDGAMMON
league
NARDGAMMON
league
Скин доски
Независим от темы сайта. Задаётся data-board-skin на <html> или на обёртке доски; токены --nb-*.