Mutaev · дизайн-система

Графит
и камень.

Тёмный графитовый холст и контейнеры из камня одного стиля. Плита собрана из непрозрачных слоёв внутри панели: свет, дымка над фактурой, сама фактура — одна общая SVG-плитка на весь сайт, которую CSS повторяет через background-repeat, — графитовая подложка и светлая кромка. Прозрачности нет: страница сквозь панель не читается, и цветных точек на контейнерах тоже нет — перфорация осталась только фоном.

Только тёмная темаТекст ≥ 14 pxКасание ≥ 44 pxTailwind v4 · Base UI

01 — Палитра и поверхности

Графит логотипа

background

Подложка

card

Панель (стекло)

panel

Панель тёмная — бар и футер

panel dark

Плита ясеня

panel ash

Светлые чернила

panel-ink

Шампань — единственный акцент

brand

Белый

foreground

Серебро

muted-foreground

02 — Рамка и роли отступов

Одна рамка, интерьер у примитива

Кромка любого контейнера — одно правило: ширина var(--frame-width) (2 px), цвет var(--color-card-edge), без теней и подъёма. Интерьер принадлежит примитиву, а не разметке: панель держит 16 px (--space-card), вложенная плита — 12 px (--space-tile), крупная поверхность — 24 px (--space-panel); медиа-панель оголяется и кадр прижимается к рамке.

Вложенная плита — 12 px, угол концентричен панели

.frame — только кромка, без материала

Реакция цветом, ритм ролями

--space-gutter — 12 px, от 768 px — 32 px: кромка страницы, бар, футер
--space-section — 16 px: ритм блока (.section), между соседними — 32 px
--space-card — 16 px: интерьер панели (.panel)
--space-tile — 12 px: интерьер вложенной плиты (.tile)
--space-panel — 24 px: крупная поверхность, тело модального окна

К началу страницы — рамка становится латунной

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

Меньше шума.
Больше характера.

Чёткий гротеск. Крупные заголовки.

Manrope — один шрифт на весь интерфейс.

Не мельчим: 14 px — нижняя граница. Акценты создаём масштабом, контрастом панели и интервалами. Засечки оставляем только знаку бренда.

04 — Живые компоненты

Кнопки и действия

Один главный акцент. Минимальная зона касания — 44 px.

Поля и обратная связь

Имя

Телефон · пример ошибки

Введите телефон с кодом города или оператора.

Недоступное поле

Выбор и статусы

Отделка фасада

На заказМассив дереваИндивидуально

Проект согласован

Ожидает уточнения размеров

Доступны образцы материалов

Не удалось сохранить изменения

Интерактивный модуль

Сначала —
ваша идея.

Диалог с фокус-ловушкой, закрытием по Escape и возвратом фокуса. Поля с подписями и проверкой заполнения.

Демонстрация интерфейса, не отправка заявки.

05 — Форма столешницы

Одна фактура. Любой контур.

Плитка камня одна на весь сайт: форму задаёт контур блока, а не отдельный файл. Круглая, Г-образная или кривая столешница рисуется тем же тайлом — браузер грузит и декодирует его один раз на страницу.

Круглая

Г-образная

Кривая

06 — Фильтры каталога

Тип помещения

Материал

Отделка фасада

Графит

Тёплый дуб

Кашемир

Показывать только то, что есть в наличии

Кухня в графите

Прямая кухня 3,2 м с фрезерованными фасадами и столешницей из кварцита.

МДФ · Графит

Гардеробная на 4 секции

Каркас под потолок, штанги и ящики под сценарий хранения владельца.

ЛДСП · Тёплый дуб

Загрузка каталога

Так выглядит блок до прихода данных.

Демонстрация фильтров: выбран «Кухни», материал «МДФ», отделка: Графит.

07 — Numbered feature-блоки

01
Точно по размеру
Размеры снимаем по вашему проёму
02
Цельно по стилю
Фактуры и детали в одном характере
03
Полный цикл
От замера до установки

08 — Состояния контролов и компактность

Сегментированный контрол

Одиночный и мультивыбор, доступный и недоступный. 5–7 сегментов, каждый ≥ 44 px.

Select, поля и состояния

Триггер — та же заливка, что у кнопки; попап живёт в слое оверлеев.

Отмечен

Не отмечен

Недоступен

Включён

Выключен

Недоступен

ЗаливкаТишеСтатус

Компактность

Страница сжимается паддингами, а не контролами. Шкала отступов одна на весь сайт: 4-пиксельная сетка, семь ступеней — p-1/p-2/p-3/p-4/p-6/p-8/p-12 = 4/8/12/16/24/32/48 px. Ритм секций держит .section: 16 px у блока, 32 px между соседними; стек внутри панели — gap-2 (8 px). Интерьеры принадлежат примитивам: панель — 16 px (--space-card), вложенная плита — 12 px (--space-tile), крупная поверхность — 24 px (--space-panel). Кромка страницы — роль --space-gutter: 12 px на телефоне, 32 px от 768 px. Кромка контейнера — одна рамка 2 px (--frame-width × --color-card-edge), реакция .lift — только цвет. Скругления — три типа формы Apple (WWDC25 356): контейнер `fixed` 24 px (`--shape-xl`, он же шапка, футер, оверлеи и диалоги), контролы `capsule`, вложенная плитка `concentric` = радиус родителя − паддинг. Кромки достраиваются до суперэллипса там, где движок умеет (`corner-shape: squircle`). Хит-зоны контролов остаются ≥ 44 px (трейл хлебных крошек — исключение: `min-h-6`, см. DECISIONS.md).

.tile

--space-tile · 12 px · интерьер вложенной плиты — принадлежит примитиву

p-4

--spacing-4 · 16 px · базовый модуль: интерьер панели (.panel) и ритм блока

p-6

--spacing-6 · 24 px · роль --space-panel: крупные поверхности, тело модального окна

09 — Хлебные крошки

Демо компонента: страниц каталога ещё нет, маршруты не подключены — в примере показан только вид и семантика (label-иерархия, SF-шеврон, `aria-current`, микроразметка `BreadcrumbList`).

10 — Галерея

Светлые фасады шкафов на графитовом фоне

1 из 3

Одна галерея на весь сайт: свайп-сцена 4:3 с `object-contain`, миниатюры с клавиатурой (стрелки, Home/End, кольцо выбора), на мобильных — счётчик «N из M» без лайтбокса, на десктопе — просмотр с зумом и морфингом сцены (View Transitions). Слайды здесь — SVG-пластины; в портфолио приходят готовые AVIF-нарезки с шириной и высотой.

Геометрия

Контейнер — 24 px, контролы — капсулы и круглые иконки. Все радиусы приходят из токенов. Отступы — одна шкала: p-1…p-12 = 4…48 px; кромка страницы — роль --space-gutter: 12 px на телефоне, 32 px от 768 px. Сжимаются паддинги секций и панелей, контролы при этом не мельчают (хит-зона ≥ 44 px).

Контейнер

Один стиль на весь сайт: стекло — заливка поверх backdrop-блюра, светлый текст внутри, кромка — общая рамка 2 px (токен --color-card-edge), без тени и подъёма. Reduce Transparency превращает панель в непрозрачную плиту, Increase Contrast высветляет саму рамку. Лежит на стекле контрол берёт заливку, а не второй материал.

Фон

Тёмный камень: общий тайл (`--texture-asset`) под дымкой и виньеткой, слой под контентом (`z-index: −1`). Перфорированное поле точек снято — на странице не рисуется ни один canvas. Панели — стекло, поэтому фон читается сквозь них и является их материалом.