Материалы бренда
Базовый набор для презентаций, рекламы и партнёрских материалов: логотипы, бренд-акцент и системные цвета, типографика (Inter + Geist) и краткие правила использования. Скачивайте файлы в SVG и PNG.
Логотипы
Бренд-акцент
Мшистый зелёный в светлой теме и мятный — в тёмной. Это смысловой акцент: eyebrow секций, hover-кольца primary-кнопки, featured-карточка услуг, шаги method-strip, чекмарки в футере, badge в content-team. Не CTA — основной CTA остаётся на --primary.
--accent-brand
#5A714E
oklch(0.52 0.06 135)
soft
#E0EDD5
strong
#415F30
foreground
#F7F9F6
--accent-brand
#47C496
oklch(0.74 0.13 165)
soft
#003320
strong
#51DAA7
foreground
#05100B
Системные цвета
Светлая и тёмная тема. Нажмите на образец, чтобы скопировать HEX-код.
Background
Основной фон (warm paper в light)
Foreground
Основной текст
Primary
CTA / основное действие
Muted
Вторичные поверхности
Muted Foreground
Вторичный текст
Border
Линии и разделители
Типографика
Основной (body)
Inter
Google Fonts / Variable. Используем веса 400 (Regular), 500 (Medium) и 600 (Semibold). Параграфы, навигация, кнопки, формы — всё на Inter.
Aa
Semibold · 600
Aa
Medium · 500
Aa
Regular · 400
Display (заголовки)
Geist
Vercel / Google Fonts, с кириллицей. Используется для section-title, крупных eyebrow и italic-акцентов в hero. CSS-переменная — --font-serif, имя историческое: фактически это display-sans, а не serif.
Aa
Bold · 700
Aa
Medium · 500
Aa
Regular italic · 400
Поверхности и фактура
Три приёма из светлой темы. В тёмной они отключены: там — плоский bg-card без градиента и шума. Имитировать сайт плоской заливкой #ECEBE9не стоит — ощущение «дорогого матового картона» собирается именно из этих трёх слоёв.
Paper surface
.surface-paper
Тёплый градиент card → background, верхний inset-блик, мягкая warm-shadow. Featured service, MVP, шаги method-strip, trust-партнёры. Эта карточка — пример.
Бумажная фактура
SVG-noise · opacity 0.04
Едва заметная турбулентная текстура поверх body с mix-blend: multiply. Снимает «пластиковость» плоского залива, ~1 КБ inline-SVG.
Тёплые тени
oklch(0.25 0.02 60 / α)
Тени в light переопределены на тёплый коричневатый тон вместо чёрного — иначе на бежевом фоне появляется серо-зелёный осадок. Карточка сверху со shadow-md.
Правила использования
Правильно
- ✓Использовать на контрастном фоне
- ✓Сохранять safe zone вокруг логотипа (минимум высота буквы «I»)
- ✓Использовать предоставленные файлы без изменений
- ✓Выбирать вариант логотипа, подходящий по контрасту к фону
- ✓Применять бренд-акцент в eyebrow, hover-кольцах и featured-блоках — основной CTA остаётся на primary
Неправильно
- ✗Менять пропорции или искажать логотип
- ✗Менять цвета логотипа произвольно — в т.ч. заливать бренд-акцентом
- ✗Размещать на пёстром фоне без подложки
- ✗Поворачивать, добавлять тени или эффекты
- ✗Переносить paper-эффекты и бумажную текстуру в тёмную тему — приём только для light