Бренд-бук · Визуальная айдентика

EXCICON

Единый источник визуального языка бренда: логотип, цвета, шрифты и кнопки. Всё собрано из живого кода сайта — значения совпадают с variables.css и main.css один в один.

Логотип

Логотип — текстовый wordmark: EXC + акцентная оранжевая I + CON, набор Geist 700 с трекингом 0.08em. На светлом фоне буквы jade, на тёмном — белые; акцентная «I» всегда оранжевая (--color-primary). Разметка — как в шапке сайта.

EXCICON на светлом фоне

EXCICON на тёмном (jade)

Чего нельзя делать со знаком:

✕Убирать оранжевый акцент с буквы «I»

✕Красить акцент в другую букву или цвет

✕Менять шрифт — только Geist 700

✕Ломать трекинг или разрывать буквы

✕Класть светлый знак на светлый фон

✕Добавлять тени, обводки, эффекты

Цвета

Клик по свотчу копирует HEX. Соотношение в макетах — 60 / 30 / 10: 60% белого и кремового (фон, воздух), 30% jade (тёмные секции, футер), 10% оранжевого (CTA и акценты).

Основные

Палитра 2026 · тёплый минимализм

Нейтральные и текст

Состояния и поверхности

Типографика

Четыре гарнитуры, у каждой своя роль. Не смешивайте роли: заголовки-герои — Fraunces на латинице и Georgia на кириллице, интерфейс и текст — Geist, письма и цитаты — Cormorant Garamond, цены и цифры — Geist Mono.

Fraunces --font-display · hero, крупные заголовки · только латиница

Psychology that works

Кириллицы у гарнитуры нет — ни в нашей сборке, ни в исходнике. Русские заголовки уходят на следующий шрифт в стеке, Georgia.

Geist --font-body · текст, H1–H4, интерфейс, кнопки

Ясный и спокойный интерфейс

Основной текст сайта набирается Geist — нейтральный гротеск с хорошей читаемостью на любом размере.

Cormorant Garamond --font-letter · письма, цитаты, эссе

«Спасибо, что помогли увидеть главное»

Geist Mono --font-mono · цены, цифры, метки

12 000 ₽ · 60 мин · №78-25

Шкала размеров fluid clamp() — растёт от min к max по ширине экрана

--text-5xlAa 64–96px

--text-4xlAa 48–72px

--text-3xlAa 36–56px

--text-2xlAa 28–40px

--text-xlAa 22–30px

--text-lgAa 18–24px основной крупный

--text-baseAa 16–20px базовый текст

--text-smAa 14–17px вторичный текст и подписи

--text-xsAa 12px мелкие UI-метки, не растут

Кнопки

Только классы из main.css — никаких своих кнопок. Внутри стрелка <span class="arrow">→</span>. Размер задаётся scoped-правилом, цвета и фон не переопределяются.

Радиус кнопок — своя система, не из шкалы 2/4/8: 10px для компактных (высота ≤40px — пилюли шапки, фильтры, кнопки в карточках) и 12px для крупных (высота >40px — CTA, кнопки форм, базовая .btn). Заведена коммитом 0402ae5 от 13.07.2026, единая по всему сайту.

.btn .btn-primary — главный CTA · на тёмном Записаться Узнать больше

.btn .btn-outline — ghost · на светлом Смотреть метод

Радиусы, тени, переходы

Токен	Значение	Где
--radius-sm	2px	Чипы, мелкие метки
--radius-md	4px	Карточки, поля, свотчи
--radius-lg	8px	Крупные блоки, плитки
—	10px	Компактные кнопки и пилюли, высота ≤40px
—	12px	Крупные кнопки, высота >40px
--shadow-card	0 4px 20px rgba(0,0,0,.08)	Карточка в покое
--shadow-hover	0 8px 40px rgba(0,0,0,.15)	Карточка при наведении
--transition-fast	0.2s ease	Ховеры, мелкие состояния
--transition-base	0.3s ease	Кнопки, ссылки
--transition-slow	0.6s ease	Крупные анимации секций