FUNDAMENT

Брендбук BY · v0.1 · октябрь 2026

FUNDAMENTСтройПарк

Строительство домов, fundament.by.Аренда строительного оборудования в Минске, stroypark.by. Одна дизайн-система на два бренда: общие шрифты, сетка, компоненты и тёмная тема; различаются только палитра и логотипы.

02 · Цвет

Палитра FUNDAMENTСтройПарк · светлая

Имена токенов одинаковы у обоих брендов. HEX и контраст к bg и inverse считаются на странице из текущих значений (WCAG 2.x).

Пары

Проверенные сочетания

Мелкий акцентный текст на светлом — brand-text, на заливке акцента — on-brand, на тёмном блоке — brand-on-inverse. Hex в вёрстке не пишется — только var(--ds-*).

03 · Типографика

Onest, Golos Text, IBM Plex Mono

Общая для обоих брендов. Заголовки — line-height 1.1, трекинг −.02em; тело — 16.5/1.62; метки — mono, uppercase.

Заголовки, кнопки · 400–700
Onest Аа

--ds-font-head

Текст · 400–600
Golos Аа

--ds-font-text

Цифры, метки · 400, 500
Plex 0123

--ds-font-mono

Шкала

Размеры

--ds-t-heroclamp(32px,4.6vw,60px)
Дом, который стоитТехника на объект
--ds-t-h1clamp(27px,3.2vw,44px)
Проекты и цены
--ds-t-h2clamp(22px,2.3vw,32px)
Как мы работаем
--ds-t-h3clamp(18px,1.4vw,21px)
Сроки и гарантия
--ds-t-leadclamp(17px,1.25vw,20px)
Съешь же ещё этих мягких французских булок да выпей чаю.
--ds-t-body16.5px / 1.62
Основной текст набирается Golos Text. Длина строки — до 66 знаков, абзацы без отступа первой строки.
--ds-t-small14px
Второстепенный текст, подписи, примечания.
--ds-t-label11px · mono · .14em
Кикер · метка поля · 120 м²

04 · Сетка и форма

Шаг 4px, радиус 2px

Контейнер 1280px, промежуток 24px, точка перелома компонентов — ширина контейнера 700px. Одна кривая и одна длительность движения.

Отступы

--ds-s1 … s11

s1 · 4
s2 · 8
s3 · 12
s4 · 16
s5 · 24
s6 · 32
s7 · 48
s8 · 64
s9 · 96
s10 · 128
s11 · 160
Форма

Токены

--ds-container
1280px
--ds-gutter
24px
--ds-margin
clamp(20px,5vw,64px)
--ds-radius
2px
--ds-ease
cubic-bezier(.2,.7,.2,1)
--ds-dur
200ms
Пропорции

Слоты изображений

hero16:9 / 4:5
--ds-r-hero · -m
card3:2
--ds-r-card
portrait4:5
--ds-r-portrait
plan4:3
--ds-r-plan

05 · Компоненты

Один HTML на два бренда

Классы .ds-* из css/components.css. Цвета — только из токенов, поэтому образцы ниже меняются вместе с переключателями.

.ds-nav

Шапка

.ds-btn · .ds-link

Кнопки и ссылки

Обсудить проектАрендовать → Смотреть каталог Прайс → Текстовая ссылка

.ds-inv · inverse

Инверсный блок

Текст — on-inverse-2, акцент — brand-on-inverse.

Позвонить Вопросы
.ds-badge

Бейджи статуса

Нейтральный Готовый проектХит КонцептПод заказ ПостроенВ наличии
.ds-card

Карточки

Готовый проект
Фото фасада3:2

Дом 120

120 м²2 этажа4 спальни
Подробнее →
Построен
Фото фасада3:2

Дом 86

86 м²1 этаж3 спальни
Подробнее →
Концепт
Фото фасада3:2

Дом 154

154 м²2 этажа5 спален
Подробнее →
В наличии
Фото техники3:2

Перфоратор SDS-plus

800 Вт3,1 кгот 25 BYN/сут
Подробнее →
Хит
Фото техники3:2

Бетономешалка 180 л

180 л230 Вот 30 BYN/сут
Подробнее →
Под заказ
Фото техники3:2

Вышка-тура 6 м

6 мдо 250 кгот 40 BYN/сут
Подробнее →
.ds-field

Поля

Перезвоним в течение часа
Проверьте адрес: нет символа @
.ds-params

Параметры

Площадь
120 м²
Этажей
2
Срок строительства
5 мес
Стоимость
от 98 000 BYN
Мощность
800 Вт
Вес
3,1 кг
Сутки
25 BYN
Залог
150 BYN
.ds-acc

Аккордеон

01Как оформить заявку?+
Заполните форму или позвоните — менеджер уточнит детали и перезвонит. Тексты здесь — заглушки.
02Сколько это стоит?+
Цены — в каталоге; итоговая сумма фиксируется в договоре.
03Какие документы нужны?+
Для юрлиц — реквизиты, для физлиц — паспорт.

06 · Правила

Коротко

Полная версия — README.md: подключение, токены, логотипы, тёмная тема, доступность, отклонения.

Hairline, не тени

Карточки, поля и секции разделяются линией 1px hairline или rule. box-shadow в системе нет.

Один акцент

brand — кнопка, статус, номер. Не фон секции и не цвет абзаца; не больше трети макета.

Пары — только проверенные

AA во всех четырёх наборах проверяет npm test. Ошибки — danger и словами, не только цветом.

Логотип — из файлов

Не перерисовывать, не перекрашивать, не набирать шрифтом. На тёмном — тёмная версия, на оранжевом — только белая.