Тема

Раздел 1: Основы дизайн-системы ​

Основы дизайн-системы ADOLF ​

Версия: 1.1 Дата: Февраль 2026

Обзор ​

Раздел описывает фундаментальные элементы дизайн-системы: цветовую модель, типографику, пространственную сетку и механизм тематизации. Все значения определены как CSS custom properties в файле shadcn-variables.css и продублированы в shadcn-tokens.json для программного доступа.

Цветовая модель OKLCH ​

Дизайн-система использует цветовое пространство OKLCH (CSS Color Level 4) вместо HEX/HSL.

Почему OKLCH ​

СвойствоHSLOKLCH
Перцептуальная равномерностьНет — hsl(120, 100%, 50%) и hsl(240, 100%, 50%) визуально различаются по яркостиДа — одинаковый L даёт одинаковую воспринимаемую яркость
Генерация оттенковНепредсказуемые результаты при изменении L/SПредсказуемые -light и -dark варианты при изменении L и C
Поддержка wide-gamutОграничен sRGBПоддерживает P3 и Rec.2020
Интерполяция анимацийНеравномерные переходыПлавные перцептуально-линейные переходы

Структура значения OKLCH ​

oklch(L C H)
       │ │ │
       │ │ └── Hue (оттенок): 0–360°
       │ └──── Chroma (насыщенность): 0–0.4
       └────── Lightness (яркость): 0–1

Пример: oklch(0.623 0.214 259.815) — синий цвет с яркостью 62.3%, насыщенностью 0.214 и оттенком 259.8°.

Принцип генерации вариантов ​

OKLCH позволяет предсказуемо генерировать -light варианты любого цвета, изменяя только L и C:

css
/* Основной: полная насыщенность */
--info: oklch(0.623 0.214 259.815);

/* Light: L → 0.95, C → 0.04, H — сохраняется */
--info-light: oklch(0.95 0.04 259.815);

В тёмной теме -light варианты инвертируются:

css
/* Dark mode: L → 0.3, C → 0.06, H — сохраняется */
--info-light: oklch(0.3 0.06 259.815);

Базовые цвета ​

Базовые цвета наследуются из стандартной палитры shadcn/ui (base color: Neutral). Они не зависят от модулей и применяются ко всем элементам интерфейса.

Светлая тема (:root) ​

ПеременнаяOKLCHHEXНазначение
--backgroundoklch(1 0 0)#FFFFFFФон страницы
--foregroundoklch(0.145 0 0)#171717Основной текст
--cardoklch(1 0 0)#FFFFFFФон карточек
--card-foregroundoklch(0.145 0 0)#171717Текст в карточках
--popoveroklch(1 0 0)#FFFFFFФон всплывающих элементов
--popover-foregroundoklch(0.145 0 0)#171717Текст всплывающих элементов
--primaryoklch(0.205 0 0)#262626Основной акцент (кнопки, ссылки)
--primary-foregroundoklch(0.985 0 0)#FAFAFAТекст на primary-фоне
--secondaryoklch(0.97 0 0)#F5F5F5Вторичный фон
--secondary-foregroundoklch(0.205 0 0)#262626Текст на secondary-фоне
--mutedoklch(0.97 0 0)#F5F5F5Приглушённый фон
--muted-foregroundoklch(0.556 0 0)#737373Вспомогательный текст
--accentoklch(0.97 0 0)#F5F5F5Акцентный фон (hover)
--accent-foregroundoklch(0.205 0 0)#262626Текст на accent-фоне
--destructiveoklch(0.577 0.245 27.325)#EF4444Деструктивные действия
--destructive-foregroundoklch(0.985 0 0)#FAFAFAТекст на destructive-фоне
--borderoklch(0.922 0 0)#E5E5E5Границы элементов
--inputoklch(0.922 0 0)#E5E5E5Границы полей ввода
--ringoklch(0.708 0 0)#A3A3A3Кольцо фокуса

Тёмная тема (.dark) ​

ПеременнаяOKLCHHEXИзменение
--backgroundoklch(0.145 0 0)#171717Инвертирован
--foregroundoklch(0.985 0 0)#FAFAFAИнвертирован
--cardoklch(0.205 0 0)#262626Темнее фона
--primaryoklch(0.922 0 0)#E5E5E5Инвертирован
--primary-foregroundoklch(0.205 0 0)#262626Инвертирован
--secondaryoklch(0.269 0 0)#404040Инвертирован
--mutedoklch(0.269 0 0)#404040Инвертирован
--muted-foregroundoklch(0.708 0 0)#A3A3A3Ярче для читаемости
--accentoklch(0.371 0 0)#525252Инвертирован
--destructiveoklch(0.704 0.191 22.216)#F87171Ярче для контраста
--borderoklch(1 0 0 / 10%)rgba(255,255,255,0.1)Полупрозрачный
--inputoklch(1 0 0 / 15%)rgba(255,255,255,0.15)Полупрозрачный

Переключение темы ​

Тёмная тема активируется CSS-классом .dark на элементе <html>:

html
<!-- Светлая тема (по умолчанию) -->
<html lang="ru">

<!-- Тёмная тема -->
<html lang="ru" class="dark">

Все CSS-переменные автоматически переопределяются. Дополнительных действий от компонентов не требуется.

Семантические цвета ​

Используются для обратной связи с пользователем: уведомления, валидация, статусы.

ПеременнаяOKLCHHEXНазначение
--successoklch(0.723 0.191 142.495)#22C55EУспех, подтверждение
--success-foregroundoklch(0.985 0 0)#FAFAFAТекст на success-фоне
--warningoklch(0.84 0.16 84)#EAB308Предупреждение
--warning-foregroundoklch(0.28 0.07 46)#422006Текст на warning-фоне
--infooklch(0.623 0.214 259.815)#3B82F6Информация
--info-foregroundoklch(0.985 0 0)#FAFAFAТекст на info-фоне
--destructiveoklch(0.577 0.245 27.325)#EF4444Ошибка, удаление

Тёмная тема — семантические цвета ​

ПеременнаяСветлаяТёмнаяПримечание
--successoklch(0.723 0.191 142.495)oklch(0.696 0.17 162.48)Hue сдвинут для контраста
--warningoklch(0.84 0.16 84)oklch(0.41 0.11 46)L снижен
--infooklch(0.623 0.214 259.815)oklch(0.488 0.243 264.376)L снижен, C увеличен

Цвета графиков ​

Палитра для визуализации данных в компонентах Chart (Recharts, Chart.js).

ПеременнаяСветлая темаТёмная тема
--chart-1oklch(0.646 0.222 41.116)oklch(0.488 0.243 264.376)
--chart-2oklch(0.6 0.118 184.704)oklch(0.696 0.17 162.48)
--chart-3oklch(0.398 0.07 227.392)oklch(0.769 0.188 70.08)
--chart-4oklch(0.828 0.189 84.429)oklch(0.627 0.265 303.9)
--chart-5oklch(0.769 0.188 70.08)oklch(0.645 0.246 16.439)

Переменные для боковой панели навигации (компонент Sidebar из shadcn/ui).

ПеременнаяСветлаяТёмная
--sidebaroklch(0.985 0 0)oklch(0.205 0 0)
--sidebar-foregroundoklch(0.145 0 0)oklch(0.985 0 0)
--sidebar-primaryoklch(0.205 0 0)oklch(0.488 0.243 264.376)
--sidebar-primary-foregroundoklch(0.985 0 0)oklch(0.985 0 0)
--sidebar-accentoklch(0.97 0 0)oklch(0.269 0 0)
--sidebar-accent-foregroundoklch(0.205 0 0)oklch(0.985 0 0)
--sidebar-borderoklch(0.922 0 0)oklch(1 0 0 / 10%)
--sidebar-ringoklch(0.708 0 0)oklch(0.439 0 0)

Типографика ​

Шрифтовые стеки ​

css
/* Основной текст */
--font-sans: ui-sans-serif, system-ui, sans-serif,
             "Apple Color Emoji", "Segoe UI Emoji",
             "Segoe UI Symbol", "Noto Color Emoji";

/* Код и моноширинный текст */
--font-mono: ui-monospace, SFMono-Regular, "SF Mono",
             Menlo, Consolas, "Liberation Mono", monospace;

Система использует системные шрифты ОС — никаких внешних загрузок. Это обеспечивает минимальное время рендера и нативный вид на каждой платформе.

Размеры текста ​

ПеременнаяrempxTailwindПрименение
--text-xs0.75rem12pxtext-xsМетки, подписи, timestamps
--text-sm0.875rem14pxtext-smВспомогательный текст, описания
--text-base1rem16pxtext-baseОсновной текст (body)
--text-lg1.125rem18pxtext-lgПодзаголовки, акценты
--text-xl1.25rem20pxtext-xlЗаголовки карточек
--text-2xl1.5rem24pxtext-2xlЗаголовки секций
--text-3xl1.875rem30pxtext-3xlЗаголовки страниц
--text-4xl2.25rem36pxtext-4xlКрупные заголовки, hero

Межстрочный интервал ​

ПеременнаяЗначениеTailwindПрименение
--leading-none1leading-noneЗаголовки в одну строку
--leading-tight1.25leading-tightКомпактные заголовки
--leading-snug1.375leading-snugПодзаголовки
--leading-normal1.5leading-normalОсновной текст (по умолчанию)
--leading-relaxed1.625leading-relaxedДлинные тексты, описания

Начертания ​

ПеременнаяЗначениеTailwindПрименение
--font-normal400font-normalОсновной текст
--font-medium500font-mediumКнопки, метки полей
--font-semibold600font-semiboldЗаголовки карточек, подзаголовки
--font-bold700font-boldЗаголовки страниц, акценты

Пространственная сетка ​

Отступы (spacing) ​

Система отступов кратна 4px (0.25rem). Используется для padding, margin, gap.

ПеременнаяrempxTailwindПрименение
--spacing-000p-0Сброс
--spacing-10.25rem4pxp-1Минимальные внутренние отступы
--spacing-20.5rem8pxp-2Между inline-элементами
--spacing-30.75rem12pxp-3Внутри компактных карточек
--spacing-41rem16pxp-4Стандартный padding карточек
--spacing-51.25rem20pxp-5Расширенный padding
--spacing-61.5rem24pxp-6Между секциями внутри карточки
--spacing-82rem32pxp-8Между карточками
--spacing-102.5rem40pxp-10Между группами элементов
--spacing-123rem48pxp-12Между секциями страницы
--spacing-164rem64pxp-16Крупные внешние отступы

Скругления (border-radius) ​

ПеременнаяФормулаЗначениеTailwindПрименение
--radius—0.625rem (10px)—Базовое значение
--radius-sm--radius - 4px6pxrounded-smЧипы, бейджи, маленькие кнопки
--radius-md--radius - 2px8pxrounded-mdИнпуты, кнопки
--radius-lg--radius10pxrounded-lgКарточки, диалоги
--radius-xl--radius + 4px14pxrounded-xlМодальные окна, большие карточки
--radius-full—9999pxrounded-fullАватары, круглые кнопки

Тени ​

ПеременнаяЗначениеПрименение
--shadow-sm0 1px 2px 0 rgb(0 0 0 / 0.05)Кнопки, инпуты
--shadow0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)Карточки, выпадающие списки
--shadow-md0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)Popover, hover-эффекты
--shadow-lg0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)Модальные окна, диалоги

Анимации и переходы ​

ПеременнаяЗначениеПрименение
--transition-fast150msHover-эффекты, смена цвета
--transition-normal200msПоявление/скрытие элементов
--transition-slow300msРаскрытие аккордеонов, модальные окна
--ease-in-outcubic-bezier(0.4, 0, 0.2, 1)Стандартная кривая анимации

Пример использования:

css
.button {
  transition: background-color var(--transition-fast) var(--ease-in-out),
              box-shadow var(--transition-fast) var(--ease-in-out);
}

Высоты контролов ​

Стандартные высоты интерактивных элементов обеспечивают единообразие кнопок, инпутов и селектов.

ПеременнаяЗначениеpxПрименение
--control-sm2rem32pxКомпактные кнопки, фильтры
--control-md2.5rem40pxСтандартные кнопки и инпуты
--control-lg3rem48pxКрупные кнопки, primary actions

Базовые стили ​

Файл shadcn-variables.css включает минимальный набор глобальных стилей:

css
/* Все border наследуют цвет --border */
*,
*::before,
*::after {
  border-color: var(--border);
}

/* Body наследует фон, текст и шрифт из переменных */
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

Design Tokens (JSON) ​

Для программного доступа к значениям дизайн-системы используется файл shadcn-tokens.json. Формат совместим с инструментами вроде Style Dictionary и Figma Tokens.

Структура файла:

json
{
  "name": "shadcn/ui Design Tokens",
  "version": "1.0",
  "baseColor": "neutral",
  "colors": {
    "light": { ... },
    "dark": { ... },
    "chart": { ... }
  },
  "semantic": { ... },
  "modules": { ... },
  "marketplaces": { ... },
  "typography": { ... },
  "spacing": { ... },
  "borderRadius": { ... },
  "shadows": { ... },
  "controlHeight": { ... },
  "transitions": { ... },
  "components": { ... }
}

Полный файл: shadcn-tokens.json

Подключение ​

HTML ​

html
<head>
  <!-- Базовые CSS-переменные дизайн-системы -->
  <link rel="stylesheet" href="shadcn-variables.css">

  <!-- Модульные стили (опционально) -->
  <link rel="stylesheet" href="{module}.css">
</head>

Tailwind CSS ​

При использовании Tailwind CSS переменные маппятся через конфигурацию:

js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        background: "var(--background)",
        foreground: "var(--foreground)",
        primary: {
          DEFAULT: "var(--primary)",
          foreground: "var(--primary-foreground)",
        },
        destructive: {
          DEFAULT: "var(--destructive)",
          foreground: "var(--destructive-foreground)",
        },
        // ... остальные переменные
      },
      borderRadius: {
        sm: "var(--radius-sm)",
        md: "var(--radius-md)",
        lg: "var(--radius-lg)",
      },
    },
  },
}

Связанные документы ​

ДокументОписание
Раздел 0: ВведениеОбзор дизайн-системы
Раздел 2: Тематизация модулейЦвета модулей и маркетплейсов
shadcn-variables.cssИсходный CSS-файл
shadcn-tokens.jsonDesign tokens в формате JSON

Версия: 1.1 | Дата: Февраль 2026

Документация ADOLF Platform

© 2026 Ohana