Дизайн-система
Единый язык интерфейса
Токены, типографика, кнопки и компоненты, из которых собран сайт. Всё на кастомном CSS: Tailwind v4 + CSS-переменные в globals.css.
01 · Цвета
Палитра
Светлая тема, семантические токены — не сырые hex, а смысловые имена.
bg
Фон
#ffffff
panel
Панель
#ffffff
panel-soft
Панель мягкая
#f4f4f5
heading
Заголовки
#0a0a0a
body
Основной текст
#3f3f46
muted
Приглушённый
#71717a
faint
Едва заметный
#a1a1aa
line
Граница
#e4e4e7
line-strong
Граница сильная
#d4d4d8
accent
Акцент (lib/theme.ts)
#f6d860
accent-ink
Текст на акценте
#0a0a0a
black (тёмные секции)
Фон секций «Работы», «Результат», hero кейса
white / white/5-60
Текст и рамки поверх чёрного
selection
Жёлтое выделение текста
02 · Типографика
Шрифты и размеры
Golos Text — для текста и цифр, JetBrains Mono — для кикеров и меток.
Кикер
Заголовок H1
Заголовок H2 · секция
Заголовок H3 · карточка
Основной текст. Клиенту не нужен сайт — ему нужны заявки. Поэтому сначала задача, потом дизайн.
Приглушённый текст — пояснения и подписи.
Едва заметный текст — вспомогательное.
// mono-строка для меток
Шкала размеров
- text-xsАаКикеры, чипы, подписи
- text-smАаКнопки, теги, ссылки
- text-baseАаОсновной текст, абзацы
- text-lgАаКрупный текст, подзаголовки
- text-2xlАаЗаголовки карточек
- text-3xlАаЗаголовки секций (моб.)
- text-4xlАаЗаголовки секций
- text-5xlАаHero, крупные заголовки
- text-6xlАаГлавный заголовок
Жёлтый маркер
Ключевое слово в заголовке
03 · Кнопки
Кнопки и ссылки
Скругления full, отступ px-7 py-3.5, hover — приподъём -translate-y-0.5.
На чёрном фоне
Жёсткая тень
04 · Чипы
Метки и теги
Моно-шрифт, маленький кегль, округлые капсулы. Два режима: светлый и тёмный.
Светлый режим
Кикер с точкой
Работы
Тёмный режим
Номер кейса
01
05 · Карточки
Карточки и поверхности
Скругления xl / 2xl / 3xl, тонкие границы line, мягкие тени на светлом и жёсткие на тёмном.
Карточка
Заголовок
Основная поверхность: rounded-3xl, border-line, bg-white, shadow-sm.
KPI-чип
98/100
PageSpeed на десктопе
Тёмная карточка
На чёрном фоне
bg-black, border-white/10, hover:border-white/25.
Акцентная плашка
Модалка: border-2 border-black + жёсткая тень shadow-[8px_8px_0_0_var(--accent)].
Список-пункт
Номер-кружок с жёлтой заливкой 15%.
Для «Проблемы» — красный вариант.
Форма
06 · Сетка и эффекты
Контейнер, тени, анимации
Контент в max-w-6xl с отступами px-4 / sm:px-6. Эффекты определены в globals.css.
Мягкая тень
Жёсткая тень
Сетка фона
Класс .grid-bg — 44px, тонкие линии 4.5%.
Анимации
Reveal
Этот блок появился с анимацией fade + slide-up — компонент Reveal с framer-motion (y: 24 → 0, 0.6s, при скролле).