Цвет
Палитра взята из моей серии афиш: ночное небо, кобальтовая вода, бирюзовые волны и красный маяк. Синий — атмосфера и свет (фон, свечение, обводки). Красный — сигнал: главная кнопка, цифры, акценты. Бирюза — редко, для статусов. Тёплый «солнечный» — только для бликов.
Signal Red — акцент
Cobalt Blue — свет и атмосфера
Wave Teal и Sun — редкие голоса
Нейтральные
Семантика
Градиенты
--grad-sky · ночное небо--grad-fill · кнопка--grad-stroke · обводка--grad-text · цифры, глифыТипографика
Montserrat — геометрический гротеск, близкий к Poppins из референса, но с кириллицей. Начертания Light / Regular / Medium; трекинг заголовков −4%.
Портфолио
Компоненты
Всё — пилюли. Тень кнопки по спецификации: drop 0 5 10.4 + drop 0 0 30.8 красным 25% и inner 4 5 12.5 чёрным 25%, отступы 24 × 16.
Кнопки
.btn · .btn.ghost (или .secondary) · .btn.quiet · модификатор .small
Чипсы и фильтры
Бейджи и теги
Поверхности
Glow card
.surface-glow — ночь, снизу поднимается кобальтовый свет, в углу — красный уголёк.
Surface
.surface — спокойная плоская карточка с хейрлайном.
Карточка проекта
Эффекты
Свет — главный декор системы. Используется дозированно: один эффект на экран.
.aurora · свечение горизонта.beams · CTAanton
Токены
Подключение: сначала design-system.css, потом стили страницы. Старые имена --gold и --serif оставлены алиасами для админки.
--font | Montserrat → Poppins → system-ui |
--track-tight / -snug / -caps | −0.04em / −0.02em / +0.16em |
--fs-display / -h2 / -h3 | clamp(40–92px) / clamp(32–56px) / 24px |
--radius-sm / --radius / -lg / --pill | 10 / 20 / 28 / 999px |
--pad-btn | 16px 24px |
--stroke | 1.5px — градиентная обводка вторичных элементов |
--shadow-btn | glow-sm + glow-lg + inset-shade |
--gutter / --maxw | clamp(16–48px) / 1200px |
--ease | cubic-bezier(.2, .7, .2, 1) |