TERRASAPRO / Брендбук
Брендбукv3
Визуальная система сайта TERRASAPRO. Все примеры на этой странице — живые компоненты сайта, а не картинки.
Версия 3.0
Сентябрь 2026
(01) — Логотип
Шрифтовой логотип
Логотип — слово TERRASAPRO, набранное Onest Medium одним цветом. Без знака, без выделения «PRO» другим цветом, без эффектов.
На светлом · охранное поле = высота «T» × 0.7
На тёмном
- Шрифт
- Onest Medium 500
- Трекинг
- −0.01em в шапке, −0.065em в подвале
- Минимум
- 15 px / 110 px ширины
- Цвет
- Только ink или paper
Так нельзя
✕ Цветное «PRO»
✕ Растягивать
✕ Градиенты и эффекты
✕ На пёстром фото без подложки
(02) — Цвет
Бумага и графит
Палитра почти монохромная — цвет в дизайн приносят фотографии объектов. Нажмите на цвет, чтобы скопировать HEX.
Пропорции на странице
60 / 15 / 222.5 / 0.5
Прозрачности вместо новых цветов: линии — ink/15, неактивные рамки — ink/30, на тёмном — paper/15 и paper/50.
Контраст (WCAG 2.1)
| Пара | Коэф. | Где можно |
|---|---|---|
| ink на paper | 15.2 | Любой текст |
| muted на paper | 5.0 | Любой текст |
| muted на paper-2 | 4.6 | Любой текст |
| paper/50 на ink | 4.6 | Минимум для мелкого текста |
| paper/40 на ink | 3.4 | Только крупные заголовки |
| rust на paper | 4.1 | Крупный текст и маркеры |
(03) — Шрифты
Два шрифта, одна роль у каждого
Оба бесплатные (Google Fonts, OFL), с полной поддержкой кириллицы.
Основной — заголовки и текст
Аа
Onest
Регистр 400 для всего; 500 — только логотип. Большие размеры — с отрицательным трекингом.
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЭЮЯ
абвгдеёжзийклмнопрстуфхцчшщэюя
0123456789 — «» → ↗
Технический — метки и данные
Аа
JetBrains Mono
Только 11 px, прописные, трекинг +0.08em: номера разделов, подписи, характеристики.
(01) — Модели · до 10 б. Бофорт · RAL 7016 · 850 г/м²
Display · H1
15–20vw · 0.84 · −0.06em
H2
5.4vw · 0.95 · −0.045em
H3
2.6–3.6vw · −0.03em
Лид
20 px · 1.35
Текст
18 px · 1.55 · muted
Метка
Mono 11 px · +0.08em
(04) — Сетка
12 колонок во всю ширину
Сайт не ограничен по ширине контейнером — сетка растягивается на весь экран. Метка раздела занимает 3 колонки, содержание — 9.
- Поля страницы
- 20 px · 40 px на ПК
- Межколонник
- 24 px
- Ритм секций
- 12–16vh сверху и снизу
- Скругления
- 0 — везде
Исключение для скруглений — физические объекты (пульт в демо автоматики). Тени не используются; разделение — только линиями 1 px.
(05) — Компоненты
Строительные блоки
Наведите курсор и нажмите — всё работает так же, как на сайте.
Заголовок раздела
метка (NN) — + H2
(02) — Модели
Шесть моделей пергол
Ссылки
.ulink — линия уходит при наведении
Линия сверху + стрелка
ink/30 → ink
Кнопки
Кнопка меню — цвет инвертируется от фона
Главное действие — строка во всю ширину, заливка при наведении
Строка-ссылка
с фото у курсора
Формы
Вопрос-ответ
Ответ раскрывается плавно, плюс поворачивается в минус.
Иконки
→ ↗ ↓ ← ✕ +
Только типографские стрелки и знаки. Никаких эмодзи и наборов иконок. Технические схемы — линией 1.4 px, без заливки.
(06) — Фото
Только реальные объекты
Фотографии — главный цветной элемент сайта. Они показывают конструкцию в работе: веранда, гости, свет, погода.
Пропорции кадра
(07) — Движение
Медленно начать, мягко остановиться
GSAP + ScrollTrigger + SplitText, плавная прокрутка Lenis. При системной настройке «уменьшить движение» анимации отключаются.
expo.out
Появление: текст, фото, элементы списков. 1–1.4 с.
expo.inOut
Переходы: меню, раскрытие фото, линии, аккордеон. 0.7–1.4 с.
Строки
выезжают
Буквы
(08) — Тексты
Факты вместо эпитетов
Говорим как инженер, а не как рекламный буклет: коротко, по делу, с цифрами.
Ветроустойчивость до 10 баллов по Бофорту
✓
Супернадёжные перголы!!!
✕
Выезд инженера — бесплатно
✓
Лучшие цены на рынке
✕
Проектируем, производим, обслуживаем
✓
Мы — лидеры рынка с уникальными решениями
✕
- 01Цифры и названия вместо прилагательных
- 02Без восклицательных знаков и КАПСА в тексте
- 03«Мы» + глагол: проектируем, монтируем, храним
- 04Разделы нумеруются: «(01) — Название»
- 05Кавычки «ёлочки», тире — длинное «—»
- 06Не обещаем того, чего нет в договоре
(09) — Токены
Для разработчиков
Источник правды — src/tailwind.css. Меняете токен там — меняется весь сайт после python3 build.py.
@theme {
--font-sans: "Onest", ui-sans-serif, system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--color-paper: #ece8e1;
--color-paper-2: #e2ddd4;
--color-ink: #131313;
--color-muted: #65615a;
--color-rust: #b4532a;
}
@utility label { @apply font-mono text-[11px] uppercase tracking-[0.08em]; }
/* линии: border-ink/15 · на тёмном: border-paper/15
поля: px-5 lg:px-10 · секции: py-[12vh]–py-[16vh]
ease: expo.out (появление), expo.inOut (переходы) */