Brand guidelines с нуля

Действуй как brand strategist + дизайнер системы. Создай brand guidelines с нуля для {{product}}. Аудитория: {{audience}}. Референсы: {{competitors}}. Существующее: {{current_assets}}.

Цель — один файл DESIGN.md, к которому команда обращается перед каждым решением. Не «галерея вдохновения», а рабочий документ с правилами.

Структура DESIGN.md

1. Brand essence (1 страница)

• Mission: одно предложение, что мы делаем для пользователя
• Personality (5 прилагательных): например, «curious, precise, warm, irreverent, calm»
• Voice pillars (3 пункта): например, «короткие предложения», «никогда не извиняемся за наличие мнения», «технически точны»
• Brand promise: что обещаем — и от чего отказываемся (например, «мы не для всех — мы для разработчиков, которые ценят инженерную элегантность»)

2. Voice & tone

Voice (всегда такие) — список с примерами:

• ✅ «Set up takes 3 minutes. Two if you've done this before.»
• ❌ «We're thrilled to offer an industry-leading setup experience!»

Tone (зависит от контекста):

• В success state: ___
• В error state: ___
• В empty state: ___
• В marketing: ___
• В docs: ___

Таблица «как мы говорим / как мы НЕ говорим» — минимум 8 пар.

3. Color tokens

Primary scale:
  primary-50:  #...
  primary-100: #...
  ...
  primary-900: #...
Brand:
  brand:        #... (основной)
  brand-hover:  #...
  brand-active: #...
Semantic:
  success: #...
  warning: #...
  danger:  #...
  info:    #...
Neutral:
  bg, surface, border, text-primary, text-muted...

Для каждого цвета:

• Контраст на белом / чёрном фоне (WCAG)
• Где использовать (CTA, accent, illustration)
• Где НЕ использовать

4. Typography

Display font:    ___, weights ___, fallback: system-ui, sans-serif
Body font:       ___, weights ___
Monospace:       ___, weights ___

Scale (modular 1.25):
  display:  48px / 56px / -0.02em
  h1:       36px / 44px / -0.01em
  h2:       28px / 36px
  h3:       22px / 30px
  body-lg:  18px / 28px
  body:     16px / 24px
  body-sm:  14px / 20px
  caption:  12px / 16px / +0.02em

Правила:

• Не использовать > 3 размеров на одной странице
• Не использовать font-weight 100 или 900
• Line-height ≥ 1.4 для body

5. Logo rules

• Primary mark: SVG, минимальный размер 24px height
• Wordmark: SVG, минимальный размер 80px width
• Clear space: ≥ высота X (где X — высота строчной буквы)
• Monochrome версии: чёрный, белый, brand
• На фотографии: только белый или brand с проверкой контраста
• Anti-usage (с примерами ❌):
  • Не растягивать
  • Не менять цвета
  • Не помещать в круг / квадрат произвольный
  • Не использовать на сложном фоне без подложки

6. Spacing & layout

• 4px-based: 4, 8, 12, 16, 24, 32, 48, 64
• Grid: 12 cols, gutter 24px, max-width 1200px
• Section padding: 80px desktop / 48px mobile

7. Iconography

• Один стиль (например, outline, 1.5px stroke, 24×24)
• Источник или библиотека (Lucide / custom)
• Размеры: 16 / 20 / 24 / 32

8. Imagery

• Стиль фотографии: ___ (например, «natural light, no people, focus on craft»)
• Иллюстрации: ___ (например, «geometric, brand palette, 2D»)
• Что НЕ использовать: ___

9. Motion

• Easing: ease-out для входа, ease-in для выхода
• Duration: 150ms (micro), 250ms (UI), 400ms (page)
• Уважай prefers-reduced-motion

10. Examples

Один real-life пример на каждый тип:

• Кнопка primary в context-е
• Header / nav
• Email subject + body
• Tweet / social post
• Push notification
• Error message

Anti-patterns

• ❌ Brand guidelines в Notion на 47 страниц без оглавления — никто не читает
• ❌ «Personality: innovative, customer-centric» — пустые слова, нет дифференциации
• ❌ Цвета без semantic ролей («blue-3» вместо «brand»)
• ❌ Шрифт без fallback — рендеринг ломается у тех, у кого не загрузился
• ❌ Voice без примеров — каждый пишет как умеет
• ❌ Logo без anti-usage — все варианты «по вдохновению»
• ❌ DESIGN.md живёт в одном Figma-файле и не синхронизируется с кодом
• ❌ Гайд без «examples in the wild» — теоретический документ