Цвета и градиент

Фирменная палитра Reactive Engineering, градиент и переопределение темы Fumadocs.

Палитра

Значения сняты с официальных ассетов брендбука Reactive Engineering.

Роль	HEX	Токен CSS	Константа
Основной акцент — зеленый	`#0DE644`	`--color-re-green`	`brandColors.green`
Дополнительный акцент — циан	`#45E1FF`	`--color-re-cyan`	`brandColors.cyan`
Основной темный тон	`#000D2B`	`--color-re-navy`	`brandColors.navy`
Темный тон под логотипом	`#001029`	`--color-re-navy-raised`	`brandColors.navyRaised`
Светлая нейтраль	`#E8EDF3`	`--color-re-mist`	`brandColors.mist`
Приглушенный стальной	`#406E8E`	`--color-re-steel`	`brandColors.steel`

Токены объявлены в блоке @theme файла app/global.css, поэтому доступны как классы Tailwind: bg-re-navy, text-re-cyan, border-re-green.

Фирменный градиент

Зеленый переходит в циан слева направо под углом 100°.

--re-gradient: linear-gradient(100deg, #0de644 0%, #45e1ff 100%);

Дополнительно объявлен полупрозрачный вариант --re-gradient-soft — для плашек иконок и мягких подложек.

Готовые утилиты

Класс	Применение
`.re-gradient-text`	Градиентная заливка текста — акцентные слова заголовков.
`.re-gradient-surface`	Градиентная плашка — основные кнопки, бейджи.
`.re-gradient-rule`	Градиентная разделительная линия толщиной 2px.
`.re-pattern-panel`	Темная панель с геометрическим паттерном — hero-блоки.

<Link href="/docs" className="re-gradient-surface rounded-full px-6 py-3 font-semibold">
  Открыть документацию
</Link>

Контраст на градиенте

Градиент светлый, поэтому текст на нем — темно-синий (--color-re-navy), а не белый. .re-gradient-surface задает такой цвет текста по умолчанию.

Fumadocs UI читает палитру из переменных --color-fd-*. Шаблон переопределяет их брендовыми значениями, поэтому все встроенные компоненты — боковое меню, поиск, карточки, выделенные блоки — оформлены в фирменном стиле без правки самих компонентов.

app/global.css

:root {
  --color-fd-background: #ffffff;
  --color-fd-foreground: #000d2b;
  --color-fd-primary: #0aa835;
  --color-fd-ring: #0de644;
  /* ... */
}

.dark {
  --color-fd-background: #000d2b;
  --color-fd-foreground: #e8edf3;
  --color-fd-primary: #45e1ff;
  --color-fd-ring: #45e1ff;
  /* ... */
}

Почему акценты различаются по темам

Тема	Акцент	Причина
Светлая	`#0AA835` — затемненный зеленый	Чистый `#0DE644` на белом фоне не проходит по контрасту для текста и ссылок.
Темная	`#45E1FF` — циан	На темно-синем фоне циан читается лучше зеленого.

Фирменные #0DE644 и #45E1FF при этом используются без изменений там, где они работают как плашка или обводка, а не как цвет текста: градиенты, кольца фокуса, подсветка при наведении.

Изменение палитры под другой бренд

Обновить константы

lib/brand.ts

export const brandColors = {
  green: '#0DE644',
  cyan: '#45E1FF',
  navy: '#000D2B',
  // ...
} as const;

Обновить токены и палитру Fumadocs

В app/global.css — блок @theme, переменные --re-gradient и наборы --color-fd-* для :root и .dark.

Проверить контраст

Проверьте светлую и темную тему: основной текст, ссылки, состояния наведения и фокуса, выделенные блоки Callout.