# Дизайн система сайта Mammoth Dev Документ предназначен дизайнеру и разработчику сайта Mammoth Dev. Он фиксирует визуальный язык, состав страниц, компоненты и правила реализации на React и Next.js. Основа визуального стиля — чёрный, белый и золото, выразительные заголовки Manrope, спокойный текст Inter и технические подписи JetBrains Mono. Структуру сайта определяет спецификация версии 1.1 от 29 сентября 2026 года. В этой папке создано приложение справочника дизайн системы на Next.js с примерами элементов. В нём работают локальные образцы кнопок, фильтров, формы с валидацией, контролов, FAQ, трёхшагового чек листа и выбора cookies. Полный корпоративный сайт, сервер заявок, отправка писем, PDF отчётов, аналитика и CMS являются следующими задачами. Демонстрация не подтверждает отправку заявки или реальный расчёт бизнес показателей. Дата документа — 5 октября 2026 года. Значения с пометкой **Наблюдение Figma** извлечены из работающего прототипа в Chrome. Значения с пометкой **Рекомендация** дополняют неполную спецификацию состояния, доступности или адаптации. Эти рекомендации не следует представлять как исходные свойства макета. ## Источники и порядок приоритета | Приоритет | Источник | Что определяет | |---|---|---| | 1 | [Спецификация сайта](./Спецификация/Mammoth_Dev_Site_2.0_Spec.docx), версия 1.1 от 29.09.2026 | Страницы, тексты главной, навигацию, CTA, форму и изменения прототипа | | 2 | [Услуги](./Mammoth_Dev_Services.xlsx), [портфолио](./portfolio.xlsx), [чек лист](./Scalability_Checklist.xlsx) | Содержимое услуг и кейсов, исходные вопросы и методику оценки | | 3 | [Прототип Figma Make](https://www.figma.com/make/MamGxFh2cyl0mkFbnovjXz/High-Fidelity-Website-Concept) | Цвета, шрифты, размеры, сетку и характер компонентов | | 4 | Рекомендации настоящего документа | Недостающие состояния, доступность и контракт реализации | Юридический источник: [политика ООО МамонтДев](./Лигал/ПОЛИТИКА_КОНФИДЕНЦИАЛЬНОСТИ_СЕРВИСОВ_ООО_МАМОНТДЕВ_.docx), в документе дата публикации 01.10.2024. Из неё взяты требования к согласию и cookies, а не заключение об актуальности политики. Отзывы: [АО ФИК МЕДИА](<./ Отзывы/Отзыв_Molwe.pdf>), [Brookside Investments Ltd.](<./ Отзывы/Отзыв_SuperBoss.pdf>), [ROKSAGROLIT](<./ Отзывы/Отзыв_Автоматизация_производства.pdf>). В названии папки ` Отзывы` есть начальный пробел. Отзывы подтверждают конкретные высказывания клиентов; они не заменяют методику измерения показателей. Если Figma и DOCX расходятся, переносить из Figma стиль, а состав и содержание брать из DOCX. Таблицы не должны молча расширять утверждённые четыре услуги или возвращать удалённые разделы. ## Вывод по визуальному направлению Сайт должен восприниматься как инженерный партнёр для бизнеса с действующим ИТ продуктом. Уверенность передаётся крупной типографикой, чёткой сеткой, содержательными кейсами и документальными отзывами. Золото служит акцентом для действий, выбранных состояний и небольших маркеров; оно не должно заполнять большие поверхности. Чередовать светлые содержательные секции с тёмными Hero и CTA. На главной использовать короткие блоки, а подробности переносить на страницы услуг и кейсов. Декоративный листинг из прототипа поддерживает инженерную тему, но не подменяет описание результата проекта. Использовать реальные изображения продуктов, проверенные сведения и существующий логотип. Не добавлять вымышленные рейтинги, цифры опыта, количество проектов, портреты клиентов или награды. Статус ПВТ задан спецификацией; рядом нужна ссылка на карточку резидента. ## Страницы и навигация | Страница | Канонический путь по основному тексту DOCX | Состав | |---|---|---| | Главная | `/` | Hero, о компании, 2 услуги, 4 кейса, общий футер | | Услуги | `/services/` | Каталог четырёх услуг | | Услуга | `/services-[service-slug]/` | Выгода, проблема и решение, 3–5 шагов, 2–3 кейса, FAQ, CTA | | Портфолио | `/portfolio/` | Кейсы и собственные продукты, фильтры | | Кейс | `/portfolio/[project-slug]/` | Клиент, задача, решение, результат, технологии, отзыв при наличии, связанные услуги | | Масштабируем ИТ | `/it-scalability/` | Выбор контекста, вопросы, результат и следующие действия | | Контакты | `/contacts/` | Контакты и основная форма консультации | Рекомендация: принять повторяющийся в основном тексте формат `/services-[slug]/` как исходный контракт; его также подтверждают все четыре ячейки C3 в таблице услуг. В Next.js это реализовать четырьмя явными папками страниц с общим шаблоном и данными по slug. Примеры JSON в DOCX используют `/services/[slug]`; при выборе другого формата обновить меню, внутренние ссылки, canonical, sitemap, Schema и redirects вместе. Не создавать две индексируемые версии одной услуги. Ссылка `/checklist/it-scalability/` встречается на странице услуги в DOCX. Рекомендация: все пользовательские переходы вести на `/it-scalability/`, а старую ссылку перенаправить, если она уже опубликована. Блог и `/en/...` описаны как развитие, поэтому их шаблоны допускаются в системе, но не входят в меню запуска. Header: «Услуги», «Портфолио», «Масштабируем ИТ», «Контакты» и CTA «Обсудить проект». Удалить «Блог» и отдельный «Чек лист» из меню прототипа. Логотип в header — ссылка на `/`; favicon — значок вкладки браузера, действие перехода на главную относится к логотипу. ### Контент главной | Элемент | Текст или правило из DOCX | |---|---| | Eyebrow Hero | «ИТ разработка & ИИ» | | H1 | «Масштабируем ИТ-решения» | | Подзаголовок | «Сложность возникает на масштабе. Мы решаем ИТ-задачи любого масштаба.» | | Основной текст Hero | «МамонтДев разрабатывает индивидуальные ИТ-решения для бизнеса и помогает компаниям в масштабировании ИТ-продуктов и трансформации операционной деятельности через ИИ.» | | Primary CTA | «Обсудить проект» → `/contacts/` | | Secondary CTA | «Оценить масштабируемость» → `/it-scalability/` | | Доверие в Hero | «Резидент ПВТ Республики Беларусь» вместо статистики проектов, технологий и лет | | О компании | «МамонтДев возвращает ИТ-решениям возможность масштабироваться, а бизнесу расти» | | Услуги | «Мы предлагаем», две карточки: заказная разработка и ИИ решения | | Портфолио | «Как мы адаптируем ИТ-решения под бизнес», четыре карточки и переход к каталогу | Раздел «Подход команды» с видео CTO удалить с главной согласно DOCX. Компонент Video оставить в системе как необязательный элемент внутренней страницы; его наличие в справочнике не возвращает удалённый блок. ## Цветовые токены | CSS токен | Значение | Статус и назначение | |---|---|---| | `--color-ink` | `#111111` | Наблюдение Figma: основной текст, тёмная поверхность | | `--color-paper` | `#FFFFFF` | Наблюдение Figma: основная светлая поверхность, текст на тёмном | | `--color-surface` | `#F5F5F3` | Наблюдение Figma: вторичная светлая поверхность | | `--color-muted` | `#6B6B6B` | Наблюдение Figma: вторичный текст на светлом | | `--color-border` | `#E3E3E0` | Наблюдение Figma: декоративные границы и разделители | | `--color-gold` | `#C9A227` | Наблюдение Figma: золото, primary CTA и акценты | | `--color-gold-hover` | `#E0C45A` | Наблюдение Figma: hover primary CTA | | `--color-gold-active` | `#B8911E` | Наблюдение Figma: active primary CTA | | `--color-muted-inverse` | `#A8A8A2` | Рекомендация: читаемый вторичный текст на `#111111` | | `--color-gold-ink` | `#806515` | Рекомендация: маленькие золотистые подписи на белом | | `--color-control-border` | `#85857F` | Рекомендация: различимая граница поля ввода на белом | | `--color-success` | `#247A48` | Рекомендация, реализована: текст и пиктограмма успеха на светлом | | `--color-warning` | `#8A6200` | Рекомендация, реализована: предупреждение, отдельное от brand accent | | `--color-error` | `#B42318` | Рекомендация: ошибка поля или запроса на светлом | | `--color-info` | `#245DA8` | Рекомендация, реализована: информационное состояние на светлом | Семантические подложки справочника: success `#EDF6EF`, warning `#FFF6DC`, error `#FDF0ED`, info `#EDF3FC`. Это реализованные рекомендации, не цвета, извлечённые из Figma. Для тёмных секций назначать отдельные проверенные пары текста и подложки; не использовать эти значения автоматически во всех режимах. Статус всегда сопровождать словом, пиктограммой или числом. Локальный расчёт контраста даёт `#6B6B6B` на `#111111` около 3.54:1, а `#A8A8A2` — 7.90:1. `#C9A227` на белом даёт 2.42:1, рекомендуемый `#806515` — 5.54:1. Чёрный текст на золотой кнопке даёт 7.81:1. Поэтому сохранить золото для поверхности primary CTA, а вторичный текст тёмных секций и маленькие подписи светлых секций скорректировать. Для обычного текста ориентир — минимум 4.5:1, для крупного — 3:1 согласно [WCAG 2.2 Contrast Minimum](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html). Светлая рамка `#E3E3E0` на белом имеет около 1.29:1: использовать её для декоративного разделения карточек, но не как единственный признак интерактивного поля или выбранного состояния. ## Типографика | Роль | Шрифт | Размер и интерлиньяж | Вес и трекинг | Статус | |---|---|---|---|---| | H1 | Manrope | около 57.15px при ширине 1137px; line-height 1.08 | 800, `-.03em` | Наблюдение Figma: размер вычислен clamp | | H2 | Manrope | 36/42px; line-height 1.15/1.2 | 800, `-.02em` | Наблюдение Figma: варианты секций | | H3 | Manrope | 19/20px; line-height 1.3 | 700 | Наблюдение Figma | | Body | Inter | 16px / 28px | 400, нормальный трекинг | Наблюдение Figma | | Navigation | Manrope | 15px | 500 | Наблюдение Figma | | Button | Manrope | 15px; line-height 1 | 700 | Наблюдение Figma | | Tag | Manrope | 12px | 600, `.04em` | Наблюдение Figma | | Eyebrow | JetBrains Mono | 11px | 500, `.12em`, uppercase | Наблюдение Figma | | Label поля | Manrope | 13px | 600 | Наблюдение Figma: форма контактов | | Helper и caption | Inter | 14px / 20px | 400 | Рекомендация | | Input и длинные списки | Inter | 16px / 24px | 400 | Рекомендация | Рекомендация для адаптивных заголовков: H1 `clamp(36px, 5vw, 64px)`, H2 `clamp(28px, 3.2vw, 42px)`. Это контракт реализации, а не восстановленная точная формула Figma. На мобильном проверить реальные русские заголовки, переносы и высоту Hero. Таблица задаёт типографику корпоративного сайта и образцов его компонентов. Оболочка справочника использует более компактные редакционные подписи и навигацию, другую компоновку Hero и интервалов; её размеры не заменяют токены корпоративного сайта. Подписи о происхождении значения и инструкции формы должны оставаться читаемыми. Использовать по одному H1 на страницу и последовательную иерархию H2/H3. Не применять uppercase к длинному тексту, названиям услуг и сообщениям об ошибке. Короткие технические подписи допустимы в Mono; ключевая инструкция формы должна оставаться крупнее 11px. В справочнике variable fonts подключены локально через `@fontsource-variable`, включая кириллицу. Имена CSS семейств: `'Manrope Variable'`, `'Inter Variable'`, `'JetBrains Mono Variable'`. Fallback в CSS: `sans-serif` для Manrope/Inter, `monospace` для Mono. Рекомендация для корпоративного сайта: сохранить WOFF2 в проекте и подключить `next/font/local` с CSS variables и `display: swap`. Это делает сборку независимой от загрузки Google Fonts; порядок подключения и файлы описаны в [Next.js Font Optimization](https://nextjs.org/docs/app/getting-started/fonts). В репозитории фиксировать лицензию шрифтов и конкретные версии пакетов. ## Отступы и сетка Наблюдение Figma: контейнер максимум 1280px; секции `padding: 80px 40px`; Hero `96px 40px 80px`; мобильный Hero `60px 20px 56px`. Hero и исторический блок CTO имеют две колонки с gap 64px; карточки услуг и кейсов — две колонки. Рекомендация: базовая единица 4px, шкала `4, 8, 12, 16, 20, 24, 28, 32, 40, 48, 56, 64, 80, 96`. Контейнер `width: min(100% - 2 * gutter, 1280px)`, `gutter: 40px` на больших экранах и 20px на мобильных. Не суммировать gutter контейнера с padding секции повторно. | Ширина | Поведение | Статус | |---|---|---| | от 901px | Полное меню; Hero в 2 колонки; крупные интервалы | Рекомендация на основе наблюдённой границы 900px | | 768–900px | Свернуть меню; Hero в 1 колонку; карточки в 2 колонки при достаточной ширине | Рекомендация | | до 767px | Поля 20px; основные секции в 1 колонку; кнопки могут занимать всю ширину | Наблюдённая граница 767px, уточнение поведения — рекомендация | | до 600px | Карточки и фильтры в 1 колонку; компактные отступы | Наблюдённая граница 600px, уточнение поведения — рекомендация | Рекомендация: проверять 360, 390, 768, 1024 и 1440px. Минимальная поддерживаемая ширина — 320px; на ней не должно быть горизонтального скролла страницы. Для кода и таблиц разрешён внутренний горизонтальный скролл с понятной областью. Текстовые колонки ограничить 60–75 знаками строки; основные описания обычно не шире 680px. Длинные CTA переносить целиком, не обрезать ellipsis. Группы тегов переносить на следующую строку. Сетка задаёт визуальный порядок, DOM должен сохранять естественный порядок чтения. ## Границы и визуальные эффекты | Токен | Значение | Статус | |---|---|---| | `--radius-tag` | 2px | Наблюдение Figma | | `--radius-control` | 4px | Наблюдение Figma: кнопки | | `--radius-card` | 8px | Наблюдение Figma | | `--border-thin` | 1px solid | Наблюдение Figma: карточки и теги | | `--border-button` | 2px solid | Наблюдение Figma | | `--shadow-card-hover` | `0 4px 24px rgba(201,162,39,.08)` | Наблюдение Figma | | `--ring-own-product` | `rgba(201,162,39,.25)` | Наблюдение Figma: выделение собственного продукта | | `--focus-width` | 2px | Рекомендация | | `--focus-offset` | 3px | Рекомендация | Не добавлять сильные чёрные тени, большие скругления и градиенты в стандартные карточки. Выбранное состояние и focus не должны менять размер компонента. Рекомендация: иерархия наложения `base 0`, `header 10`, `dropdown 20`, `overlay 40`, `dialog 50`, `toast 60`; проверить контексты stacking, а не рассчитывать только на число z-index. ## Изображения и иконки Существующий логотип задан [ссылкой из DOCX](https://drive.google.com/file/d/1vL0eElSSdf1DGEA8cJ_OPvxlLpggS82m/view?usp=sharing). До получения исходного векторного файла типографическое имя в справочнике считать временным. Не перерисовывать фирменный знак по памяти. Рекомендация: основной и инверсный варианты, фиксированные пропорции, свободное поле не меньше половины высоты знака. Рекомендация для иконок: одна согласованная библиотека контурных SVG, 20/24px, stroke 1.5–2px; для стрелки кнопки 16px. SVG наследует `currentColor`. Декоративным иконкам назначать `aria-hidden="true"`; кнопка только с иконкой получает понятное `aria-label`. Для превью кейса рекомендация — соотношение 16:10, для видео 16:9; размеры контейнера резервировать заранее. Скриншот интерфейса показывать с `object-fit: contain`, фотографию с `cover` и проверенной точкой кадрирования. Alt описывает содержимое и его смысл; декоративная графика имеет пустой alt. Отсутствующее превью заменять честной заглушкой с названием проекта, а не вымышленным экраном продукта. ## Общие состояния и анимация Все применимые компоненты корпоративного сайта должны поддерживать Default, Hover, Focus, Active/Pressed, Disabled, Loading, Error, Success, Selected и Empty. Это контракт системы; отдельной карточке без действия не требуется Loading, а ссылке не требуется Success. Справочник показывает локальные образцы этих состояний, а не завершённую серверную реализацию всех компонентов. Рекомендация, реализована: переход цвета, фона, рамки и opacity — 200ms, easing `cubic-bezier(.4, 0, .2, 1)`. CSS токены — `--motion-duration` и `--motion-easing`. Не анимировать layout карточек при hover; допустимо лёгкое визуальное выделение рамкой и тенью. `prefers-reduced-motion: reduce` отключает перемещения, масштабирование, smooth scroll и ненужные переходы. На корпоративном сайте spinner допустим только пока есть реальная операция и сопровождается текстом; в справочнике закреплённый Loading образец подписан как демонстрация. `focus-visible` должен быть различим на светлом и тёмном фоне: золото 2px, offset 3px; на светлом проверить контраст и при необходимости добавить тёмный внешний контур. Hover не заменяет focus. Нажатие кнопки — краткое active состояние, выбор радио или фильтра — устойчивое Selected состояние. Контракты ниже — рекомендации для повторного использования; содержимое props поступает из проверенных данных, состояние не зашивается в текст. | Компонент | Ключевые свойства | Варианты и применимые состояния | |---|---|---| | Logo, Nav, Breadcrumbs | `src`, `alt`, `href`; `items`, `currentPath`; `trail` | Light/Dark; hover, focus, current, open/closed | | Hero, FeatureBlock, Panel | `eyebrow`, `title`, `description`, `actions`, `media?` | Light/Dark, с медиа/без медиа; контент без мнимой интерактивности | | ServiceCard, CaseCard | `title`, `summary`, `slug`, связанные записи и медиа | Service/Case/OwnProduct; hover/focus ссылки, absent media | | ReviewCard, Video | `organisation`, `author`, `role`, `date`, `source`; `src`, `poster`, `captions?` | Пересказ/точная цитата; video idle/loading/playing/error | | Tag, FilterGroup, Tabs | `label`, `value`, `selected`, `onChange`; `items`, `activeId` | Static/Interactive; hover/focus/selected/disabled/empty | | Field, Choice, Form | `id`, `label`, `value`, `required`, `helper`, `error`, `onChange` | Text/Email/Tel/Search/Select/Textarea; idle/invalid/pending/success/error | | FAQ, Steps, Progress | `items`; `activeStep`, `completed`, `total` | Static steps/Open FAQ; empty, expanded, completed | | ChecklistRisk, Status | `label`, `severity`, `reason`, `source?` | Success/Warning/Error/Info; риск отличается от индекса сценария | | Tooltip, Dialog, CookieBanner | `label`, `content`, `open`, `onClose`; `consent`, `onChoose` | Hidden/Open; focus/escape; выбор согласия | | Footer, ArticleTemplate | `contacts`, `legal`, `links`, `form?`; поля статьи | Общий/статья без footer формы; отсутствующие необязательные поля | Рекомендация для outline кнопок: hover добавляет слабую нейтральную подложку своего контекста, active усиливает её; цвет текста сохраняет контраст. Disabled снижает визуальный акцент без изменения размеров, Loading сохраняет подпись или её доступное имя. Все неподтверждённые визуальные состояния дополнить в Figma отдельными вариантами до корпоративной реализации. ## Кнопки и ссылки | Компонент | Вариант | Визуальный контракт | |---|---|---| | Button | Primary | Золотой фон, `#111111` текст; hover `#E0C45A`, active `#B8911E` | | Button | Outline light | Прозрачный/белый фон, чёрный текст и рамка | | Button | Outline dark | Прозрачный фон, белый текст и рамка на тёмной секции | | Button | Text | Рекомендация: текстовая кнопка для вторичных действий без перехода | | Link | Inline | Рекомендация: подчёркивание, читаемый цвет и видимый focus | | Link | Arrow | Ссылка карточки с декоративной стрелкой, понятным текстом | Наблюдение Figma: Manrope 15px/700, line-height 1, padding 12px 28px, border 2px, radius 4px, gap 8px. Вычисленная высота около 43px. Рекомендация: добавить `min-height: 44px`, для большой кнопки 48px; маленькая визуальная кнопка также должна иметь область нажатия минимум 44px. Это выбранная цель проекта, а не точная высота исходного макета. Button использует `