Rocketmind

1. Цветовая палитра

Все цвета — CSS-переменные. Акцентный цвет бренда — #FFCC00. Категориальные цвета используются для кодировки данных, тегов, карточек.

Фоны

Background

--background

L: #FAFAFA · D: #0A0A0A

Основной фон страницы. Используй по умолчанию — особенно когда поверх кладёшь цвет.

Card

--card

L: #FFFFFF · D: #121212

Поверхность карточек и поповеров. Слой над фоном страницы.

Background (#FAFAFA / #0A0A0A) — фон страницы, всегда первый слой. Card (#FFFFFF / #121212) — поверхность карточек и поповеров поверх Background.

Серая шкала

Используй шкалу последовательно — не пропускай уровни без причины.

Gray 1

--rm-gray-1

Subtle surface

Gray 2

--rm-gray-2

Hover bg

Gray 3

--rm-gray-3

Default border

Gray 4

--rm-gray-4

Hover border

Gray fg-sub

--rm-gray-fg-sub

2nd text

Gray fg-main

--rm-gray-fg-main

Primary text

Акцентная шкала

Каждый цвет имеет 5 уровней насыщенности и 2 foreground-токена.

100

Solid fill. Кнопка, filled badge, иконка-заливка.

300

Subtle border. Граница chip/тега в покое.

500

Component bg active. Нажатое состояние.

700

Component bg hover. Наведение на chip/row.

900

Subtle background. Badge ghost, строка таблицы, фон карточки.

fg — текст поверх solid-100 фона (WCAG AA).
fg-subtle — текст поверх 300–900 фона (WCAG AA).

Yellow · Бренд-акцент

100

--rm-yellow-100

300

--rm-yellow-300

500

--rm-yellow-500

700

--rm-yellow-700

900

--rm-yellow-900

fg · --rm-yellow-fg
fg-subtle · --rm-yellow-fg-subtle

Violet · Категориальный

100

--rm-violet-100

300

--rm-violet-300

500

--rm-violet-500

700

--rm-violet-700

900

--rm-violet-900

fg · --rm-violet-fg
fg-subtle · --rm-violet-fg-subtle

Sky · Категориальный

100

--rm-sky-100

300

--rm-sky-300

500

--rm-sky-500

700

--rm-sky-700

900

--rm-sky-900

fg · --rm-sky-fg
fg-subtle · --rm-sky-fg-subtle

Terracotta · Категориальный

100

--rm-terracotta-100

300

--rm-terracotta-300

500

--rm-terracotta-500

700

--rm-terracotta-700

900

--rm-terracotta-900

fg · --rm-terracotta-fg
fg-subtle · --rm-terracotta-fg-subtle

Pink · Категориальный

100

--rm-pink-100

300

--rm-pink-300

500

--rm-pink-500

700

--rm-pink-700

900

--rm-pink-900

fg · --rm-pink-fg
fg-subtle · --rm-pink-fg-subtle

Blue · Категориальный

100

--rm-blue-100

300

--rm-blue-300

500

--rm-blue-500

700

--rm-blue-700

900

--rm-blue-900

fg · --rm-blue-fg
fg-subtle · --rm-blue-fg-subtle

Red · Семантика: ошибка

100

--rm-red-100

300

--rm-red-300

500

--rm-red-500

700

--rm-red-700

900

--rm-red-900

fg · --rm-red-fg
fg-subtle · --rm-red-fg-subtle

Green · Семантика: успех

100

--rm-green-100

300

--rm-green-300

500

--rm-green-500

700

--rm-green-700

900

--rm-green-900

fg · --rm-green-fg
fg-subtle · --rm-green-fg-subtle

Инвертированные поверхности

Блоки с акцентным фоном. Добавь класс .on-{color} на контейнер — все дочерние токены (--foreground, --border) автоматически инвертируются.

Брендовый блок · .on-yellow

Готов запустить агента?

Попробуй Rocketmind — AI-агенты для твоего бизнеса без написания кода.

.on-yellow — основной CTA-блок бренда, hero-секции, highlight-полосы. Используй только один такой блок на экране. Остальные .on-* — для категориальной маркировки секций.