02Дизайн-системы

Полировка поверхностей: бордеры, тени, радиусы как у премиум-сайтов

Конкретные значения, которые отличают «сделано в Figma за час» от премиума. Subtle borders 1px, тени с низким blur, шкала радиусов 4/8/12, никаких неоновых градиентов.

Премиум-сайт от среднего отличают не палитра и не шрифт, а калибровка поверхностей: какой именно бордер, насколько мягкая тень, какой радиус. Эти значения предсказуемо отличаются между «сделано за час» и «продумано».

Текущие токены: {{current_tokens}}

1. Бордеры

Контекст	Премиум	Анти-пример
Карточка	`1px solid hsl(0 0% 90% / 1)` (light) или `1px solid hsl(0 0% 100% / 0.08)` (dark)	2px solid #000
Inputs	`1px solid border-default`, на focus → border-accent + ring 2px subtle	2px solid blue glow
Divider	`1px solid border-default` с opacity 0.4	`---` через дашборд
Strong border (hover)	`1px solid border-strong` (вид +1 шаг контраста)	переход на 3px

Правила:

1px всегда, не 2px (2px читается как «учебник дизайна 2010»)
В тёмной теме — бордер с opacity, не сплошной серый
Hover повышает контраст бордера, не толщину

2. Тени

Контекст	Премиум	Анти-пример
Карточка (rest)	`0 1px 2px rgb(0 0 0 / 0.04)` или совсем без тени	`0 10px 30px rgb(0 0 0 / 0.3)`
Карточка (hover)	поднять элемент на translateY(-1px), shadow остаётся subtle	shadow становится огромной
Modal	`0 24px 48px -12px rgb(0 0 0 / 0.18)` + `0 0 0 1px border`	drop-shadow с blur 60px
Sticky header	`box-shadow: 0 1px 0 0 border` (фактически граница, не тень)	floating с blur

Правила:

Тени низкие и тонкие: blur < 8px для маленьких элементов, < 48px для модалок
Opacity < 0.2 всегда
Никогда не использовать coloured shadow (shadow-blue-500/30) если это не намеренная игра
Тени в dark mode почти не нужны — глубина через тон background

3. Радиусы

Уровень	Значение	Использование
sm	4-6px	inputs, small chips
md	8-10px	buttons, code blocks
lg	12-16px	cards, modals, panels
xl	20-24px	hero blocks, large containers (редко)
full	9999px	pills, badges, avatars

Правила:

Шкала ≤ 4 значений, не плодить
НЕ использовать промежуточные значения (rounded-xl где xl=12-px-это-просто-другой-tier — это путаница)
Inputs и кнопки должны быть в одной шкале: если input radius 8, button radius 8 — не 12 vs 6
Pills и avatars — rounded-full (никогда rounded-3xl пытаясь имитировать full)

4. Градиенты

Премиум: subtle, монохромные, в фоне. Анти: neon, многоцветные, в hero как баннер.

✅ bg-gradient-to-b from-bg via-bg-elevated to-bg — едва заметный градиент глубины
✅ Спокойный radial-gradient в фоне hero, низкая opacity
❌ bg-gradient-to-r from-purple-500 via-pink-500 to-blue-500 — это 2018 startup-vibe
❌ Анимированные multi-color градиенты (если ты не Anthropic с их фирменным мото)

5. Цвета поверхностей

Премиум-стек обычно использует:

--bg (основной фон)
--bg-elevated (поднятый фон: header, cards в светлой теме)
--bg-subtle (третий уровень, на 4-6% темнее/светлее)
--bg-card = совпадает с --bg или --bg-elevated в зависимости от темы

3-4 фоновых уровня достаточно. Больше — путаница.

6. Анти-паттерны

❌ Карточка с тенью И бордером И background-tint — выбери максимум 2
❌ Radius 4 у кнопки и 20 у карточки — не связаны системно
❌ Box-shadow ставит fake-depth на flat-плоскостях — выбери одну метафору
❌ Outline-style dashed или dotted — почти всегда смотрится дёшево
❌ Использовать shadow-2xl Tailwind по умолчанию — она слишком тяжёлая для большинства премиум-кейсов

Формат вывода

Block CSS-токенов (:root + @theme) с конкретными значениями
Mapping на Tailwind config (если используется)
Перед/после на одном компоненте: показать карточку до и после применения токенов
Список «удалить»: что из текущих токенов лишнее (если есть)