Визуальное ремесло: как делать «дорого» и современно

Главный вывод

Премиум — это НЕ «больше эффектов». Это: ограничить палитру + огромный контраст масштаба типографики + отдать сцену качественному ассету + щедрый воздух + глубину светом, а не границами + слойность по Z. Формула всех трёх профилей: сдержанность + глубина. «Дорого» возникает на уровне ПОДАЧИ, не только макета.

1. Глубина светом, а не границами ★ (главное, чего не хватало)

• Мягкие диффузные тени: большой blur, низкая opacity — не «drop-shadow», а «свечение»; карточки парят. Цветные тени (тинт бренда / тёмно-синий), не чёрные. Многослойные, напр. 0 10px 30px rgba(0,0,0,.05).
• 1px rim-light кромка низкой opacity (rgba(255,255,255,.1) на тёмном; чуть темнее/светлее фона на светлом) — определяет край без тяжёлой рамки.
• Ambient / aura glow — большие мягкие радиальные градиенты бренд-цвета ЗА элементами (за hero, за активной карточкой). Интерфейс «излучает свет».
• Mesh-градиенты на фонах — убирают «мёртвую плоскость» пустого пространства.
• Subtle-градиенты на плоских цветах (хедер темнее→светлее, CTA) — спасают от «дёшево/плоско».
• Glassmorphism точечно — backdrop-blur 20–30px на доках/попапах/оверлеях, фон просвечивает.
• Film grain / noise тонким слоем — убирает «пластик» цифры, даёт киношность (фикс. pointer-events:none).

2. Z-слойность и «ломка контейнера»

• Три плана: гигантский фоновый вотермарк-бренд (низкая opacity) → фото/мокап (средний план) → резкий UI поверх.
• Герой-объект вылезает за границы карточки/секции (вырезанный персонаж/продукт залезает на соседний блок) — ломает «коробочность», даёт объём.
• Элементы наезжают друг на друга (карточка-статистика плавает поверх фото).
• Вырезанный субъект (masked cutout) поверх паттернов/градиентов — bespoke, не сток.

3. Типографика: контраст масштаба + editorial

• Экстремальный контраст: H1 в 4–5× больше body; дисплейный до ~120px при body 14–16px. Заголовок = графический элемент, не «информация».
• Геометрический гротеск (Inter / Satoshi / Geist / Plus Jakarta / SF Pro), высокий x-height. НЕ системный дефолт.
• Плотный отрицательный трекинг (−1…−2%) + сжатый line-height на крупных — текст как единый «блок-объект». (В люксе/фэшн — наоборот, РАСширенный трекинг.)
• Пара гротеск + контрастный serif/курсив для «фэшн-хаус» акцента.
• «Значение vs подпись»: число жирное тёмное, подпись мельче/светлее/серая (60–70% opacity).
• Микро-лейблы капсом с широким трекингом (• FEATURES) — указатели секций.
• Семантическая подсветка фразы (ключевое слово в бренд-цвет или pill-плашку).
• Числа — tabular-nums.

4. Цвет

• Никогда #FFF / #000. Off-white (#F8F9FB, тёплый/холодный) и charcoal/navy/eggplant (#0D1117, #0A0118) — под них живут тени и glow; на чистом чёрном они умирают.
• Один высокохромный акцент дозированно (<5%): electric violet / blue / lime / orange. Насыщенность — только интерактиву и данным; UI-мебель (рамки, фоны) обесцвечена.
• Монохромный ДИАПАЗОН одного цвета (forest → lime, charcoal → vibrant) вместо одного плоского тона.
• Отстройка от клише ниши ★ — финтех фиолетовый, не «зелёная стрелка»; gym navy+violet, не «чёрный+оранж»; медицина electric-blue, не «больничный sterile»; агентство forest-green, не tech-blue.
• Палитра вытянута из герой-фото; лого-партнёров десатурировать в единый серый.

5. Композиция / layout

• Асимметричный hero (не центр, не лобовой «текст слева / фото справа»): тяжёлый объект справа уравновешен крупной типографикой слева; текст расставлен ВОКРУГ объекта.
• Bento с асимметрией И глубиной (не плоские плитки!): карточки разной ширины со слоями/тенями/ломкой границ. Это не «бенто-как-доминанта», а bento + Z-глубина.
• Вложенный радиус концентрично (карточка круглее кнопок внутри — Apple-логика).
• Чередование ритма (checkerboard image-left↔right) в длинных страницах.
• Контрастные разрывы секций (тёмная → светлая → тонированная) — раскадровка, борьба со скролл-усталостью.
• Full-bleed изображения «как киноплёнка». Вертикальный повёрнутый текст на полях (журнальный якорь).

6. Пространство как роскошь

• Макро-whitespace: 150px+ между секциями, padding карточек 24–32px. «Расточительность к пространству = уверенность бренда».
• Негативное пространство как фокус: один объект в море пустоты = эксклюзивность.

7. Качество ассетов = половина результата ★

• Высокофидельный 3D (рендеры, персонажи с subsurface scattering), арт-дирекшн фото под палитру (малая ГРИП, golden-hour, full-bleed), кастомные мокапы под цвет фона с наклоном.
• НЕ сток, НЕ серый picsum. «Premium на 50% — это дизайн и на 50% — качество ассетов». Фото и UI неразделимы: цвета одежды/фона совпадают с палитрой UI.
• Hand-drawn гуманизация (scribble-иконки, botanical) — точечно.

8. Радиусы / форма

• 16–32px squircle везде (до 40–100px на крупных блоках), концентрично вложенные. Pill (полное скругление) для тегов/кнопок. Острые 4–8px = маркер устаревшего шаблона.
• Единый «curvature ratio» по всем элементам — «hardware-like» цельность.

9. Дата-виз как арт (для дашбордов)

• Area-chart с вертикальным градиент-fill (тающим в прозрачность снизу); bezier-кривые (spline) с glow-обводкой, не ломаные.
• Кастомные столбцы: скруглённые верхушки + вертикальный градиент + glow на активном.
• Штриховка/hatching под линией вместо сплошной заливки — «выглядит как кастом-код, не дефолтный Chart.js».
• Donut/segmented rings, sparkline в углах KPI, % изменения в пилюле семантическим цветом, floating-тултипы с тенью.
• Срезать оси/тики/сетку — «тренд важнее точки».

10. Motion (осмысленный)

• Стаггеринг при загрузке (значения 0→target = «живые данные»); easing-аккордеоны; cross-dissolve + лёгкий слайд между табами (сохраняет ориентацию); ghost-кнопки реагируют на курсор; glow на активном. Ничего не «появляется» резко.

Чеклист «не пресно» (прогон перед сдачей экрана)

• Глубина светом (диффузные тени / aura-glow / mesh / 1px rim-кромка), а не плоские border-коробки.
• Хотя бы один Z-слой / ломка границы / крупный фоновый вотермарк.
• Дисплейный заголовок в 3–5× body (контраст масштаба).
• Off-white / charcoal, не #FFF/#000; один акцент <5%; отстройка от клише ниши.
• Качественный ассет-герой (3D или фото-арт-дирекшн под палитру), не сток/picsum.
• Радиусы 16–32 squircle, концентрично; единый curvature.
• Whitespace щедрый (секции 100px+).

Связь с остальной базой

Документ не отменяет правила из DESIGN_RULES.md (раздел 13.1 отсылает сюда), а дополняет их визуальным слоем. Три места, где он с ними стыкуется:

• Карточки. Запрет из раздела 18 правил (card soup) относится к плоским одинаковым плиткам как основе композиции. Приём остаётся рабочим при разной глубине, слоях и намеренном нарушении границ.
• Вложенность. Блок в блоке не добавляется: глубина даётся светом, а не рамкой внутри рамки.
• Ясность важнее эффекта. Приёмы выше дают ощущение дорогой работы, не добавляя трения — свет и воздух ведут взгляд, а не мешают.

Оговорка о происхождении чисел: точные значения цвета и названия шрифтов получены разбором изображений и не подтверждены исходниками. Опираться стоит на приёмы, а не на конкретные значения; названия брендов из разборов не проверялись.