Гайдлайны бренда

Этот документ описывает общий визуальный и вербальный язык всех поверхностей Heretic — продукт, маркетинговый сайт, документация, сообщество. Используйте его всякий раз, когда делаете что-то под именем Heretic.

История бренда

VibeCoder Heretic — для разработчиков, которые отказываются отдавать код, данные и ремесло в чужой SaaS. Мы относимся к AI-агентам как к мощному инструменту — быстрому, автономному и принадлежащему вам. Self-hosted by default. С характером, не с пафосом.

Одна строчка: AI-агенты для кода на вашем компьютере или сервере.

Tone of Voice

  • Прямо, без корпоративщины. Короткие предложения. Сильные глаголы. Никакого buzzword-салата.
  • Прагматично, без проповедей. Сначала trade-off, потом рекомендация.
  • Уверенно, не высокомерно. У нас есть мнение — и мы объясняем почему.
  • Еретически, не на показ. Спорим с дефолтами — только когда есть что предложить лучше.
ТакНе так
«Запускайте агентов на своей машине.»«Используйте synergy облачного AI.»
«Это ломается под нагрузкой — вот почему.»«Лидер индустрии по надёжности.»
«Берите Postgres. SQLite — только для dev.»«Лучший в классе data layer.»

Логотип

Знак Heretic — это глиф пламени в паре со словесным знаком VibeCoder Heretic.

Знак Heretic — 34px
Знак · 34px (UI)
Знак Heretic — 256px
Знак · 256px (favicon, соцсети)
Знак Heretic — 1024px
Знак · 1024px (мастер)

Блок (lockup) — знак слева от словесного знака VibeCoder <gradient>Heretic</gradient> с отступом примерно в половину высоты знака. На «Heretic» всегда лежит brand-градиент.

Правила

  • Сохраняйте свободное поле вокруг знака — не меньше высоты пламени.
  • Не перекрашивайте, не поворачивайте, не растягивайте, не добавляйте эффекты (тени, градиенты).
  • На тёмном фоне — светлый вариант. На светлом — тёмный.
  • Минимальный размер: 24px по высоте для глифа, 120px по ширине для блока.

Скачать

Цветовая система

Heretic использует token-based цветовую систему с семантическими CSS-переменными. Hex-значения зарезервированы для brand-палитры ниже — всё остальное должно ссылаться на токены.

Brand-палитра

ТокенLightDarkПрименение
--color-brand-violet#8b5cf6#8b5cf6Primary brand
--color-brand-purple#7c3aed#7c3aedАкцент по умолчанию
--color-brand-purple-dark#6d28d9#6d28d9Hover
--color-brand-pink#ec4899#ec4899Highlight
--color-brand-orange#f97316#f97316Тёплый акцент

Семантические токены

Всегда предпочитайте семантические токены (text-foreground, bg-background, bg-card, text-muted-foreground, --color-accent, --color-accent-hover) сырому hex. Они автоматически адаптируются к light/dark и к per-page темам.

Темы страниц

Сайт поддерживает per-page акцентные темы, которые меняют акцентную палитру без изменения brand identity:

  • Default — violet/purple (канонический Heretic)
  • Green — раздел /education
  • Blue — спокойные технические контексты
  • Orange — раздел /heretic/newsletter

Применяется через <SetPageTheme theme="green" /> в начале MDX-страницы. Полный маппинг токенов — в src/styles/theme.css.

Типографика

  • UI и body: системный font stack (дефолт Tailwind) — быстро, нейтрально, читаемо на любой ОС.
  • Заголовки: тот же стек, weight 600–700.
  • Код и терминал: monospace stack.
  • Размеры: для заголовков — clamp() с минимумом 24–28px на мобильных. Body — text-base sm:text-lg.

Не вводите новые семейства шрифтов без сильной причины — каждый шрифт стоит времени рендера и визуальной целостности.

Стикеры и маскоты

У Heretic растущее семейство стикеров с котами — для маркетинга, коммьюнити-каналов и поверхностей продукта. Это не замена логотипа: используйте их для характера, не для идентификации.

  • Common Heretic Cats — каноничные иллюстрации котов. Можно использовать везде: на сайте, в слайдах, в печати.
  • Telegram Cats — Telegram-оптимизированный стикер-пак (прозрачный PNG, 512×512, белая обводка) для чатов и каналов в Telegram.

Полная библиотека, правила и загрузки — на странице Стикеры.

Иконки

Heretic использует Lucide во всём UI. Stroke 1.5–2. Цвет — currentColor, не хардкод.

Изображения

  • Предпочитайте скриншоты реального продукта стоковым иллюстрациям.
  • OG-изображения — пред-сгенерированные PNG в public/images/, не динамические API-роуты.
  • Декоративная графика — тёмная, code-adjacent: терминалы, IDE-поверхности, абстрактные градиенты в brand-палитре.

Стиль текстов

  • Sentence case в подзаголовках (Гайдлайны бренда, не Гайдлайны Бренда) — кроме главного заголовка страницы.
  • Жирным — одну вещь в абзаце, которая важнее всего. Не для украшения.
  • Код, env-переменные, пути, CLI-флаги — в inline code.
  • Списки должны заслуживать своих буллетов — три коротких абзаца часто лучше десяти пунктов.

Нейминг

  • Продукт: VibeCoder Heretic (полностью), Heretic (коротко, в контексте).
  • Не пишем «The Heretic» — просто Heretic.
  • Идентификаторы: heretic-* (kebab-case) для пакетов и приложений, Heretic* (PascalCase) для TypeScript-классов и компонентов.

Single source of truth

Техническая реализация токенов живёт в src/styles/theme.css и src/components/layout/SetPageTheme.tsx. Если эта страница и код расходятся — код побеждает, а страницу надо обновить.

Контакт

Вопросы, правки или новый кейс, которому нужен гайдлайн? Напишите нам.