UI-kit / Design System

Живая документация токенов и компонентов. Меняешь в tokens.css — меняется везде.

1. Цвета

--brand-orange#D4612ECTA / Action ONLY

--brand-orange-hot#E8752FCTA hover

--brand-ink#0f0906Headings / trust pills

--brand-cream#F5EEDCWarm paper (accent)

--c-gray-900#2a2621

--c-gray-700#555Body secondary

--c-gray-500#888

--c-gray-300#d8d4cd

--c-gray-100#f5f3ef

--c-white#fff

2. Типографика

Display / Bricolage 800 / var(--fs-display)

Строим забор

H1 / Bricolage 800 / var(--fs-h1)

Строим забор за 7 дней

H2 / Bricolage 800 / var(--fs-h2)

Материалы забора

H3 / Inter 700 / var(--fs-h3)

Что входит в смету

Body lg / Inter 400 / var(--fs-lg)

Забор, ворота, калитка и въезд — одной командой, одной сметой. Приехали и сделали.

Body / Inter 400 / var(--fs-base)

Базовый текст для длинных параграфов, FAQ, описаний материалов.

Small / Inter 500 / var(--fs-sm)

Мелкий supportive-текст и метаданные.

Playfair italic / var(--ff-accent)

который не поведёт

3. Spacing (8-grid)

--sp-1 (4)

--sp-2 (8)

--sp-3 (12)

--sp-4 (16)

--sp-6 (24)

--sp-8 (32)

--sp-12 (48)

--sp-16 (64)

--sp-24 (96)

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

→Получить цену за 1 день Посмотреть работы

Primary: оранжевая заливка, ONLY для главного действия. Secondary: подчёркнутый текст, на тёмном фоне.

5. Чипы (benefit pills)

Гарантия 2 года — в договоре

Замер бесплатно по ЛО

Смета под ключ — без «это не входит»

Рассрочка 0% до 12 месяцев

Тёмный (accent) = главное обещание. Светлый = факт. Штрихованный со звездой (highlight) = промо-акцент без цвета-конкурента.

6. Messenger-бейджи

Используются рядом с фразой «пришлите фото в Max или Telegram».

7. Радиусы и тени

--r-sm (6)

--r-md (10)

--r-lg (14)

--r-xl (20)

--r-2xl (28)

--r-pill (pill)

--shadow-sm

--shadow-md

--shadow-lg

--shadow-cta