Styleguide
Руководство по стилю
Все цвета, токены, компоненты и утилиты проекта. Используйте эту страницу как справочник при разработке новых блоков и страниц.
Палитра
Все цвета — CSS-переменные. Правьте assets/css/modules/00-variables.css.
Типографика
Заголовки, тексты, инлайновые элементы. Базовый размер — 16px, межстрочный — 1.6.
Заголовки
H1 — Разработка сайтов и веб-приложений
H2 — Разработка сайтов и веб-приложений
H3 — Разработка сайтов и веб-приложений
H4 — Разработка сайтов и веб-приложений
H5 — Разработка сайтов и веб-приложений
H6 — Development / Design / Support
Текст
Lead-параграф. Используется под заголовком hero или в начале статьи — крупнее и мягче основного.
Обычный параграф. Мы проектируем и разрабатываем сайты, интернет-магазины и веб-приложения. Работаем прозрачно, показываем промежуточные результаты и запускаем проекты в срок.
Приглушённый текст для вторичных подписей, метаданных и подсказок.
Бледный текст для совсем неважных деталей.
Мелкий текст. Используйте класс .text-sm.
Крупный текст. Класс .text-lg.
Инлайновые элементы
Обычный текст, ссылка, жирный, курсив, inline_code, выделение, Ctrl+K, мелкий.
«Хороший сайт — тот, о котором не думаешь, когда им пользуешься».
<?php
// Пример кода
echo "Hello, World!";
Отступы
Шкала отступов — от --s-1 (4px) до --s-12 (96px).
Шкала
--s-1
--s-2
--s-3
--s-4
--s-5
--s-6
--s-7
--s-8
--s-9
--s-10
--s-11
--s-12
Радиусы
--radius-xs
--radius-sm
--radius-md
--radius-lg
--radius-xl
--radius-pill
Кнопки
Базовый класс .btn + модификатор.
Варианты
Размеры
С иконкой и состояния
Группа
Block
Формы
Инпуты, textarea, select, чекбоксы, радио, переключатели.
Поля
Мы не передаём email третьим лицам.
Введите корректный номер телефона.
Textarea
Размеры полей
Чекбоксы / Радио / Switch
Карточки
Базовый контейнер для блоков и превью.
Базовая карточка
Иконка, заголовок, текст. Используется для услуг, преимуществ, статей.
Интерактивная
Реагирует на курсор — подходит для ссылок на услуги.
Подробнее
С тенью
Усиленная тень для акцентных блоков или в hero.
С акцентной рамкой
Привлекает внимание. Хороша для тарифов «рекомендуем».
Flat
Без рамки и фона, для встроенных случаев.
С утилитами
Текст акцентный, снизу — чипы.
Дизайн
Код
SEO
Бэйджи и чипы
Статусы, метки, фильтры.
Badges
Default
Accent
Success
Warning
Danger
Info
Со статусом
Chips
Все
Услуги
Кейсы
Статьи
Уведомления
Информационные сообщения, статусы, предупреждения.
Информация
Мы работаем по договору. Все этапы фиксируются в актах.
Успешно
Заявка отправлена. Мы свяжемся с вами в течение 15 минут.
Внимание
Срок действия вашей заявки истекает через 24 часа.
Ошибка
Не удалось отправить форму. Попробуйте ещё раз.
Нейтральный
Базовый вариант без акцентной окраски.
Таблицы
Для сравнений, тарифов и списков.
| Услуга | Срок | Стоимость | Заказов |
|---|---|---|---|
| Лендинг | 1–2 недели | от 80 000 ₽ | 42 |
| Корпоративный сайт | 4–6 недель | от 250 000 ₽ | 18 |
| Интернет-магазин | 6–10 недель | от 450 000 ₽ | 11 |
| Веб-приложение | по ТЗ | индивидуально | 7 |
Аккордеон
На <details>/<summary> — работает без JS.
Сколько стоит разработка сайта?
Стоимость зависит от задачи. Лендинг — от 80 000 ₽, корпоративный сайт — от 250 000 ₽. Точную оценку даём после брифинга.
Сколько занимает разработка?
Лендинг — 1–2 недели, корпоративный сайт — 4–6 недель, интернет-магазин — 6–10 недель. Сроки фиксируем в договоре.
Что входит в поддержку?
Обновления, мониторинг доступности, резервные копии, доработки по часам. Отчёт — раз в месяц.
Табы
Переключение между блоками контента.
Описание проекта. Рассказываем, что делает продукт и для кого он.
Характеристики: стек, интеграции, сроки.
Отзывы клиентов и метрики.
Иконки
Набор линейных SVG-иконок. Инлайн через <svg> или внешний спрайт.
Прочее
Аватары, прогресс, спиннеры.
Аватары
ИВ
АП
СК
WC
Прогресс
Спиннер
Хлебные крошки
Навигационная цепочка страницы.
Hero-блок
Первый экран страницы.
Разработка сайтов
Создаём digital-продукты, которые работают на бизнес
Дизайн, frontend, backend и поддержка — полный цикл.
Модальное окно
На нативном <dialog>.
Утилиты
Классы-помощники для быстрого прототипирования.
Отступы
Классы: .mt-* .mb-* .p-*, где * ∈ {0, 2, 4, 6, 8}
Flex
flex justify-between items-center
gap-4
Цвет
.c-accent · .c-muted · .c-success · .c-danger · .c-text
Прочее
.text-center .text-right .w-full .rounded .rounded-pill .hover-lift .sr-only
Токены
Шрифты, тени, транзишены, размеры контейнера.
- --font-base
- system-ui, Segoe UI, Roboto, Inter
- --font-mono
- JetBrains Mono, SF Mono, Menlo
- --fs-base
- 16px
- --lh-base
- 1.6
- --shadow-sm
- 0 1px 2px rgba(0,0,0,.25)
- --shadow-md
- 0 8px 24px rgba(0,0,0,.28)
- --shadow-lg
- 0 24px 60px rgba(0,0,0,.4)
- --t-fast
- .15s ease
- --t-base
- .25s ease
- --container
- 1200px
- --header-h
- 72px
Пересобрать main.css из модулей: php tools/build_css.php или открыть /tools/build_css.php.
Капча-ползунок
Перетащите ползунок слева направо — кнопка «Отправить» станет активной. Работает мышью, пальцем и с клавиатуры (стрелка вправо / Enter / Space).
Живой пример — форма с капчей
Состояние 1 — по умолчанию
Состояние 2 — проверка пройдена
Состояние 3 — ошибка (не дотянули)
Разметка
<form>
<!-- ...поля формы... -->
<div class="slider-captcha">
<div class="slider-captcha__fill"></div>
<span class="slider-captcha__text"
data-label="Потяните ползунок вправо"
data-success-label="Проверка пройдена">Потяните ползунок вправо</span>
<button type="button" class="slider-captcha__handle">
<svg class="sc-icon-arrow">…</svg>
<svg class="sc-icon-check">…</svg>
</button>
<input type="hidden" name="captcha_slider" value="">
</div>
<button type="submit" disabled>Отправить</button>
</form>
<script src="/assets/js/slider-captcha.js"></script>Модальные окна — варианты
Базовое, форма, confirm, широкое, bottom-sheet и со стеклянной подложкой.
Открыть
Боковые панели (drawers)
Выезжают справа, слева, снизу и сверху. Управляются классом .is-open + подложкой.
Открыть
Матовое стекло
Подложка с эффектом размытия — .glass-backdrop. Панели — .glass-panel.
Backdrop — кликните кнопку, чтобы показать
Варианты подложки (классы)
- .glass-backdrop
- базовый (55% + blur 14px)
- .glass-backdrop--subtle
- легче (30% + blur 14px)
- .glass-backdrop--dark
- плотнее (72% + blur 14px)
- .glass-backdrop--light
- для светлых сайтов (22% + blur 14px)
- .glass-backdrop--strong
- максимум (85% + blur 24px)
- .glass-backdrop--accent
- акцентный (оранжевый + blur 16px)
Glass-панель поверх градиента
Frosted glass panel
Панель с полупрозрачным фоном, тонкой рамкой и размытием. Отлично смотрится поверх фото, градиентов и сложных фонов.
Варианты панели
.glass-panel — базовый
.glass-panel--light
.glass-panel--strong
