Сдержанная экспертиза
Крупная типографика, строгая сетка, светлые и тёмные секции. Золото выделяет главное действие.
Разделы дизайн-гайда
ДИЗАЙН-СИСТЕМАv1.0 · 05.10.2026
Дизайн-гайд
Mammoth Dev.
Инженерная точность.
Понятный язык. Пространство для роста.
Единая визуальная система для сайта: от цвета и типографики до состояний формы и интерактивного чек-листа.
Изучить систему// Сложность возникает на масштабе const design = { heading: "Manrope", body: "Inter", accent: "#C9A227", rhythm: 4 };
01
Основа системы
Визуальный стиль Figma, актуальная структура из спецификации 2.0.
Бизнес раньше технологии
Проблема → решение → подтверждённый результат. Короткая главная и подробные внутренние страницы.
Рост без лишнего шума
Один основной CTA в блоке. Реальные кейсы, спокойный motion, доступные состояния компонентов.
Вывод по макету
Сохраняем чёрный, белый и золото, три шрифтовые роли и геометрический декор. В версии 2.0: статус ПВТ вместо статистики, без CTO-видео и блога на главной. Меню: Услуги · Портфолио · Масштабируем ИТ · Контакты.
Из макета
Считано из стилей живого предпросмотра в Chrome.
РекомендацияДополнение для реализации, адаптивности или доступности.
02
Цвета
Нейтральная основа и один узнаваемый акцент. Нажмите на образец, чтобы скопировать HEX.
Основное действие · Figma
Текст и тёмные секции · Figma
Основной фон · Figma
Вторичный фон · Figma
Наведение · Figma
Нажатие · Figma
Вторичный текст на светлом · Figma
Границы и разделители · Figma
Текст на тёмном · рекомендация
Акцентный текст на светлом · рекомендация
Устойчивый контур · рекомендация
Зона внимания · рекомендация
Ошибка или высокий риск · рекомендация
Информация · рекомендация
НА СВЕТЛОМ ФОНЕАкцент должен читаться.
Gold ink #806515 · 5,54:1 на белом.
НА ТЁМНОМ ФОНЕВторичный текст тоже важен.
Muted inverse #A8A8A2 · 7,90:1 на #111111.
Рекомендуемые коррекции: исходный #6B6B6B на тёмном имеет контраст 3,54:1, а #C9A227 на белом — 2,42:1. Золотая заливка кнопки с чёрным текстом сохраняется.
03
Типографика
Три семейства, три понятные задачи. Все шрифты поставляются локально и поддерживают кириллицу.
01 / ЗАГОЛОВКИ
Manrope
700 · 800
letter-spacing: −0.02emАа Бб Вв
Масштабируем ИТ-решения
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ02 / ОСНОВНОЙ ТЕКСТ
Inter
400 · 500 · 600
16px / 28pxАа Бб Вв
Сложность возникает на масштабе.
Мы решаем ИТ-задачи любого масштаба.
03 / МЕТКИ И КОД
JetBrains Mono
400 · 500
11px / 0.12emAa 01 {}
ИТ РАЗРАБОТКА & ИИ
const growth = await mammoth.audit();| Роль | Desktop / Mobile | Насыщенность | Интерлиньяж |
|---|---|---|---|
| H1 / Hero | 64 / 36 px | Manrope 800 | 1,08 · −0,03em |
| H2 / Секция | 42 / 28 px | Manrope 800 | 1,15 · −0,02em |
| H3 / Карточка | 20 / 20 px | Manrope 700 | 1,3 |
| Текст | 16 / 16 px | Inter 400 | 1,75 |
| Кнопка | 15 / 15 px | Manrope 700 | 1 |
| Метка / Tag | 11 / 12 px | Mono 500 / Manrope 600 | 1,5 |
H1 64/36 и мобильный H2 28 — рекомендуемая унификация. В Figma H1 адаптивный: при ширине 1137 px — 57,15 px; H2 — 36 или 42 px. Подробности и исходные значения — в документе.
04
Сетка и интервалы
Ритм на базе 4 px. Контент выравнивается по общей оси, длинные тексты ограничиваются по ширине.
40 px40 px
1
2
3
4
5
6
7
8
9
10
11
12
12 колонок · рекомендуемая сетка
max-width: 1280px48121624324048648096Mobile
320–767 pxПоля 20 px, одна колонка, секции 56 px. Меню в раскрывающемся блоке. CTA на всю ширину при нехватке места.
Tablet
768–1023 pxПоля 32 px, карточки в 2 колонки. Hero становится одной колонкой при ширине ≤900 px.
Desktop
≥1024 pxПоля 40 px, секции 80 px. Hero и блоки с медиа: 2 колонки, gap 64 px. Карточки: gap 24 px.
12 колонок, tablet-поля и единый ритм — рекомендации. Наблюдаемые брейкпоинты Figma: 600, 767 и 900 px; контейнер 1280 px, поля 40 px, секции 80 px.
06
Карточки и навигация
Общий каркас, ясная иерархия, содержательные теги. Обложки кейсов требуют подготовки.
Разработка ПО
на заказ
Веб-приложения и информационные системы под задачи бизнеса.
Обсудить задачуТИПОГРАФИЧЕСКОЕ ПРЕВЬЮ · ПРИМЕР4Salecommerce / scale
Разработка ПОМасштабирование
4Sale
Обработка прайсов и сопоставление товаров с эталоном на миллионы позиций.
Структура страницы кейсаКарточки: граница 1 px, radius 8 px, padding 32 px. Обложка 16:10 — рекомендация. В XLSX нет готовых preview; пример выше показывает оформление, а не финальный скриншот продукта.
Теги, бейджи и фильтры
Теги описывают контент. Фильтры являются кнопками с выбранным состоянием.
ИИ-решенияАудит и SREНаш продукт · образец✦ Резидент ПВТ Республики Беларусь
Показано услуг: 4 из 4
Разработка ПО на заказ
Веб-приложения и информационные системы под задачи бизнеса.
Индивидуальные ИИ решения для бизнеса
ИИ-помощники, RAG-системы, компьютерное зрение и LLM.
Технический аудит
Оценка узких мест проектов, архитектуры и инфраструктуры.
Масштабирование ИТ решений и архитектуры
Стабилизация текущих систем и подготовка к росту нагрузки.
Навигация сайта 2.0
Одна модель для всех страниц. Активная ссылка дополнительно обозначена линией.
ПАГИНАЦИЯ / ПРИМЕР
ТЕНЬ И РАДИУС
Card / 8 px0 4px 24px · gold 8%
ИКОНКИ
16 / 20 / 24 px · SVG · stroke 1,5–2 px
FAQ
Длинный ответ остаётся читаемым. Раскрытие работает с клавиатуры.
С чего начинается работа?
С целей и задач бизнеса: важно понять процессы, текущую систему и перспективы роста, затем выбрать подход к решению.
Можно доработать существующую систему?
Услуги предусматривают работу с существующим кодом, включая legacy и vibe-code. Технический аудит помогает сравнить доработку с переписыванием.
Что показывать в описании технического аудита?
Проблему клиента, процесс оценки, результаты, связанные кейсы и следующий шаг. На странице услуги предусмотрены 3–5 вопросов и ответов.
ОТЗЫВ / КРАТКОЕ СОДЕРЖАНИЕ
Механизмы работы с корпоративным хранилищем сократили время обучения новых сотрудников почти вдвое.
Brookside Investments Ltd.Sylvia Meadows · Director · 25 июня 2026
По предоставленному отзыву SuperBoss. «Почти вдвое» — оценка клиента, без округления до точных −50%.Логотип и медиа
Переиспользовать оригинальный знак по ссылке из спецификации. В этом справочнике — текстовое имя бренда. Реальные обложки, соцсети и иллюстрации подключаются после подготовки. CTO-видео отсутствует в запуске 2.0; шаблон медиа остаётся для будущих статей.
07
Формы и поля
Минимум данных для консультации. Подписи над полями, ошибки рядом с причиной, согласие не предвыбрано.
КОНСУЛЬТАЦИЯРасскажите
Расскажите
о вашей задаче.
Имя, один способ связи и необязательное сообщение. Никаких обязательных бюджетов или реквизитов.
Локальный пример
Ввод остаётся в этом компоненте. Здесь проверяем валидацию и состояния, без отправки заявки.Библиотека контролов
Поиск, select, checkbox, radio, switch и дата/время. Общие компоненты для будущего расширения.
Образец необязательного поиска. 4 услуги в демо.
Необязательный select для расширенных форм.
Checkbox
Независимый выбор; не заменяет обязательное согласие.
Анимация в демо
Образец switch. Системный reduced motion учитывается отдельно.
Необязательный образец date; бронирование не выполняется.
Необязательный образец time. Часовой пояс — Минск.
Дополнительные элементы для развития сайта. В основной форме нужны имя, один контакт, сообщение и согласие.
Согласие на cookies
Образец двух равноправных действий. Аналитика подключается только после реализации выбора.
08
Чек-лист и статусы
Три шага, сохранение ответов при возврате и два сценария результата. Значение всегда сопровождается текстом.
Пример интерфейса — методика из XLSX подключается отдельно.
- Тип проекта
- Вопросы
- Результат
Шаг 1 из 3
Семантические состояния
Цвет помогает ориентироваться; текст и знак передают смысл самостоятельно.
Устойчивый контур
индекс ≥ 0,80Зона внимания
0,50 ≤ индекс < 0,80Высокий риск
индекс < 0,50Информация
Пояснение к результатуОграничение методики XLSX
Зелёная зона достижима только для одного из восьми сочетаний типа и сценария. Порог не меняем в дизайне. Индекс не следует представлять как вероятность успеха или измеренную готовность продукта.
Ничего не найдено
Попробуйте другую услугу или сбросьте фильтры.
Loading / размеры зарезервированы
Ошибка загрузки
Не удалось загрузить данные
Сохраняем введённые ответы и предлагаем повторить действие.
09
Motion и доступность
Короткие переходы объясняют действие. Интерфейс доступен без мыши, анимации и различения цветов.
Цвет, фон и граница кнопки.
Без скачков размера и отступов.
Видимый контур с offset 3 px.
На любом светлом и тёмном фоне.
Минимальная рекомендуемая зона нажатия.
Текст не обрезается при zoom 200%.
01
Контраст 4,5:1 для обычного текста; 3:1 для крупного текста и значимых границ контролов.
02
Клавиатура Tab, Shift+Tab, Enter, Space. Мобильный диалог: Escape, удержание и возврат фокуса.
03
Семантика Один H1, последовательные заголовки, label и fieldset, aria-live для статуса, описанные ошибки.
04
Меньше движения prefers-reduced-motion отключает плавный scroll, появления и декоративную анимацию.
Численные требования — рекомендованный ориентир WCAG 2.2 AA. Полная проверка корпоративного сайта выполняется после его реализации.
10
Структура и передача
Дизайн-документ, токены и работающие React-примеры находятся в этой папке.
РЕАЛИЗАЦИЯ
Next.js App Router
TypeScript · CSS custom properties
Локальные шрифты · семантический HTML
app/ page.tsx globals.css components/ guide-interactions.tsx lib/ design-tokens.ts DESIGN_GUIDE.mdСкачать полный гайд
Состав страниц сайта
/Hero → о компании → 2 услуги → 4 кейса → footer/services/4 услуги, затем отдельные SEO-страницы/portfolio/[slug]/Задача → решение → результат → стек → связи/it-scalability/Тип проекта → 6 вопросов → 2 сценария/contacts/Контакты и форма консультации
На этом этапе реализован справочник дизайна. Корпоративные страницы, CMS, серверная отправка и методика расчёта чек-листа — следующий этап.
Что уточнить перед реализацией сайта
- URL услуг. Основной текст и XLSX задают /services-[slug]/; JSON-примеры — /services/[slug]/. Выбрать канонический путь и редиректы.
- Адрес. Кабинет 231-54 в спецификации и 213-54 в политике. Сверить; sales email и email юридических обращений имеют разные роли.
- Контент. Подготовить 16 превью, оригинальный логотип, аккаунты соцсетей и единый набор тегов услуг.
- Чек-лист. Подтвердить шкалу и доступность зелёной зоны. Затем перенести коэффициенты и риски без изменения смысла.
ИСТОЧНИКИ
Прочитано и сопоставлено
Спецификация v1.1 от 29.09.2026 · Mammoth_Dev_Services.xlsx · portfolio.xlsx · Scalability_Checklist.xlsx · 3 PDF-отзыва · политика конфиденциальности.
High-Fidelity Website Concept / FigmaВсе исходные документы сохранены. Точные ссылки, листы таблиц, компонентные контракты и рекомендации — в DESIGN_GUIDE.md.