Brand Guidelines · v1.0

Брендбук Унексус

Визуальный язык платформы для писателей и создателей миров. Один набор правил — от иконки в интерфейсе до обложки презентации. Основан на реальной дизайн-системе продукта.

02

Цвет

Индиго-фиолетовый градиент — характер бренда; синий — рабочий цвет интерфейса.
ГРАДИЕНТ БРЕНДА · #6366F1 → #8B5CF6 · linear-gradient(120deg)

Бренд

Индиго
#6366F1
--landing-gradient-start
Фиолетовый
#8B5CF6
--landing-gradient-end
Синий · UI
#2563EB
--color-primary
Розовый · акцент
#EC4899
--landing-accent

Семантика

Успех
#10B981
--color-success
Внимание
#F59E0B
--color-warning
Ошибка
#EF4444
--color-error
Золото · издание
#C98A24
accent · marketing

Нейтральные (slate)

Тёмный фон
#0F172A
--color-bg · dark
Текст / поверхность
#1E293B
--color-text
Вторичный текст
#64748B
--color-text-secondary
Границы
#E2E8F0
--color-border
Приглушённый
#94A3B8
--color-text-muted
Фон III
#F1F5F9
--color-bg-tertiary
Фон II
#F8FAFC
--color-bg-secondary
Поверхность
#FFFFFF
--color-surface

Кликните по образцу — hex скопируется в буфер обмена. Нейтральные заданы в slate-гамме с лёгким холодным уклоном под индиго.

03

Типографика

Inter — весь интерфейс и текст. Fraunces — акцентный дисплей в маркетинге.

Дисплей

Merriweather

Литературный характер для обложек, заголовков лендингов и презентаций.

Основной

Inter

Интерфейс, заголовки, текст. Рабочая лошадка системы.

Моно

Mono

Системный моноширинный: метки, данные, код.

4XL · 2.25remСоздавайте вселенные
3XL · 1.875remАтлас ваших миров
2XL · 1.5remКниги, карты, энциклопедии
XL · 1.25remПодзаголовок раздела
BASE · 1remОсновной текст интерфейса и статей — вес 400, высота строки 1.6.
SM · 0.875remВспомогательный текст, подписи, метаданные

Начертания Inter

AaRegular · 400 AaMedium · 500 AaSemibold · 600 AaBold · 700
04

Токены

Скругления, тени и шкала отступов из variables.css продукта.

Скругления

--radius-sm4px
--radius-lg8px
--radius-xl12px
--radius-2xl16px
--radius-full∞

Тени

--shadow-sm
--shadow-md
--shadow-lg

Отступы (rem)

--spacing-14
--spacing-28
--spacing-416
--spacing-624
--spacing-832
--spacing-1248
05

Компоненты

Кнопки, бейджи и карточки — единая механика на всех экранах.

Кнопки

Первичная — градиент бренда, для главного шага. Синяя — рабочие действия в продукте. Вторичная и ghost — второстепенное.

Бейджи и статусы

Бесплатно PRO Новое Опубликовано

Тариф, премиум-статус, новизна и состояние контента. Форма — pill, радиус full.

Карточка контента

Иконка 40px в цветной плашке, заголовок Inter 600, описание вторичным текстом. Ховер — подъём на 4px.

Акцентная карточка

Для выделенного тарифа или рекомендации — граница окрашивается в индиго.

Градиентный блок

Hero, CTA, промо. Текст — белый, только для крупных поверхностей.

06

Иконостиль

Линейные, 24×24, обводка 2px, скруглённые концы. Без заливки.
вселенная
книга
карта
сторилайн
канбан
AI-проверка
сообщество
рецензия
конкурс
марафон
07

Tone of voice

Экспертно и тепло. Как коллега-редактор, а не отдел маркетинга.
01На стороне автора. Говорим о творчестве и мире, а не о «фичах» и «сущностях». Обращение — на «вы».
02Конкретика вместо клише. «AI находит противоречия между главами» — да. «Революционные AI-решения» — нет.
03Кнопка говорит, что произойдёт. «Опубликовать главу», затем тост «Глава опубликована». Никаких «Отправить?».
04Уважение к праву. Всегда подчёркиваем: права остаются у автора. Это ценность, а не мелкий шрифт.
Так
«Соберите мир в одном месте: карты, персонажи и хронология связаны с текстом.»
«Черновик сохраняется автоматически — ничего не потеряется.»
«Пригласите бета-ридера и получите разбор по сюжету, стилю и грамотности.»
Не так
«Уникальная экосистема нового поколения для управления сущностями контента.»
«Данные синхронизированы с бэкендом через WebSocket.»
«Функционал бета-ридинга с гибкими настройками параметров.»
08

Тёмная тема

Полноценная пара, а не инверсия. Индиго остаётся читаемым на тёмном.
СВЕТЛАЯ · DEFAULT
Фон #FFFFFF · текст #1E293B

Дневной режим. Нейтральные — светлый slate, границы мягкие.

ТЁМНАЯ · [data-theme="dark"]
Фон #0F172A · текст #F1F5F9

Ночной режим. Primary светлеет до #3B82F6, поверхности — тёмный slate.

Тема управляется атрибутом data-theme на корне; при его отсутствии наследуется системная (prefers-color-scheme). Все цвета берутся из токенов — компонент никогда не хардкодит hex.