Брендбук ZUNFT — цвет
Палитра построена на двух якорных цветах логотипа: меди (copper) и глубокого синего (navy). Это почти комплементарная пара — тёплый акцент против холодной структуры. Бесплатно даёт контраст «мастер / инженерия» и легко расширяется в тона.
1. Идея и распределение
Правило 60 / 30 / 10 — нейтральный фон, синий каркас, медь как акцент.
2. Якорные цвета
Взяты пипеткой прямо из логотипа.
3. Шкала «медь»
50 — самый светлый тон для подложек, 700 — для текста и нажатых состояний.
4. Шкала «синий»
900 — тёмная основа (подвал, hero), 600 — рабочий синий, 50 — фоны и карточки.
5. Нейтрали и служебные цвета
Нейтрали тёплые — чтобы поддерживать медь и не спорить с ней холодным серым.
6. Доступность (контраст WCAG)
Медь 500 нельзя ставить мелким текстом на белом — для текста берём медь 600.
| Пара | Контраст | Норма |
|---|---|---|
| Чернила #182230 на белом | 16.03 : 1 | AAA |
| Muted #64707F на белом | 5.04 : 1 | AA |
| Медь 600 #9A5C22 на белом | 5.35 : 1 | AA |
| Белый на меди 600 #9A5C22 | 5.35 : 1 | AA |
| Медь 500 #B87333 на белом | 3.79 : 1 | Только крупный / UI |
| Синий 600 #0E4A78 на белом | 9.25 : 1 | AAA |
| Синий 800 #0A2C52 на белом | 14.05 : 1 | AAA |
| Белый на синем 600 #0E4A78 | 9.25 : 1 | AAA |
| Медь 300 #E0A06A на navy 900 | 7.25 : 1 | AAA |
| Медь 500 #B87333 на navy 900 | 4.27 : 1 | Крупный / UI |
7. Применение
Кнопки, ссылки и статусы в работе.
8. Правила
Можно
- Держать медь как акцент — не более ~10% площади.
- Текст-ссылки и мелкий текст — синий 600 или медь 600.
- Тёмные блоки — navy 900 / синий 800 с белым и медью 300.
- Нейтрали — тёплые (песок, не серый).
Нельзя
- Мельчить: медь 500 мелким текстом на белом.
- Заливать большие площади медью — палитра «пожар».
- Брать чистый чёрный #000 и холодный серый #ccc.
- Вводить третий насыщенный цвет (красный, зелёный) в декор.
9. Токены → CSS-переменные
Все цвета сайта заданы один раз в :root файла site/src/assets/css/styles.css. Меняешь значение токена — меняется весь сайт. После правки подними версию styles.css?v= в site/src/partials/header.html и собери заново.
| Токен | HEX | Где применять |
|---|---|---|
--copper-500 | #B87333 | Акцент: иконки, маркеры карты, подчёркивания |
--copper-600 | #9A5C22 | Текст и заливки кнопок на белом (AA) |
--copper-300 | #E0A06A | Акцент на тёмном фоне |
--copper-50 | #FBF1E8 | Лёгкая медная подложка |
--blue-600 | #0E4A78 | Ссылки и интерактив |
--blue-700 | #0E3A66 | Заголовки карточек, телефон |
--blue-800 | #0A2C52 | Заголовки h1 / h2 |
--blue-900 | #06213F | Подвал, тёмные секции |
--blue-50 | #F0F6FB | Фон карточек и hero |
--sand | #F7F6F3 | Чередование секций |
--line | #E7E2DB | Рамки, разделители |
--ink | #182230 | Основной текст |
--muted | #64707F | Второстепенный текст |
--ok / --err | #1A7F37 / #B42318 | Статусы формы (успех / ошибка) |
--font-display | Montserrat | Заголовки h1–h4, лого-вордмарк |
--font-body | Inter | Основной текст, интерфейс, формы |
10. Типографика
Две гарнитуры с полной кириллицей: Montserrat для заголовков и Inter для текста. Обе подключены локально (self-hosted, Fontsource variable) — быстро и без внешних CDN.
| Роль | Гарнитура | Размер / вес |
|---|---|---|
| H1 (hero) | Montserrat | clamp(26–42px) · 700 |
| H2 (секции) | Montserrat | clamp(22–30px) · 700 |
| H3 / карточки | Montserrat | 18px · 700 |
| Подзаголовок (lead) | Inter | 16–20px · 400 |
| Основной текст | Inter | 16px · 400 · 1.6 |
| Малый / подписи | Inter | 14px · 400 |
| Метка / caps | Montserrat | 12–13px · 700 · +0.08em |
| Кнопки / навигация | Inter | 15–16px · 600 |
Файлы шрифтов: site/src/assets/fonts/*.woff2, подключение — @font-face в начале styles.css.
11. Иллюстрация и анимация
Стройплощадка на главной — изометрическая 3D-диорама (low-poly). Рендерится в Blender в бесшовный луп и встраивается как <video>. Бренд-цвета остаются главными; натуральные тёплые нейтрали допустимы только внутри сцены и не переносятся в UI.
| Цикл | Действие | Период |
|---|---|---|
| Перенос куба | Кран берёт куб материала со склада и несёт в зону дома | 8.75 с |
| Укладка | В момент установки куба вырастает этаж; последний куб — крыша | |
| Смена участка | Кадр уезжает вправо на следующий участок → бесшовный повтор |
Луп печётся скриптом anim/scene.py (Blender headless) → PNG-серия → ffmpeg → loop.webm / loop.mp4 + poster.jpg в site/src/assets/anim/. На странице — <video autoplay muted loop playsinline>; при prefers-reduced-motion показывается постер. Разметка — site/src/pages/index.html (секция #process).