Дизайн-система DPC
Все компоненты, цвета и типографика сайта в одном месте. Источник правды для любых новых страниц.
1. Цветовая палитра
Брендовый cyan + тёмные оттенки + акценты под серии ПК.
2. Типографика
Inter — основной текст, Space Grotesk — display-заголовки.
Заголовок H1 / 60px
Заголовок H2 / 36-40px
Заголовок H3 / 20-24px
Основной текст параграфа. Используем для описаний и контента. Читаемость на тёмном фоне обеспечена цветом ink-300 (#cbd5e1).
3. Кнопки
Иерархия: Primary → Secondary → Ghost.
4. Бейджи и метки
Используются для серий ПК, ролей в команде, тегов.
5. Карточки
Базовый шаблон: bg-ink-925/80, rounded-[28px] / rounded-2xl, border-white/5.
Заголовок карточки
Краткое описание содержимого карточки.
Карточка ПК
Использует радиус 28px вместо 16px (rounded-2xl).
Денис подберёт
С градиентом для главных промо-блоков.
6. Поля форм
Тёмный фон, тонкая обводка, brand-400 при focus.
7. Радиусы и spacing
Стандартные значения через всё.
8. Анимации
Все используют cubic-bezier(0.22, 1, 0.36, 1) для плавности «Apple».
- fade-up — секции при scroll: opacity 0→1 + translateY 40px→0, 0.75s
- stagger — карточки в гриде с задержкой 0.05s между соседями
- tilt-3d — карточки ПК при hover: translateY -6px + лёгкий tilt
- glow-pulse — пульсирующий неон-shadow на акцентах
- float-y — иконки Hero парят: translateY -6px, 5s бесконечный цикл
- page-progress — cyan→purple полоса прогресса прокрутки страницы
- shimmer — CTA-блок с переливающимся градиентом
9. Иконки
SVG inline, stroke-width 2 или 2.5. Размеры 12-28px.
Это страница-источник правды для всех новых разработок. При создании любых новых компонентов — сверяться с этим документом или расширять его.