Design Guide
Единый источник правды для бренда JIHAZ.PRO. Используется при разработке продукта, лендингов, презентаций и любых внешних материалов. Открой и копируй переменные.
Логотип
Логотип состоит из словесной марки JIHAZ.PRO и знака — стилизованной буквы «j» в янтаре. Знак работает самостоятельно как иконка: в favicon, в sidebar продукта, в печатях документов.
Основной знак
Знак (для favicon, иконок, печатей)
Минимальный размер
Полный логотип читается от 24px высоты. Знак — от 16px (favicon). Меньше — теряются детали, особенно точка-разделитель в .PRO.
Охранное поле
Свободная зона вокруг логотипа равна высоте знака «j». Никакие элементы не могут заходить в эту зону.
Файлы
Цвета
Палитра построена на тёплой кремовой основе с янтарным акцентом. Янтарь работает как редкая драгоценность — не больше 5–10% площади экрана. Всё остальное — нейтральные цвета чернил и тёплой бумаги.
Brand
Text & Lines
Status
CSS Variables
/* Скопируй в свой :root для продукта */
--bg: #FAF6EE;
--bg-soft: #F2E9D6;
--bg-deep: #EDE2C8;
--ink: #1A1612;
--ink-soft: #443D32;
--ink-mute: #7A7060;
--line: #E8DEC8;
--line-soft: #F0E8D2;
--accent: #D97706;
--accent-soft: #F59E0B;
--accent-deep: #B45309;
--accent-glow: rgba(217, 119, 6, 0.1);
--accent-line: rgba(217, 119, 6, 0.3);Типографика
Три семейства. Fraunces — для крупных заголовков и моментов с характером (часто с курсивом на ключевых словах). Manrope — для интерфейса и чтения. JetBrains Mono — для технических меток, цифр в таблицах и моно-данных.
Type Scale
Italic Accent
Фирменный приём — ключевое слово в заголовке делается курсивом и янтарного цвета. Используй на акцентных словах: «платформа», «проект», «мебельного». Не больше одного em в заголовке.
Font Imports
<!-- В <head> продукта -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">Радиусы и тени
Скруления и глубина — двойная система токенов для всех элементов.
Border Radius
Shadows
Spacing Scale
База — 4px. Шкала: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Отступы между секциями: 80–120px на десктопе, 48–64px на мобильном.
Кнопки
Главная кнопка — тёмная (ink) с янтарным hover. Янтарь как фоновая заливка используется только для высокоприоритетных действий внутри продукта.
Variants
Sizes
Usage
Поля ввода
Поля без декора — белый фон, тонкая граница, янтарный фокус. Метка поля — Caption (UPPERCASE 11px).
Бейджи и чипы
Бейдж — статус в системе. Чип — выбор/фильтр или элемент потока.
Badges
Chips
Карточки
Базовый строительный блок интерфейса. Hover-состояние с поднятием — единый паттерн.
Отображение данных
Таблицы — основной способ показа данных в продукте. Все цифры — табличными числами.
Table
| Название | Тип | Цена | Статус |
|---|---|---|---|
| Кухня | Кухня | 1 160 206 ₸ | Производство |
| Спальня | Шкаф | 479 905 ₸ | Новый |
| Прихожая | Прихожая | 452 607 ₸ | Готово |
Progress
Live Status Bar
Фрейм с уголками
Фирменный паттерн бренда. Используется для группировки важных тематических блоков на лендингах. В продукте — для выделения отчётов или ключевых дашбордов.
Контент внутри фрейма
Уголки с акцентным цветом по углам — четыре круглые точки 8×8px с янтарной рамкой 1.5px.
HTML Pattern
<div class="frame-corners">
<span class="corners-bottom"></span>
<!-- контент блока -->
</div>Eyebrow
Метка-заголовок над секцией или большим блоком. На лендинге — каждая секция, в продукте — над крупными формами/отчётами.
Stat Cells
Большие цифры в Fraunces — фирменный визуальный момент. Используется для KPI, статистики, итогов.
Применение в продукте
Конкретные правила переноса бренда на интерфейс JIHAZ.PRO. Открой каждый экран и проверь по этим пунктам.
Sidebar (левая панель)
rgba(245,158,11,0.08).
Калькулятор и формы
.input компонент. Фокус — янтарная рамка + glow.
badge-dark с надписью "AI" янтарно-жёлтым шрифтом перед сообщением.
Статусы и бейджи
.badge-default — нейтральный, без эмоциональной нагрузки.
.badge-accent — янтарный, главный «активный» статус.
.badge-success — зелёный, не янтарный (важная семантическая разница).
.badge-danger — приглушённый красный.
Графики и аналитика
tabular-nums для столбцов с числами.
Голос и тон
Бренд звучит профессионально, по-деловому, без пафоса. Не «лучший в мире», не «революция», не «уникальное решение». Тёплый, но сдержанный.
Принципы письма
Что можно и что нельзя
Янтарь как акцент
Кнопки в hover, активные строки, статус-чипы, важные цифры, ключевые слова в заголовках (em). Всегда меньше 10% площади.
Янтарь как заливка
Не делать большие янтарные фоны — это утомляет глаз и убивает деловую интонацию бренда.
Один em в заголовке
«Платформа для мебельного рынка». Курсив на самом важном слове.
Два или больше курсивов
«Платформа для мебельного рынка» — теряется акцент, читается визуально шумно.
Тёмный sidebar в продукте
Цвет --ink (#1A1612) — тёплый чёрно-коричневый. Хорошо контрастирует с кремовым контентом.
Синий sidebar
Текущий синий sidebar в продукте противоречит палитре. Заменить на --ink при ближайшей итерации.
Fraunces 500 для крупных цифр
KPI, итоги, big numbers. Засечки + курсив на единицах измерения дают характер.
Inter, Roboto, системные шрифты
Эти шрифты делают сайт «как у всех». Только Manrope + Fraunces + JetBrains Mono.
Тонкие границы 1px
Все карточки, поля, разделители — 1px solid --line. Создаёт ощущение точности и порядка.
Жирные обводки и яркие тени
2–3px бордеры, цветные тени в стиле Material — противоречат сдержанной эстетике.
JIHAZ.PRO · DESIGN GUIDE · v1 · APR 2026