Design System

Дизайн-система ITG Distribution

Цвета, типографика, компоненты, эффекты и best practices — всё что нужно для поддержки и развития сайта.

Цвета Типографика Компоненты Эффекты Стек Hooks

Цветовая палитра

Пропорция: Graphite Black 35%, White 35%, Gray 20%, Blue Crayola 10%. Красный — только ошибки.

Основные (Guideline 3.1)

Дополнительные (3.3)

Нейтральные (3.4)

Градиенты

Dark Blue → Blue Crayola

Кнопки, gradient-text

Dark animated

CTA Banner background

Subtle selection

Config option selected

Типографика

Suisse Intl Book — заголовки, подзаголовки, CTA. Suisse Intl Regular — основной текст. Fallback: Arial (Guideline 4.3).

HeadlineBook, 58px+, lh 62px, -2px

Технологии без границ

.text-h1Book, tracking -2px

Заголовок первого уровня

.text-h2Book, tracking -0.2px

Заголовок второго уровня

.text-h3Book

Заголовок третьего уровня

.text-subtitleBook, 18px+, lh 26px

Подзаголовок секции

.text-capsBook, uppercase

Капитель — лейблы секций

.text-bodyRegular, lh 18px+

Основной текст параграфов. ITG Distribution обеспечивает предсказуемую поставку, техническую экспертизу и правильную сборку решений для бизнеса.

.text-ctaBook, CTA

Подробнее

Suisse Intl Regular

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Suisse Intl Book

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Компоненты

21 компонентов. Порядок на главной странице создаёт ритм: светлые ↔ тёмные секции, тихие паузы каждые 3-4 блока.

КомпонентОписаниеСтраницы

TopBarТёмная полоска с городами, телефоном, языкомlayout

HeaderSticky навигация с glassmorphism, dropdown, scroll-progresslayout

HeroSplit layout (фото + текст), mesh gradient, hero-fade анимацияглавная

VendorStripSVG-логотипы, marquee, grayscale→color hoverглавная

ValuePropЗачёркнутые боли + решения, spotlight cardsглавная

AboutФото с overlay, статические метрики, CTA с модальной формойглавная, о компании

SolutionsАккордеон + sticky image previewглавная, решения

BreathingPauseОдна фраза на полный экран — пауза для глазглавная

Configurator3-шаговый wizard: задача→масштаб→результатглавная, решения

CatalogСетка товаров с поиском, фильтрами, сортировкой, grid/listкаталог

WhyChooseBento Grid с featured card, spotlight effectглавная

CaseStudyКейс с фото, метриками, таймлайном, trust barглавная

MetricHeroWow-секция с большим числом на полный экранглавная

PartnersMarquee компаний + testimonials с аватарамиглавная

NewsКарточки с цветными полосками по категориямглавная

CtaBannerФото-бэкграунд с overlay, крупный заголовокглавная

ContactFormТёмная форма с категориями, success stateглавная, контакты

ModalFormВсплывающая форма поверх любой страницыглобальный

FooterНавигация, вендоры, контакты, соцсетиlayout

ChatBotAI-помощник: быстрые вопросы, поле ввода, сброс в менюглобальный

BreadcrumbsХлебные крошки на всех внутренних страницахглобальный

Ритм секций (главная)

TopBarHeaderHeroVendorStripValuePropAboutSolutionsPauseConfiguratorCatalogWhyChooseCaseStudyMetricHeroPartnersNewsCTAContactFormFooter

светлая тёмная

Визуальные эффекты

Все анимации на CSS + IntersectionObserver — без библиотек. Easing: всегда cubic-bezier(0.25, 1, 0.5, 1) — мягкий, не bouncy.

Mesh Gradient

3 blob-а с mix-blend-mode: multiply, анимация 18–22s

.mesh-gradient, .mesh-blob

Spotlight Cards

Radial gradient следует за курсором через CSS vars

.spotlight-card::before

Grain Overlay

SVG feTurbulence, opacity 0.03 — текстура живой поверхности

.grain::after

Shine Border

Animated conic-gradient через @property --angle

.shine-border::before

Edge Glow

Мягкие переходы между секциями radial-gradient

.edge-glow-top::before

Glassmorphism

backdrop-blur + rgba bg на header и карточках

.glass, header

Scroll Reveal

opacity 0→1 + translateY через IntersectionObserver

.reveal.visible

Hero Fade

Каскадная анимация через setTimeout + data-delay

.hero-fade.visible

Gradient Text

background-clip: text с blue→violet градиентом

.gradient-text

Scroll Progress

Полоска прогресса скролла scaleX(progress)

.scroll-progress

Hover timing hierarchy

150ms

Кнопки

200ms

Карточки

300ms

Секции

React Hooks

useScrollReveal

IntersectionObserver для .reveal элементов

→ ref → секция-контейнер

useCounter

Удалён — числа отображаются статически

→ —

useSpotlight

Mouse-tracking для spotlight-card эффекта

→ ref → контейнер карточек

useScrollProgress

Прогресс скролла страницы 0→1

→ ref → progress bar элемент

useModalForm

Context для открытия/закрытия модальной формы

→ { isOpen, open, close }

Технический стек

Фреймворк

Next.js 14

App Router, static export (output: 'export')

React 18

TypeScript, strict mode

Стили

Tailwind CSS

Утилитарные классы + CSS-переменные

Smooth scroll

Lenis

duration: 1.2, easing: 1.001 − 2^(−10t)

Иконки

lucide-react

Tree-shakeable SVG icons

Шрифты

Suisse Intl

Book (заголовки, CTA) + Regular (текст), next/font/local

Deploy pipeline

npx next buildcp -r out/ nginxStatic files served by Nginx

ISR mode · Strapi CMS backend · i18n: ru/en · Dynamic sitemap

Антипаттерны

Чего избегать

Цвета вне фирменной палитры (фиолетовый, оранжевый неон)

Искажение или перерисовка логотипа ITG Distribution

Название бренда не «ITG Distribution»

Inter/Manrope вместо Suisse Intl

Градиенты blue→violet — только оттенки синего

Точка после заголовков

Кавычки "лапки" в русском тексте

Низкая контрастность текста на фоне

Правило "души"

✓Бренд: только «ITG Distribution»

✓Палитра Guideline 2026

✓Логотип SVG без искажений

✓Suisse Intl + Arial fallback

✓Красный #EE0C48 — ошибки форм

✓Длина строки 50–80 символов

✓Контрастность текста

✓prefers-reduced-motion