Новинка
Эмаль
ПФ-115 глянцевая
В наличии
690 ₽
Дизайн-система · версия 3 · октябрь 2026
Коломенские краски
Сайт производителя лакокрасочных материалов. Рабочая область 1680px, резиновая вёрстка 360–1920px. Одна линия, два цвета, квадрат. 19 компонентов на токенах, светлая и тёмная темы.
#D20525 #1A1A18 #FFFFFF #F4F3F1
3. Токены
Ни одного значения «на глаз»
Все цвета, шрифты, отступы, скругления и длительности живут в одном месте — на :root и в переопределении для тёмной темы. Переключатель в сайдбаре — это html[data-theme="dark"], и он перекрашивает все 19 компонентов одновременно.
Цвет — 20 токенов, светлая и тёмная темы
brand#D20525 / #D20525
Главная кнопка, рамка-знак, баннер.
brand-hover#B0041F / #E0263F
Наведение на красные заливки.
ink#1A1A18 / #F4F3F1
Весь текст, обводки, вторичная кнопка.
ink-muted#5E5B55 / #A8A49C
Подписи, метаданные, артикулы.
surface#FFFFFF / #1A1A18
Главный фон, логотип на белом.
surface-alt#F4F3F1 / #242421
Чередующиеся секции, фон фото товара.
surface-ink#1A1A18 / #2A2926
Подвал, тёмный баннер, тост.
brand-text#D20525 / #FF5468
Красный ТЕКСТ: метки, ссылки, акцент.
brand-tint#FBE7EA / #3A1A1E
Мягкая подложка акций, выбранной строки.
on-ink#FFFFFF / #F4F3F1
Текст и иконки на surface-ink.
on-ink-muted#BDB9B2 / #A8A49C
Вторичный текст в тёмных блоках.
line#DEDBD5 / #3A3935
Декоративные разделители и рамки.
line-strong#8E8A83 / #7A776F
Границы полей ввода, чекбоксов.
success#1F7A45 / #4FBF7F
«В наличии», «Заказ оформлен».
warning#8A5A00 / #E0A63A
«Под заказ», «Осталось мало».
error#A8041E / #FF7A88
Ошибки. Темнее бренда, всегда с текстом.
Типографика — 9 ролей, резиновые от 360 до 1920
Краски, которые держат цвет
Эмаль ПФ-115 глянцевая
Каталог продукции
1 290 ₽
ПФ-115 глянцевая
Производим краски в Коломне — для дома, дачи и производства.
Эмаль ложится ровно, без потёков, высыхает от пыли за 2 часа. Пересчёт сразу при вводе, без кнопки «Рассчитать».
Банка 0,9 кг · расход 100–140 г/м² · ГОСТ 6465-76
Краски
В корзину
Шрифты: --font-display Montserrat, «Helvetica Neue», Arial · --font-sans Inter, «PT Sans», system-ui
Ступени близости — 5 уровней
gap-sclamp(12px, 0.69rem + 0.26vw, 16px)
Внутри группы: метка → заголовок, строки карточки.
gap-mclamp(16px, 0.88rem + 0.51vw, 24px)
Заголовок → текст, поле → поле, кнопка → кнопка.
gap-lclamp(24px, 1.15rem + 1.54vw, 48px)
Между блоками внутри секции; padding рамки и баннера.
gap-xlclamp(32px, 1.31rem + 3.08vw, 80px)
Шапка секции → содержимое; между крупными модулями.
section-yclamp(64px, 2.85rem + 5.13vw, 144px)
Между секциями.
Скругления — 3 ступени, знак почти острый
radius-00 · рамка-знак, плашки, баннеры
radius-sm2px · кнопки, поля, теги
radius-md4px · карточки, модалки
radius-full999px · точка-индикатор наличия
4. Компоненты
19 компонентов, одна шкала
Все компоненты ниже — живые, на токенах и адаптиве. Каждый в порядке таблицы из раздела 4 спецификации. CSS изолирован по секции, JS только в Tabs и Calculator.
4.1 Grid
Сетка 12 / 8 / 4
Рабочая область 1680px, 12 колонок на десктопе, 8 на планшете, 4 на мобильном. Брейкпоинты только для перестройки, не для размеров.
kk-span-6 — половина рабочей области
kk-span-3
kk-span-3
4.2 Button
Главная, вторичная, ссылка, неактивная
Одна красная кнопка в видимой области, остальные — вторичные или ссылки. Текст — глагол, 1–3 слова. Без «таблеток».
4.3 Tag
Метка, новинка, мягкий, контур, наличие
Прописные Montserrat с разрядкой — голос бренда. На одной карточке — не больше одной красной заливки. Состояния не только цветом: наличие = точка + слово, под заказ = слово с цветом warning.
Фасадные краски Новинка −15% Для металла В наличии Под заказ
4.4 Header
Z-паттерн: знак слева, корзина справа
Липкая шапка, белая, с нижней линией. Активный пункт и наведение — красная линия 2px под словом, «прокрашивается» слева направо. Счётчик корзины — квадратная красная плашка.
Коломенскиекраски
Лакокрасочный завод в Коломне. Розница, опт, колеровка под заказ. Работаем с 2000 года.
© 2000–2026 Коломенские краски. Завод в Коломне.Политика конфиденциальности
4.6 Breadcrumbs
Хлебные крошки с линией
Разделитель — короткая горизонтальная линия 12×2px цвета line-strong, а не «/» или «›». Текущая страница — не ссылка, с aria-current.
4.7 Hero
Первый экран, Z-паттерн
Display-заголовок прописными с одним акцентным словом в brand-text. Справа — фото в большой рамке-знаке с просветом в левом нижнем углу. На планшете складывается в одну колонку.
Лакокрасочный завод · Коломна
Краски, которые держат цвет
Производим эмали, грунты, фасадные и интерьерные краски на собственном заводе в Коломне с 2000 года.
4.8 Frame
Рамка-знак, просвет в углу
Квадрат из логотипа, разомкнутый в левом нижнем углу. Одна на экран. Прямые углы (radius-0), толщина frame-w 4→8px.
Каталог
Краски для дома, дачи и производства
Выберите, что красим — подскажем состав, расход и нужный грунт. Подберём оттенок по каталогу RAL или по вашему образцу.
4.9 Features
Преимущества, линия вместо плашки
Над каждой колонкой — линия 2px ink, затем крупная красная цифра. Без иконок и фонов — это не карточки, а «факты на полке».
26 лет
Своё производство
Завод в Коломне с 2000 года. 4 цеха, своя лаборатория.
2 000+
Оттенков по RAL
Колеруем от одной банки по каталогу или образцу.
от 1 дня
Срок заказа
Готовая — в день оплаты. Под заказ — от 1 дня.
ГОСТ
Паспорт качества
Сертификаты и паспорта на каждую партию.
4.10 CtaBanner
Красный призыв, тёмный призыв
Прямые углы, без декора. Акцент — сам цвет плашки. Один красный на страницу. Между баннерами — зазор не меньше gap-l (внутреннее ≤ внешнего).
Нужен оптовый прайс?
Пришлём цены для строительных магазинов, подрядчиков и производств. Отсрочка для постоянных партнёров.
Подберём цвет по образцу
Принесите кусочек покрытия или пришлите код RAL — заколеруем под ваш оттенок от 0,9 кг.
4.11 ProductCard
Карточка каталога, 4 ступени плотности
Метка → название → фасовка → цвета → наличие → цена + кнопка. В покое — рамка line, тень только при наведении. Цена 32px (h3) — самый крупный шрифт на карточке.
Фасадная
Акриловая всесезонная
В наличии
1 290 ₽
Грунт
ГФ-021 красно-коричневый
В наличии
490 ₽
Интерьерная
Акриловая для стен
В наличии
820 ₽
4.12 BuyBar
Панель покупки, большой палец
На мобильном главное действие — внизу, в зоне большого пальца. Кнопка на всю оставшуюся ширину, высота 48px, учитывает safe-area-inset-bottom. На десктопе — скрыта.
Карточка товара
4.13 ColorSwatch
Образец цвета, рамка ink
Цвет выкраски — контент, не токен (единственное место, где «чужие» цвета легальны). Выбранный — рамка ink 2px, не красная: красный занят брендом.
Белая ночь
RAL 9010
Слоновая кость
RAL 1015
Мохово-зелёный
RAL 6005
Красно-коричневый
RAL 8012 · выбран
Синяя лагуна
RAL 5015
Чёрный янтарь
RAL 9005
4.14 Calculator
Калькулятор расхода, живой JS
Пересчёт сразу при вводе, без кнопки «Рассчитать». aria-live="polite" на результате. Красная линия сверху у результата — та же фирменная линия.
Калькулятор расхода
Число слоёв
Понадобится
10,4 кг
4.15 Tabs
Вкладки, живой JS
Активная вкладка — ink + красная полоса 4px под словом на общей линии. Без скругления, без фона — это линия, не плашка.
Эмаль ПФ-115 для защиты и отделки деревянных и металлических поверхностей внутри и снаружи помещений. Образует прочное глянцевое покрытие, устойчивое к атмосферным воздействиям.
4.16 Accordion
Аккордеон, красный «+»
Нативный <details> — без JS. Вопрос — h4 (18→22px), строка не ниже 48px, справа красный «+», при открытии поворачивается в «×».
Сколько краски нужно на 10 м²?
Для эмали ПФ-115 — около 1,2–1,4 кг на два слоя. Точнее посчитает калькулятор расхода на странице товара: задайте площадь и число слоёв, получите нужный объём и количество банок.
Можно ли заколеровать одну банку?
Да, колеруем от 0,9 кг по каталогу RAL или по вашему образцу. Срок колеровки — от 1 рабочего дня, готовую продукцию отгружаем в день оплаты.
Какие сроки доставки в регионы?
Отправляем транспортными компаниями по всей России. До терминала в Коломне — бесплатно, далее по тарифам перевозчика. По Москве и области — собственная доставка, 1–3 дня.
4.17 SpecTable
Характеристики, две колонки
Название — ink-muted, значение — ink с tabular-nums. Без зебры, без рамок по бокам. Единицы — неразрывный пробел, диапазоны — короткое тире.
| Основа | Алкидная |
|---|---|
| Степень блеска | Глянцевая |
| Расход на один слой | 100–140 г/м² |
| Высыхание от пыли | 2 ч при +20 °C |
| Фасовка | 0,9 кг · 2,7 кг · 20 кг |
| Стандарт | ГОСТ 6465-76 |
4.18 Input
Поле, список, ошибка
Подпись всегда над полем, не плейсхолдер. Фокус — рамка ink 2px, без красного. Ошибка — рамка error + подсказка, что исправить, а не «Неверный ввод».
4.19 Checkbox
Чекбоксы и радиокнопки
22px, вся строка не ниже 48px (закон Фиттса). Рамка line-strong 2px, отмеченные — заливка brand с белой галочкой. Чекбокс квадратный, радио — круг (единственный круг в бренде).
Назначение
Блеск
4.20 Notice
Уведомления, иконка + слово
Состояния не только цветом: наличие = точка + слово, ошибка = рамка + текст. Тост — тёмный, скрывается через 5 с. Защита от ошибок: после удаления — кнопка «Отменить».
Цвет на экране может отличаться от реального. Закажите выкраску у менеджера.
Заказ принят. Позвоним в течение часа.
Под заказ. Колеровка займёт 1 рабочий день.
Не отправилось. Проверьте телефон и попробуйте ещё раз.
Товар удалён из корзины
