Design System v2.0

Единая система для SaaS-продукта Golova и всей экосистемы связанных продуктов. Три уровня токенов — примитивы → семантика → компоненты — так изменения палитры не ломают компоненты, собранные поверх неё.

Структура: css/tokens.css — примитивы и семантические токены (цвет, шрифты, отступы, радиусы, тени), css/components.css — компоненты поверх токенов, включая полный набор форм. fonts/ и logos/ — фирменные ассеты. Шрифты: Roboto Flex — весь UI-текст, PragmataPro — только логотип и декоративные акценты.

Философия дизайна

Golova — профессиональная B2B SaaS-платформа для компаний, занимающихся арендой AV-оборудования и техническим обеспечением мероприятий. Каждый экран должен в первую очередь помогать быстро выполнять ежедневные рабочие задачи.

Логотип

Логотип используется как рабочий брендовый идентификатор внутри B2B-интерфейса. По умолчанию выбираем полный логотип, знак используем только там, где полная версия физически не помещается.

Logo Variants

Допустимые версии логотипа. Не создаем новые варианты под отдельные экраны.

Full Logo

Основной вариант. Используется почти всегда: приложение, документы, настройки, onboarding.

Symbol

Только знак: favicon, мобильная навигация, аватар продукта, квадратные области.

Monochrome

Черный/графитовый вариант для светлого фона. Базовый цвет: #2B2B2B.

White

Для темных интерфейсов. Черные SVG-локапы инвертируются через .on-dark.

Blue

Цвет #4976F4. Использовать редко: брендовые материалы и маркетинг, не как основной логотип внутри приложения.

Product Lockup

Продуктовый лок для конкретного продукта экосистемы: шапка продукта, письма, счета.

Цвет

Трёхуровневая модель: примитивы задают физические значения, семантика называет их по роли в интерфейсе, компоненты используют только семантику — никогда не примитивы напрямую.

Темная тема

Темная версия строится тем же способом, что и светлая: примитивы → семантика → компоненты. Компоненты не получают отдельные dark-классы; меняются значения семантических токенов через .theme-dark или [data-theme="dark"].

Типографика

Roboto Flex — весь интерфейсный текст (переменный шрифт, гибкие насыщенности). PragmataPro — только логотип и декоративные акценты, не для чтения.

Отступы

Шкала на базе 4px.

Скругления

Система в целом угловатая. Формы — самые острые: 4px флэт, без исключений (кроме переключателя-свитча — он физическая пилюля по смыслу).

Тени

Незаметны в покое, раскрываются на интерактиве. Focus/error-ring — отдельные токены для полей форм.

Кнопки

Один компонент .btn, собираемый из вариантов, размеров и состояний. Иконки — Bootstrap Icons (MIT, свободная лицензия), подключены как иконный шрифт: класс bi bi-*.

<button class="btn btn-md btn-primary">
  <i class="bi bi-plus-lg"></i>
  Создать
</button>

Бейджи и теги

Табы

<div class="tabs">
  <button class="tab active">Все</button>
  <button class="tab">В аренде</button>
  <button class="tab">Резерв</button>
</div>

Формы

Полный набор форм-компонентов на базе переменных Golova. Все контролы — 4px радиус (--radius-form), фокус — рамка border/focus + мягкое кольцо shadow-focus-ring, ошибка — border/error + shadow-error-ring.

<label class="field">
  <span class="field-label">Название компании <span class="req">*</span></span>
  <input class="ctrl" type="text" placeholder="ООО Ромашка">
  <span class="field-hint">Юридическое или рабочее название клиента.</span>
</label>

Модалки

Три сценария под самые частые действия у сложных таблиц/деревьев: форма-редактор строки, подтверждение удаления, настройка видимости колонок. Структура одинаковая: заголовок с подписью и крестиком → тело (скроллится само, если контента много) → футер с действиями, прижатыми вправо.

<div class="modal">
  <div class="modal-header">
    <div>
      <h3>Редактировать позицию</h3>
      <p>Изменения применятся к текущей строке.</p>
    </div>
    <button class="btn btn-sm btn-icon-only btn-ghost modal-close" aria-label="Закрыть">
      <i class="bi bi-x-lg"></i>
    </button>
  </div>
  <div class="modal-body">...</div>
  <div class="modal-footer">
    <button class="btn btn-md btn-secondary">Отмена</button>
    <button class="btn btn-md btn-primary">Сохранить</button>
  </div>
</div>

Карточка товара

<article class="pcard">
  <div class="img">
    <span class="badge badge-neutral">Продажа б/у</span>
    <div class="fav">♥</div>
    фото товара
  </div>
  <div class="body">
    <h3 class="title">Акустическая система Yamaha DXR12</h3>
    <p class="price">8 500 ₽ <span class="kit-flag"><i></i>Комплект</span></p>
    <div class="seller"><span class="star">★</span> 4.9 · Pro Sound</div>
    <div class="loc">Москва · самовывоз</div>
    <button class="cta">Подробнее</button>
  </div>
</article>

Футер

Продукты

GolovaЭкосистема

О нас

База знанийFAQ

Контакты

[email protected]

Developer Handoff

Этот раздел нужен разработчикам и ИИ-агентам, которые собирают прототипы или переносят паттерны в продукт. Источник истины остается в токенах, компонентах и правилах витрины.

Перед началом прочитай AI_USAGE.md, tokens.json, css/tokens.css и css/components.css.
Собери прототип Golova как плотный B2B SaaS/ERP экран.
Используй существующие CSS variables и component classes.
Не хардкодь цвета, не делай лендинг, не используй градиенты и декоративные иллюстрации.
Поддержи светлую и темную тему через data-theme="dark".

Как использовать