Дизайн-токены: что это, зачем нужны и как использовать в CSS, Tailwind и JSON

Дизайн-токены — это фундамент любой серьёзной дизайн-системы. Они позволяют хранить все визуальные решения в одном месте и автоматически синхронизировать их между Figma, CSS, React и мобильными приложениями.

Что такое дизайн-токены

Дизайн-токен — это именованная переменная, которая хранит конкретное визуальное значение: цвет, отступ, размер шрифта, радиус скругления или тень. Вместо того чтобы писать #1a73e8 в каждом компоненте, вы используете токен color-primary, а его значение задаётся в одном месте.

Примеры токенов:

Токен	Значение	Применение
color-primary	#1a73e8	Кнопки, ссылки
spacing-md	16px	Отступы между элементами
font-size-base	16px	Базовый размер текста
border-radius-card	8px	Скругление карточек
shadow-elevation-1	0 2px 4px rgba(0,0,0,0.1)	Тени карточек

Зачем нужны дизайн-токены

Единый источник правды. Все цвета, размеры и отступы хранятся в одном файле. При изменении брендового цвета вы правите одну строку, а не сотни мест в коде.

Синхронизация с дизайном. Токены экспортируются из Figma и импортируются в код — дизайнер и разработчик работают с одними значениями.

Поддержка тем. Тёмная тема, кастомизация для клиентов, сезонные изменения — всё реализуется переопределением токенов без правки компонентов.

Масштабирование. В большой команде токены устраняют споры о том, какой оттенок серого «правильный».

CSS Custom Properties

Самый прямолинейный способ реализовать токены — CSS-переменные (custom properties):

:root {
  /* Цвета */
  --color-primary: #1a73e8;
  --color-primary-hover: #1557b0;
  --color-secondary: #34a853;
  --color-danger: #ea4335;
  --color-text: #202124;
  --color-text-muted: #5f6368;
  --color-bg: #ffffff;
  --color-bg-surface: #f8f9fa;

  /* Отступы */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;

  /* Типографика */
  --font-size-sm: 14px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;

  /* Радиусы */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

Тёмная тема переопределяет только нужные токены:

[data-theme="dark"] {
  --color-text: #e8eaed;
  --color-bg: #202124;
  --color-bg-surface: #303134;
}

Tailwind Config

В Tailwind дизайн-токены задаются через tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: '#1a73e8',
          hover: '#1557b0',
          light: '#e8f0fe',
        },
        secondary: '#34a853',
        danger: '#ea4335',
      },
      spacing: {
        xs: '4px',
        sm: '8px',
        md: '16px',
        lg: '24px',
        xl: '32px',
      },
      borderRadius: {
        card: '8px',
        button: '4px',
      },
      fontSize: {
        body: ['16px', { lineHeight: '1.5' }],
        heading: ['32px', { lineHeight: '1.2', fontWeight: '700' }],
      },
    },
  },
}

После этого в компонентах используются семантические имена: bg-primary, text-danger, rounded-card — вместо магических bg-blue-600.

JSON-формат токенов

Стандарт W3C Design Tokens предлагает JSON-структуру для обмена токенами между инструментами:

{
  "color": {
    "primary": {
      "$value": "#1a73e8",
      "$type": "color",
      "$description": "Основной акцентный цвет бренда"
    },
    "text": {
      "default": { "$value": "#202124", "$type": "color" },
      "muted": { "$value": "#5f6368", "$type": "color" }
    }
  },
  "spacing": {
    "md": { "$value": "16px", "$type": "dimension" },
    "lg": { "$value": "24px", "$type": "dimension" }
  }
}

Из этого JSON инструменты вроде Style Dictionary генерируют CSS, SCSS, JS-константы и Swift-переменные одновременно.

Именование токенов

Хорошая схема именования: {категория}-{роль}-{состояние}.

• color-primary — базовый
• color-primary-hover — при наведении
• color-primary-disabled — неактивный
• spacing-component-gap — отступ между компонентами

Избегайте имён, привязанных к значению: color-blue-500 плохо, color-brand-cta хорошо.

Инструмент на reChecker

Генератор дизайн-токенов на reChecker создаёт CSS custom properties, Tailwind config и JSON из единой палитры. Задайте цвета, отступы и шрифты — получите готовые файлы для вашего проекта.

Открыть инструмент на reChecker →