MODULES® — DESIGN SYSTEM / SPEC v1.0
MODULES.
МОДУЛЬНЫЕ ДОМА / ПРЕМИУМ
ЛИСТ 01 — ТОКЕНЫ И КОМПОНЕНТЫ
СТАТУС: НА СОГЛАСОВАНИИ_
00
ОБОСНОВАНИЕ
СТИЛЯ
Дом «Modules» — это инженерный объект: модуль, каркас, чертёж. Дизайн-язык следует за продуктом — техническая документация, возведённая в эстетику: моноширинная типографика для данных, сверхтяжёлый гротеск для заявлений, рамки-выноски, координатные метки, миллиметровая сетка.
Палитра — почти полный отказ от цвета: угольный фон, костяной свет и один сигнальный оранжевый — цвет строительной разметки и лазерного нивелира. Тёмная тема — базовая (премиум, «ночная стройплощадка»); отдельные секции инвертируются в светлую для ритма.
01
ПАЛИТРА
--ink-0#0A0A09фон dark
--ink-1#141412поверхность
--ink-2#232320карточки dark
--gray#8A877Dвторичный текст
--bone-1#D8D5CBповерхность light
--bone-0#EDEBE4фон light / текст dark
--accent#FF4D00сигнальный
РЕЖИМ DARK (базовый)
bg #0A0A09 · surface #141412 · text #EDEBE4 · secondary #8A877D · line rgba(237,235,228,.16) · accent #FF4D00
РЕЖИМ LIGHT (инверсия секций)
bg #EDEBE4 · surface #D8D5CB · text #0A0A09 · secondary #6B685E · line rgba(10,10,9,.18) · accent #FF4D00
02
ТИПОГРАФИКА
DISPLAY — UNBOUNDED (300–900)
АаБбВв 0123
TEXT / DATA — JETBRAINS MONO (300–700)
АаБбВв 0123 →
H1 · clamp(64→150) / 0.92 / 900ЖИТЬ В МОДУЛЕ
H2 · clamp(44→88) / 0.95 / 800Каталог моделей
H3 · 32–44 / 1.05 / 600Модель M-120
H4 · 24 / 1.2 / 600Заголовок карточки
H5 · 18 / 1.35 / mono 700Подзаголовок в моно
H6 / LABEL · 12 / .18em / mono 500РАЗДЕЛ 04 — ПРОЦЕСС
BODY · 15–16 / 1.7 / mono 400Каждый модуль собирается на производстве при контролируемой влажности и температуре, а на участок приезжает готовым на 90%.
CAPTION · 11 / 1.5 / mono 400РИС. 03 — УЗЕЛ ПРИМЫКАНИЯ МОДУЛЕЙ, М 1:20
03
СЕТКА И
ОТСТУПЫ
SPACING — БАЗА 8PX
s1 · 8
s2 · 16
s3 · 24
s4 · 40
s5 · 64
s6 · 104
s7 · 168
СЕТКА / БРЕЙКПОИНТЫ
Колонки: 12 (desktop) / 6 (tablet) / 4 (mobile)
Межколонник: 24px · поля: 40px / 24px / 16px
Max-width контента: 1440px, рамка по краям
Брейкпоинты: 480 / 768 / 1120 / 1440
Радиусы: 0px везде — только прямые углы
Линии: 1px, rgba(237,235,228,.16)
04
КНОПКИ
PRIMARY
SECONDARY + magnetic-эффект курсора на всех кнопках (сайт)
LINK Смотреть все проекты hover: подчёркивание «пробегает» слева направо
05
ФОРМЫ
06
КАРТОЧКА
МОДЕЛИ
+ БЕЙДЖИ
M-120 / 03 В НАЛИЧИИ
[ ФОТО: ЭКСТЕРЬЕР M-120, 4:3 ]
Модель M-120
ПЛОЩАДЬ
120 м² МОДУЛИ
4 шт СРОК
90 дней
от 14,8 млн ₽ СМОТРЕТЬ →
БЕЙДЖИ
В НАЛИЧИИ A+ ЭНЕРГО СКОРО NEW 2026
КУРСОР (КАСТОМНЫЙ)
крест-прицел + кольцо;
на ссылках кольцо растёт,
на медиа — «СМОТРЕТЬ»
07
НАВИГАЦИЯ
MODULES. КАТАЛОГ ПРОЦЕСС ПРОЕКТЫ КОНТАКТЫ РАССЧИТАТЬ →
Фиксированная, схлопывается в тонкую полосу при скролле вниз, возвращается при скролле вверх. Активный раздел подсвечивается оранжевой меткой-«прицелом». На мобильном — полноэкранное меню с огромными пунктами Unbounded.