# Брендбук Spot city cafe

Руководство по использованию логотипа и фирменного стиля.
Версия для цифровых носителей и сайта.

Основа — печатный брендбук Spot, разработанный студией **CMYK.design**. Этот документ повторяет
его положения (логотип, шрифты, охранное поле, цвета, паттерн, носители) и дополняет их тем,
что нужно для сайта: вечерней тёмной темой, состояниями интерфейса и правилами для трёх языков.

---

## 1. Суть бренда

### Позиционирование

> **Spot — городское кафе полного дня. С завтрака до позднего ужина, по честной цене.**

### Почему именно это

Данные аудита рынка кофеен Алматы (675 карточек 2GIS):

| Факт | Значение |
|---|---|
| Средний чек флагмана Spot при рейтинге 4,9 | **4 500 ₸** |
| Средний чек Coffee BOOM при рейтинге 4,77 | **7 000 ₸** |
| Разница в цене при сопоставимом рейтинге | **в 1,6 раза** |
| Доля рынка с рейтингом 4,8 и выше | **68 %** |
| Рабочий день флагмана | **08:00–23:00, 15 часов** |

Из этого следуют три вывода, на которых держится вся коммуникация:

1. **Соотношение цены и качества — главное измеримое преимущество.** Spot держит рейтинг 4,9
   при чеке, который в полтора раза ниже, чем у заметного конкурента с более низкой оценкой.
   Это единственное отличие, подтверждённое цифрами.
2. **Высокий рейтинг сам по себе отличием не является.** Его держат две трети рынка. Поэтому
   мы никогда не строим сообщение вокруг «у нас лучшее качество» — это не выделяет.
3. **Длинный день покрывает четыре сегмента из пяти.** С 08:00 до 23:00 в кафе успевают зайти
   и на завтрак, и на обед, и на ужин, и на вечернюю встречу. Это работает на частоту визитов.

### Обещание

Приходи, когда удобно, — и заплати столько, сколько это стоит на самом деле.

### Три ценности

**Честная цена.** Мы не берём премию за вывеску. Рейтинг 4,9 при чеке 4 500 ₸ — это то,
за что к нам возвращаются.

**Полный день.** Завтрак в восемь, обед в час, ужин в одиннадцать. Одно место на все поводы.

**Городская среда.** Spot — часть Алматы, а не изолированное заведение. Место, куда заходят
по дороге, а не едут специально.

### Что мы делаем и чего не делаем

| Делаем | Не делаем |
|---|---|
| Показываем реальные часы работы | Не пишем «работаем допоздна» без цифр |
| Называем цену прямо | Не прячем чек за «от 990 ₸» |
| Держим кухню открытой до закрытия | Не сворачиваем меню за час до конца |
| Публикуем настоящие отзывы из 2GIS | Не пишем отзывы сами |
| Снимаем свои блюда | Не берём чужие фото |
| Пишем «скоро откроется», пока филиал не открыт | Не показываем адрес как работающий |

---

## 2. Аудитория

Пять сегментов, распределённых по рабочему дню с 08:00 до 23:00.

### Вечерний социальный · 18:00–23:00

Встречи после работы, свидания, дни рождения. **Что важно:** атмосфера, приличные фото,
возможность сидеть долго и не чувствовать, что торопят.
**Как говорим:** «Столы бронируются. Событие в четверг».

### Утренний офисный · 08:00–11:00

По дороге в офис. **Что важно:** скорость, стабильный вкус, кофе с собой.
**Как говорим:** «Завтраки с 08:00. Кофе с собой — за две минуты».

### Обеденный офисный · 12:00–15:00

Обед в рамках часа. **Что важно:** уложиться по времени и не переплатить.
**Как говорим:** «Обед за 45 минут. Средний чек 2 500 ₸».

### Удалёнщики · 10:00–12:00 и 15:00–17:00

Работают из кафе. **Что важно:** розетки, Wi-Fi, тишина, отсутствие давления «пора освобождать стол».
**Как говорим:** «Розетки у каждого стола. Сидите сколько нужно».

### Поздний ужин · 21:00–23:00

Те, кто закончил поздно: после смены, тренировки, кино. **Что важно:** кухня ещё работает,
а не «остался только кофе». Успеть до закрытия.
**Как говорим:** «Кухня до 23:00. Успеете».

---

## 3. Голос бренда

### Как звучим

**Спокойно и уверенно.** Мы не кричим. Факт сильнее восклицательного знака.

**Конкретно.** Цифры, часы, адреса. «Открыто до 22:00» вместо «работаем допоздна».

**По-человечески.** Пишем так, как говорит бариста, а не как пишет отдел маркетинга.

**Без превосходных степеней.** «Лучший», «уникальный», «непревзойдённый» — запрещённые слова.
Если утверждение нельзя проверить, его не пишем.

### Так говорим — так не говорим

| Так говорим | Так не говорим |
|---|---|
| Открыто до 23:00 | Ждём вас в уютной атмосфере |
| Завтраки с 08:00 | Вкусные завтраки на любой вкус |
| 4,9 из 5 при 678 отзывах в 2GIS | Лучшее кафе Алматы |
| Кухня до 23:00. Успеете | Работаем допоздна |
| 4,9 при среднем чеке 4 500 ₸ | Демократичные цены |
| Сейчас 21:40. Мы ещё открыты | СУПЕР АКЦИЯ! Только сегодня!!! |
| Вечер Шамши Калдаякова, 22 августа, 19:00 | Незабываемый музыкальный вечер |
| Стол бронируется в WhatsApp | Оставьте заявку, и мы вам перезвоним |

### Правила для казахского языка

Казахский — **равноправный язык, а не перевод**. В интерфейсе он набран тем же шрифтом,
того же размера и веса, что русский и английский.

**Пишем живым языком.** Не переводим русскую фразу слово в слово. «Завтрак в восемь.
Ужин в одиннадцать» → «Сағат сегізде — таңғы ас. Он бірде — кешкі ас», а не буквальная калька.

**Проверяем специфические буквы:** ә, ғ, қ, ң, ө, ұ, ү, һ, і. Шрифт обязан их поддерживать.
Montserrat поддерживает — подмножество cyrillic-ext подключено отдельным файлом.

**Не смешиваем алфавиты.** Не подставляем русскую «і» вместо казахской и наоборот.

**Термины оставляем как есть.** «Латте», «капучино», «бранч» не переводим — их так и говорят.

---

## 4. Логотип

### Концепция

Логотип SPOT отражает стиль современного городского кафе: плавные линии и геометрия символизируют
движение и ритм мегаполиса, а точка завершает композицию уверенностью. Он одновременно строгий
и дружелюбный, что делает бренд узнаваемым и располагающим для гостей.

Графика построена на контрасте мягкости и уверенности: округлые формы создают дружелюбный образ,
а чёткие линии добавляют строгости и премиальности. Надпись «city cafe» служит уточнением
и подчёркивает позиционирование бренда как стильного городского пространства.

Ключевая деталь — **лигатура «p» и «o»**: стойка буквы «p» перетекает в замкнутую петлю.
Эта петля читается как точка-spot на карте — место, куда приходят. Её мы используем отдельным знаком.

### Варианты

| Файл | Когда применять |
|---|---|
| `logo/spot-logo.svg` | Основной. Чёрный на светлом фоне. Приоритетный вариант |
| `logo/spot-logo-inverse.svg` | Белый на тёмном фоне и на фото |
| `logo/spot-mark.svg` | Только знак — петля «po». Аватар, фавикон, тиснение, стакан |
| `logo/spot-mark-inverse.svg` | Знак на тёмном |
| `logo/favicon.svg` | Знак в чёрном скруглённом квадрате. Вкладка браузера, иконка приложения |

На сайте логотип подключён как `images/brand/logo.svg` с заливкой `currentColor` — цвет
берётся из темы, поэтому в ночной теме он автоматически становится белым.

### Охранное поле

За основу охранного поля принят **квадрат 50 × 50 пикселей**. Минимальное расстояние от логотипа
до любых изображений, текста или декоративных элементов должно соответствовать этой величине.

Охранное поле защищает знак от визуального шума и гарантирует, что логотип останется читаемым
и узнаваемым в любых форматах и на любых носителях.

### Минимальный размер

| Носитель | Минимум по ширине |
|---|---|
| Экран, полный логотип | 90 px |
| Экран, только знак | 24 px |
| Печать, полный логотип | 25 мм |
| Печать, только знак | 8 мм |

Ниже этих значений надпись «city cafe» становится нечитаемой — используйте знак.

### Чего с логотипом делать нельзя

- Растягивать, сжимать, менять пропорции
- Перекрашивать в цвета вне фирменной палитры
- Добавлять тени, обводки, градиенты, свечение
- Поворачивать под углом
- Класть на пёстрый фон или на фото без затемняющей подложки
- Заключать в рамку, вписывать в плашку произвольной формы
- Пересобирать надпись «city cafe» другим шрифтом
- Разрывать лигатуру «po»

---

## 5. Цвета

Фирменная палитра Spot построена на сочетании контрастных и нейтральных оттенков, которые формируют
современный и динамичный образ бренда. Чёрно-белая база подчёркивает современность, а оранжевый
добавляет эмоциональный акцент.

### Основная палитра

| Цвет | HEX | RGB | CMYK | Где применяется |
|---|---|---|---|---|
| Чёрный | `#0A0909` | 10 · 9 · 9 | 27 · 23 · 23 · 92 | Основной цвет. Логотип, текст, фон, акценты |
| Белый | `#FFFFFF` | 255 · 255 · 255 | 0 · 0 · 0 · 0 | Чистота и открытость. Создаёт пространство |
| Светло-серый | `#E6E6E6` | 230 · 230 · 230 | 9 · 6 · 5 · 0 | Нейтральный. Границы, подложки, минимализм |
| Оранжевый | `#F7931E` | 247 · 147 · 30 | 4 · 41 · 85 · 0 | Акцент. Энергия, движение, тёплая атмосфера |

### Дневная тема · 07:00–19:00

| Роль | HEX | Контраст | Оценка |
|---|---|---|---|
| Фон страницы | `#FBFAF8` | — | — |
| Поверхность карточки | `#FFFFFF` | — | — |
| Утопленный фон | `#F2F1ED` | — | — |
| Основной текст | `#0A0909` | 19,1:1 | AAA |
| Приглушённый текст | `#5C5A57` | 6,1:1 | AA |
| Мелкий служебный текст | `#706D69` | 4,6:1 | AA |
| Граница | `#E6E6E6` | — | — |
| Акцент — плашки и заливки | `#F7931E` | — | Только с чёрным текстом |
| Акцент — текст и ссылки | `#9F5F13` | 4,5:1 | AA |

### Ночная тема · 19:00–07:00

| Роль | HEX | Контраст | Оценка |
|---|---|---|---|
| Фон страницы | `#0A0909` | — | — |
| Поверхность карточки | `#151413` | — | — |
| Приподнятая поверхность | `#1D1B1A` | — | — |
| Основной текст | `#F5F4F2` | 18,1:1 | AAA |
| Приглушённый текст | `#A8A5A1` | 6,5:1 | AA |
| Мелкий служебный текст | `#8B8882` | 4,5:1 | AA |
| Граница | `#2A2826` | — | — |
| Акцент — плашки | `#F7931E` | — | Только с чёрным текстом |
| Акцент — текст и ссылки | `#FBAE4E` | 8,6:1 | AAA |

### Служебные цвета

| Роль | HEX | Где |
|---|---|---|
| Успех | `#1F8A4C` | Индикатор «открыто» |
| Ошибка | `#C6432F` | Индикатор «закрыто», ошибки формы |
| Информация | `#2F6FC6` | Подсказки |

### Ключевое правило по оранжевому

**`#F7931E` на белом даёт контраст 2,3:1 — это ниже любого порога читаемости.**
Чистый фирменный оранжевый годится только для заливок, плашек и графики.

- Оранжевая плашка → текст на ней **чёрный** `#0A0909` (8,7:1, AAA)
- Оранжевый текст на светлом → берём затемнённый `#9F5F13`
- Оранжевый текст на тёмном → берём осветлённый `#FBAE4E`

Тон при этом сохраняется: оба производных получены изменением яркости при неизменных
H = 32° и S = 88 %.

---

## 6. Типографика

### Шрифтовая пара

**Основной — NauryzRedKeds.** Используется для ключевых элементов фирменного стиля: логотипа,
заголовков и акцентов. Именно им набран логотип.

**Дополнительный — Montserrat.** Применяется в тексте и информационных блоках.

### Что из этого используется на сайте

На сайте весь текст набран **Montserrat**. Причина техническая и честная: NauryzRedKeds —
не свободный шрифт, его нельзя выложить в открытую папку сайта, не нарушив лицензию.
Фирменный характер сохраняется там, где он и живёт, — в логотипе, который лежит векторным SVG
и набран настоящим NauryzRedKeds.

Если у сети есть веб-лицензия на NauryzRedKeds, файлы кладутся в `assets/fonts/`, и в
`assets/css/tokens.css` добавляется отдельная переменная `--font-display` для заголовков.
Остальной текст остаётся на Montserrat — так предписывает печатный брендбук.

Montserrat подключён локально, без внешних загрузок: три начертания (400, 600, 800) в трёх
подмножествах (latin, cyrillic, cyrillic-ext). Казахские **ә ғ қ ң ө ұ ү һ і** входят
в cyrillic и cyrillic-ext — оба подключены.

### Шкала размеров

Размеры заданы через `clamp()` — плавно тянутся от 360 px до 1440 px без скачков.

| Роль | Размер | Начертание | Межстрочный | Трекинг |
|---|---|---|---|---|
| Display — первый экран | 44 → 96 px | 800 | 1,04 | −0,03em |
| H1 | 32 → 60 px | 800 | 1,16 | −0,02em |
| H2 — заголовок раздела | 24 → 40 px | 800 | 1,16 | −0,02em |
| H3 — группа меню | 19 → 26 px | 800 | 1,16 | −0,02em |
| H4 — название блюда | 17 → 20 px | 600 | 1,3 | −0,01em |
| Основной текст | 16 px | 400 | 1,6 | 0 |
| Мелкий текст | 14 px | 400 | 1,5 | 0 |
| Подпись | 12 px | 400 | 1,4 | 0 |
| Микро — бейджи, надзаголовки | 11 px | 800 | 1,3 | +0,09em, капс |

### Цены

Цены набираются **начертанием 800** с табличными цифрами (`font-variant-numeric: tabular-nums`),
чтобы столбцы цен выравнивались по разрядам.

Формат: `2 490 ₸` — разделитель тысяч неразрывный пробел, символ валюты после числа через пробел.
Копейки не пишем.

### Правила набора

- Заголовки — не более трёх строк, `text-wrap: balance`
- Основной текст — не шире 62 символов в строке
- Описание блюда в карточке — две строки с многоточием, полностью раскрывается в модалке
- Капслок только для микро-надписей: бейджи, надзаголовки, подписи полей
- Не растягиваем и не сжимаем шрифт искусственно

---

## 7. Фотостиль

### Что снимаем

**Настоящие блюда из своего меню.** Та же посуда, та же подача, та же порция, что получит гость.

**Руки в кадре.** Бариста наливает молоко, гость берёт чашку. Это оживляет кадр.

**Пар над чашкой.** Один из немногих способов показать, что напиток горячий, прямо сейчас.

**Вечерний свет.** Тёплые лампы, отражения в окне, город за стеклом.

**Живые лица гостей.** С их согласия. Не постановочные улыбки в камеру.

### Чего не делаем

- Стоковая пластиковая еда, которой нет в меню
- Пересвеченные кадры с выбитыми белыми пятнами
- Чужие фото: из поиска Google, у конкурентов, из соцсетей
- Тяжёлые фильтры, синие тени, «инстаграмная» насыщенность
- Кадры, где порция заметно больше реальной

### Вечерняя съёмка

Вечер — половина рабочего дня, поэтому вечерние кадры снимаем отдельно и намеренно.

**Источник света — тёплый и один.** Настольная лампа, лампа над баром, витрина. Не включаем
верхний свет: он убивает вечернее настроение.

**Тени оставляем.** Вечерний кадр имеет право быть тёмным. Не вытягиваем тени в ноль.

**Баланс белого — в тепло**, 3000–3500 K. Холодный кадр читается как больничный.

**В кадр попадает окно или улица.** Это доказывает, что снаружи вечер, а внутри ещё работают.

**Показываем время.** Часы на стене, тёмное окно, вечерний город — визуальное подтверждение,
что мы работаем до позднего вечера.

### Технические требования к фото для сайта

| Параметр | Значение |
|---|---|
| Соотношение сторон, меню | 4:3 |
| Разрешение, меню | 1000 × 750 px |
| Формат | WebP + JPEG (запасной) |
| Вес одного файла | до 150 КБ |
| Имя файла | `images/menu/{id}.jpg`, где `id` — из листа «Меню» |
| Загрузка | `loading="lazy"`, `decoding="async"` |
| Alt | Обязателен, на текущем языке |

Фиксированное соотношение сторон обязательно: без него при загрузке страницы вёрстка прыгает.

---

## 8. Применение

### Носители из печатного брендбука

| Носитель | Что учесть |
|---|---|
| **Визитка** | 90 × 50 мм. Чёрная сторона — инверсный логотип по центру. Светлая сторона — адрес, QR, паттерн бледной подложкой |
| **Шоппер** | Крупный логотип по центру, паттерн по нижнему полю |
| **Стаканчик** | Паттерн по всей поверхности, логотип в центральной зоне, знак на крышке |
| **Термос** | Только знак, гравировка или тиснение |
| **Свитшот** | Логотип на груди слева, знак на спине крупно |
| **Вывеска** | Инверсный логотип, контражурная подсветка. Ночью читается — это принципиально |
| **Фартук** | Знак на нагруднике, один цвет |

### Цифровые форматы

| Формат | Размер | Правила |
|---|---|---|
| Пост Instagram | 1080 × 1080 | Логотип в углу, охранное поле соблюдено. Одно сообщение на пост |
| Пост-карусель | 1080 × 1350 | Первый слайд — заголовок, остальные — раскрытие |
| Сторис | 1080 × 1920 | Текст в центральных 80 % кадра, не под интерфейсом |
| Афиша события | 1080 × 1350 | Дата и время крупно. Филиал обязателен |
| Обложка Open Graph | 1200 × 630 | Чёрный фон, белый логотип, оранжевая черта |
| Аватар | 512 × 512 | Только знак в скруглённом квадрате |

### Паттерн

Фирменный паттерн Spot основан на плавных изогнутых линиях, которые повторяют эстетику букв
в логотипе. Эти линии создают ощущение движения и ритма мегаполиса, подчёркивая динамичный
характер бренда.

Графика паттерна перекликается со шрифтовыми формами логотипа: такая же извилистая, мягкая
и пластичная. Благодаря этому паттерн становится не просто декоративным элементом, а частью
единой визуальной системы бренда.

Паттерн может использоваться как фон, акцентная деталь на упаковке, в печатной продукции
или в digital-носителях.

**Правила:**

- Толщина линии 1,5 px при ширине макета 1200 px, масштабируется пропорционально
- Прозрачность на фоне — не выше 12 %, иначе паттерн начинает спорить с текстом
- Никогда не кладём текст поверх плотного участка паттерна
- Цвет линий — только чёрный или белый, не оранжевый

Файлы: `pattern-light.svg` (чёрные линии), `pattern-dark.svg` (белые линии),
`images/brand/pattern.svg` (`currentColor`, подстраивается под тему).

### Тон дня и вечера в макетах

Дневной макет — светлая бумага, чёрный текст, оранжевый акцент точечно.
Вечерний макет — чёрный фон, белый текст, оранжевый акцент со свечением.

Вечерний макет используется для всего вечернего: постов после 19:00, афиш вечерних событий,
вывески. Тема на сайте переключается по времени Алматы автоматически — это оформление,
а не заявление о часах работы.

---

## 9. Что нельзя

Короткий список, который защищает бренд от размывания.

1. **Не писать недоказуемое.** «Лучшее кафе Алматы», «уникальная атмосфера», «непревзойдённый
   вкус» — под запретом. Пишем то, что можно проверить.
2. **Не выдумывать отзывы.** Отзывы берутся только из 2GIS, с именем автора и датой.
3. **Не менять логотип.** Ни цвет, ни пропорции, ни шрифт надписи, ни лигатуру.
4. **Не ставить оранжевый текст на белый.** 2,3:1 — нечитаемо. Только затемнённый `#9F5F13`.
5. **Не использовать чужие фото.** Ни у конкурентов, ни из поиска. Только свои или со свободной
   лицензией.
6. **Не заявлять «халяль», пока это не подтверждено.** Столбец `is_halal` в `menu.xlsx`
   заполняется только по факту сертификации.
7. **Не обещать часы, которые не выдерживаем.** Если филиал закрылся раньше — правим Excel
   в тот же день.
8. **Не переводить казахский дословно.** Живой язык или ничего.
9. **Не строить коммуникацию вокруг рейтинга.** 4,8+ держат 68 % рынка. Это не отличие.
10. **Не заявлять круглосуточность.** Spot работает с 08:00 до 23:00. Ни один макет, пост
    или вывеска не должны обещать «24/7».
11. **Не показывать неоткрытый филиал как работающий.** Пока в `menu.xlsx` стоит
    `coming_soon = да`, у точки нет ни часов, ни брони, ни рейтинга.

---

## Приложение. Где что лежит

```
spot-site/
├─ brandbook.html              интерактивная версия этого документа
├─ brandbook/
│  ├─ brandbook.md             этот файл
│  ├─ palette.svg              палитра одной картинкой
│  ├─ pattern-light.svg        паттерн, чёрные линии
│  ├─ pattern-dark.svg         паттерн, белые линии
│  └─ logo/
│     ├─ spot-logo.svg         основной логотип
│     ├─ spot-logo-inverse.svg инверсный
│     ├─ spot-mark.svg         только знак
│     ├─ spot-mark-inverse.svg знак инверсный
│     └─ favicon.svg           знак в квадрате
└─ assets/css/tokens.css       все цвета и размеры кодом
```

Цвета и типографика продублированы переменными в `assets/css/tokens.css`. При изменении палитры
правится один файл — сайт подхватывает изменения целиком.