Дизайн-система

Брендбук

ГлавнаяБрендбук
Brand & UI System · 2026

Теос

Наследие Богини
v1.1 · Web Portal · Stone palette · Cormorant + Manrope
02

Цвет

Основная палитра «Камень» — глубокие нейтральные оттенки с тёплым золотом акцентов. Фракционные цвета используются для маркеров принадлежности (Альянс Света — голубой, Союз Ярости — кармин). Имена токенов соответствуют CSS-переменным.

Камень · фоновая палитра
Глубокий
#0B0D12
--bg-deep
Базовый
#11141B
--bg-base
Панель
#161A23
--bg-panel
Панель 2
#1D2230
--bg-panel-2
Возвышение
#232A38
--bg-elev
Полоса
#1A1F2B
--bg-stripe
Золото · акцентная палитра
Золото
#C9A44A
--gold
Золото яркое
#E7C878
--gold-bright
Золото 2
#9A7A3A
--gold-2
Пергамент
#F4E6B8
--parch
Линия
#363B48
--line
Линия мягк.
#262A35
--line-soft
Фракции
Свет
#6FA3C8
--light
Свет 2
#A9CAE3
--light-2
Ярость
#A83040
--fury
Ярость 2
#D96274
--fury-2
Успех
#6A9B6A
ok
Предупр.
#C08A3A
warn
Текст
Основной
#E6E1D2
--ink
Мягкий
#A8A397
--ink-soft
Приглуш.
#7A766C
--ink-mute
Слабый
#5A574F
--ink-faint
03

Типографика

Заголовки — Cormorant Garamond (серифная классика). Интерфейс — Manrope. Технические надписи и подписи к иллюстрациям — JetBrains Mono. Пара по умолчанию называется .fp-a; на сайте также подключены варианты .fp-b/c/d для тематических экспериментов.

Cormorant Garamond
56px · 500
line-height 1.05

Наследие старого Теоса

Cormorant Garamond
32px · 500
line-height 1.15

Альянс Света и Союз Ярости

Cormorant Garamond
22px · 500

Битва за Звёздный храм

Manrope
10.5px · 600 · 0.22em
UPPERCASE
Хроники Теоса · Дневник разработки
Manrope
14px · 400
line-height 1.5

События разворачиваются в отдалённом мире под названием Теос. Древний раздор богинь Дейдры и Риэли вновь разгорается, и игрокам предстоит выбрать сторону.

JetBrains Mono
11px · 500
[ illustration · 1920×1080 ]
04

Иконография

Иконки рисуются как тонкие линейные пиктограммы внутри квадратного поля 24×24, обводка 1.4–1.6 px, без заливок. Угловые соединения скругляются. В цвете — золото или приглушённый текст; интерактивные состояния — переход к --gold-bright.

05

Кнопки

Две роли: .btn — стандартная (контурная), .btn--gold — главное действие. Модификаторы размера: .btn--sm, .btn--lg. .btn--ghost — для второстепенных действий без подложки.

Стандарт · .btn

Normal
Hover
Active
Disabled
Ghost
Small

Главная · .btn--gold

Normal
Hover
Active
Disabled
Small
Large
06

Бейджи и редкости

.badge — компактные метки статусов; .badge--dot добавляет статус-точку слева. Шкала редкости предметов — фиксированная: Обычное · Редкое · Эпич. · Легенд. · Свет · Ярость.

Стандарт Уникальный Альянс Света Союз Ярости Онлайн PvP Готов
Обычное Редкое Эпич. Легенд. Свет Ярость
07

Панели и карточки

Контентные блоки строятся на классе .panel. Без модификаторов — голая рамка для собственного заполнения. .panel--padded добавляет внутренний отступ, .panel--ornate — паддинг + вторую внутреннюю рамку и золотые угловые орнаменты для «парадных» блоков.

.panel--padded

Подраздел
Заголовок панели

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

Внутренний padding 20px 24px 24px, тонкая рамка --line.

.panel--ornate

Парадный блок
Заголовок с орнаментом

Для важных секций: новостных лент, ключевых CTA-блоков, шапок разделов магазина и оружейной.

Двойная рамка + угловые завитки + точка в центре каждого угла.

.item-card · карточка товара

Легенд.
Благословение Богини
Месячное благословение.
390 ◈
Иллюстрация-арт сверху, индикатор редкости в углу, цена с символом справа.

.panel + .panel-head

Заголовок-бар
Все →
Тип панели с верхней золотой полосой-баром и действием справа. Подходит для списков, лент, виджетов на главной.
Полоса 12×18 px с золотой нижней границей-градиентом.
08

Уведомления

Информационные плашки .alert с круглой иконкой слева, заголовком и текстом. Модификаторы: --info (золото), --warn (тёплый), --ok (зелёный). Левая полоса 3 px — цвет полосы соответствует роли.

Покупка только из личного кабинетаНа публичной витрине показаны карточки каталога. Чтобы совершить покупку, войдите в кабинет.
Анкета ЗБТ принятаСледите за новостями — мы пришлём приглашение на ваш email.
ВозвратыВозврат возможен в течение 24 часов с момента покупки, если предмет не использован.
09

Формы

Поля имеют единый стиль: тёмная подложка, тонкая рамка, золотой фокус-ring. Метки — мелкий капс-шрифт .eyebrow-стиля.

11

Сетка и отступы

Максимальная ширина контента — 1440 px с горизонтальным паддингом 32 px. Внутренняя сетка — 12 колонок с гэпом 32 px. Длинная проза (политики, правила) ограничивается до 860 px для читаемости. Вертикальные отступы кратны 8 px.

12 / full
8 / main
4 / aside
6
6
4
4
4
Шкала отступов
8
16
24
32
48
64
96
12

Tone of voice

Спокойный, уважительный, ремесленный голос. Мы — хранители наследия классической MMORPG, а не маркетологи. Пишем кратко, с уважением к ветеранам и без воды.

Так пишем

  • «Возвращаем дух классического PvP»
  • «Старый дух противостояния»
  • «Серверы готовятся к запуску»
  • Кратко, без воды, с уважением к ветеранам
  • Сохраняем терминологию старого Теоса
  • Прозрачно говорим о сроках и решениях

Так не пишем

  • «Жми сюда!», «Скорее!», «Ультимативный»
  • Маркетинговый хайп и кликбейт-заголовки
  • Сленг киберспорта (esports, GG, throw)
  • Эмодзи в основном тексте
  • «Pay-to-win», «лутбоксы», «премиум-эксклюзив»
  • Капс без необходимости