Для интерфейсов

UI-кит

Брендбук задаёт слайды и печать. Здесь — как перенести те же решения на экраны, не изобретая третий синий.

Подключение

Агенту достаточно одного файла переменных. Не копируйте цвета из скриншотов.

<link rel="stylesheet" href="/tokens.css">

.page {
  background: var(--neo-cream);
  color: var(--neo-ink);
  font-family: var(--neo-font-ui);
}
h1, h2 { color: var(--neo-blue); }

Шкала экрана

Кегли 40–65 пт — для слайдов. На вебе используйте пиксельную шкалу ниже.

Токен	Размер	Назначение
`--neo-fs-display`	40px / 2.5rem	Hero, обложки
`--neo-fs-h1`	32px	Заголовок страницы
`--neo-fs-h2`	24px	Секция
`--neo-fs-h3`	18px	Карточка, модалка
`--neo-fs-body`	16px	Основной текст, 1.5
`--neo-fs-caption`	13px	Подписи, хинты

Контролы

Радиус 2px. Кнопки почти прямоугольные, не «пилюли».

На светлом

Поле

На синем

<button class="neo-btn neo-btn-primary">Сохранить</button>
<button class="neo-btn neo-btn-ghost">Отмена</button>

Поверхности

Страница

Фон #F2F2E9. Карточки и формы — белые, тонкая серая обводка.

Шапка

Тёмно-синяя плашка, белый логотип, ссылки белые с прозрачностью ~78%.

Иконка

Капля, минимум 50px. В списках можно 12–16px, если силуэт читается.

Контраст

Проверяйте пары, которые реально встречаются в UI.

Пара	Где	Заметка
Белый на #283583	Шапка, primary-кнопка, оборот визитки	Основная инверсия
#283583 на #F2F2E9	Заголовки на странице	Предпочтительнее чёрного
#283583 на белом	Текст в карточках, ссылки	Рабочая пара
#A3A3A3 на кремовом	Подписи	Не для длинного текста
Чёрный на белом	Печатный бланк	Для экрана не обязателен

Типичные ошибки агента

Синий #2563eb / Tailwind / Material вместо #283583
Inter / Roboto / системный гротеск как «лицо» бренда без оговорки
Скругление 12–16px и стеклянные карточки «как у SaaS»
Логотип, набранный текстом «NEO» шрифтом заголовка
Капля с тенью, градиентом или в роли иллюстрации на весь экран без поля
Тёмная тема, если её нет в задаче: канон — крем + синий

Сетка

Базовый шаг 8px. Контент не шире 1120px. Между секцией и заголовком — 8px, до сетки карточек — 28px.

--neo-content: 1120px;
--neo-space: 8px;
/* 4 8 12 16 24 32 48 64 */