Обзор дизайн-системы

Каталог компонентов

Общие элементы, состояния и шаблоны Fibra. Выбирай раздел или ищи по названию — на русском и английском.

0.4 · 14 разделов

Основа и токены

Визуальные решения, темы и правила композиции.

Состав раздела · 12
  • Typography · заголовки, текст, подписи
  • TextLink · ссылки
  • Prose · списки и длинный текст
  • Colors · brand / neutral / success / warning / error / info
  • Spacing · отступы
  • Sizing · размеры элементов
  • Grid / Container · сетки и брейкпоинты
  • Radius / Border / Shadow · форма и глубина
  • Elevation / z-index · слои
  • Icons / Illustration / Image · ассеты
  • Motion · анимации и reduced motion
  • Theme · тёмная и светлая темы

Палитра и темы

tokens.css · useUI

Тёмная тема основная; светлая включается явно и использует те же смысловые роли.

Тема витрины
--color-background
--color-surface
--color-surface-hover
--color-surface-selected
--color-text
--color-text-secondary
--color-text-muted
--color-border-control
--color-success
--color-warning
--color-error
--color-info

Типографика, ссылки и списки

Heading · Text · Prose · TextLink

Manrope связывает все страницы

Основной текст объясняет задачу. Различай заголовки, описания, подписи и данные.

Вторичный текст для описания.

Подпись или метаданные.

  1. Выбери данные.
  2. Настрой результат.
  3. Подтверди действие.

Сетка, интервалы и размеры

Grid · Container · --space-* · --control-height
Контейнер 1320 px
Рабочая область 920 px
Навигация 104 / 72 px
4
8
12
16
20
24
32
40
48
64
80

Кнопки и поля: 48 px; компактные действия: 40 px. Брейкпоинты каркаса: 640, 900 и 1500 px.

Глубина, слои и движение

--z-* · --shadow-overlay · --duration-*
Плоскости
Без теней; отделяются тоном и рамкой
Временный слой
Мягкая тень для меню и диалога
Порядок слоёв
base 0 → sticky 10 → nav 20 → menu 40 → backdrop 50 → dialog 60 → toast 70 → tooltip 80
Переходы
140 / 220 / 360 ms; ease-out
Меньше движения
prefers-reduced-motion отключает необязательное движение

Бренд, иконки и изображения

Logo · Mascot · MediaImage

Оригинальные ассеты без растяжения. Lucide с единым контуром. Изображению нужны alt, стабильное соотношение сторон и fallback.

Примеры показывают компоненты и локальное поведение. Сервисы, авторизация и оплата подключаются отдельно.

Применение в каталоге