Design System v1.0
TGPG — дизайн-система
Premium Industrial Corporate. Глубокий синий + оранжевый акцент + тёмно-серый + белый. Крупная типографика, строгая сетка, сдержанный blur, реальная промышленная фотография.
35%
Тёмный / серый
40%
Белый
15%
Синий
5–7%
Оранжевый акцент
3–5%
Blur / стекло
01 — Палитра
Primary Blue 700#0B4EA2
Основной брендовый · кнопки, ссылки, акценты
Blue 900#062D63
Тёмные брендовые заливки, CTA-band
Blue 800#083A80
Градиенты
Blue 600#1462C4
Hover состояний
Blue 50#F0F6FE
Фоны бейджей
Accent Orange 500#F58220
CTA, active, highlights · не более 5–7%
Orange 600#D96A0C
Hover CTA
Orange 400#FF9A45
Акцент на тёмном
Ink 900#0C0F14
Тёмные секции, футер, hero
Ink 800#15191F
Header, dark cards
Gray 500#6B7480
Вторичный текст
Gray 300#C9D0D9
Границы инпутов
Gray 200#E8EBEF
Линии, разделители
Gray 100#F4F6F8
Soft-секции
White#FFFFFF
Основная контентная область
02 — Типографика · Inter (self-hosted, cyrillic + latin)
clamp(2.75→7rem) / 900Инженерия
clamp(2.25→4.5rem) / 800Заголовок H1
clamp(1.75→3.25rem) / 800Заголовок H2
clamp(1.3→2rem) / 800Заголовок H3
clamp(1.07→1.375rem) / 700Заголовок H4
clamp(1→1.25rem) / 400Лид-абзац для вводного текста секции
1rem / 400Основной текст. Строим, модернизируем и обслуживаем магистральные газопроводы.
.875rem / 400Мелкий текст, подписи, метаданные карточек
.6875rem / 700 · .22emНАДЗАГОЛОВОК СЕКЦИИ
03 — Отступы
--s-1
4px
4px
--s-2
8px
8px
--s-3
12px
12px
--s-4
16px
16px
--s-5
24px
24px
--s-6
32px
32px
--s-7
48px
48px
--s-8
64px
64px
--s-9
96px
96px
--s-10
128px
128px
Вертикальный ритм секции: --section: clamp(64px, 7vw, 128px) · Боковые поля: --gut: clamp(20px, 4vw, 64px) · Максимальная ширина: 1440 / 1680 px
05 — Бейджи и фильтры
Категория2024
СданДоступно
Все13
Магистральные газопроводы4
Демонтаж2
06 — Формы
07 — Карточки
08 — Радиусы, тени, blur
--r-xs
2px · бейджи
2px · бейджи
--r-sm
4px · кнопки, инпуты
4px · кнопки, инпуты
--r-md
8px · карточки, медиа
8px · карточки, медиа
--sh-1
покой
покой
--sh-2
hover
hover
--sh-3
модальные окна
модальные окна
09 — Иконки услуг (SVG, 24×24, stroke 1.4)
s-pipeline
s-repair
s-compressor
s-engineering
s-energy
s-ecp
s-pipes
s-valve
s-steel
Иконки техники (48×48, stroke 2)
e-pipelayer
e-pipetruck
e-crane
e-excavator
e-loader
e-tractor
e-welder
10 — Инвентарь компонентов
Button
Container
Section
Heading
Label
Badge
Chip
Stat
Card
ProjectCard
EquipmentCard
NewsCard
ServiceCard
LicenseCard
LogoWall
Marquee
Filter/Toolbar
SearchModal
Input
Select
Textarea
FileUpload
Navbar
MobileMenu
Footer
Breadcrumbs
Pagination
Timeline
GeoMap
CTA Band
Gallery
SpecTable
11 — Правила
DO
- Крупная типографика и много воздуха
- Реальные фотографии объектов и техники
- Асимметричная сетка проектов
- Контраст тёмных и светлых секций
- Оранжевый — только акцент (5–7%)
- Умеренный blur на стеклянных панелях
- Показывать цифры и доказательства
- Явный следующий шаг на каждой странице
DON'T
- Заливать интерфейс оранжевым
- Избыточный глассморфизм
- Сильно скруглённые карточки
- Длинные текстовые полотна
- Случайные иконки из разных наборов
- Стоковые фото «людей в костюмах»
- Градиенты ради градиентов
- Перегруженная навигация