Аудит ИИ-зрелости
Карта процессов, точки внедрения, рейтинг по приоритету.
Design System / Components / Cards & Surfaces
Cards & Surfaces
Карточка — это контейнер последней инстанции. Сначала — типографика и воздух. Если они не справляются — hairline. Если и этого мало — тон или ring. Цветные акценты-полоски — ушли в архив.
Воздух первичен. Карточка появляется, когда нужен контейнер взаимодействия
(кликабельный объект, dashboard tile) или смена регистра (тёмный блок на светлой странице).
Для структурированной информации сначала пробуем grid + divider + типографику.
Когда использовать что
Решающее дерево. Сверху вниз — от тише к громче.
| Если … | Используй | Почему |
|---|---|---|
| Структурированный список (шаги, метрики) | Без карточек | Grid + divider + типографика. См. Approach v6, Metrics, Problems C. |
| Группа равноправных модулей на ровном фоне | Hairline (C1) | Минимальное обозначение границ. Базовый default. |
| То же на цветной/тёмной секции | Tonal (C2) | Светлый блок на цветном фоне. Граница — разница тонов, не линия. |
| Кликабельный модуль с hover-state | Ring (C3) или Inverse-on-hover | Ring мягче чем border при радиусе 12+. Inverse — сильный жест. |
| Смена регистра в маркетинге («вот наш стек») | Inverse (C4) | Тёмная карточка на светлой странице. Используется 1 раз на экран. |
| Цитата, голос клиента, боль | Quote (C5) | Кавычка — смысловой акцент. Заменяет красные left-border. |
| Список ≥ 5 элементов с метаданными | List rows (C6) | Плотнее, чем tile grid. Лучше сканируется. |
C1 — Hairline
Базовая карточка. Белая поверхность, 1 px --border, radius 12. Default для большинства случаев.
— на background
#FAFAFAОбучение команды
От C-level до линейных ролей. Программа адаптируется под индустрию.
Внедрение под ключ
Запуск ИИ-агентов в продакшене — от PoC до интеграции.
C2 — Tonal
Без border, только тон. Используется на цветном или приглушённом фоне.
— на
#F5F5F7Аудит ИИ-зрелости
Карта процессов, точки внедрения, рейтинг по приоритету.
Обучение команды
От C-level до линейных ролей. Программа адаптируется под индустрию.
Внедрение под ключ
Запуск ИИ-агентов в продакшене — от PoC до интеграции.
C3 — Ring
Граница — через box-shadow: 0 0 0 1px, не border. Мягче работает с большими радиусами,
лучше переносит hover-эффекты. Используется в кодбейзе app/.
— ring на 0.08 opacity
Аудит ИИ-зрелости
Карта процессов, точки внедрения, рейтинг по приоритету.
Обучение команды
От C-level до линейных ролей. Программа адаптируется под индустрию.
Внедрение под ключ
Запуск ИИ-агентов в продакшене — от PoC до интеграции.
C4 — Inverse
Тёмная карточка как смена регистра. Один раз на экран — иначе теряет вес. Используется в Features и CTA.
— foreground inversion
Стек, на котором мы строим
OpenAI, Anthropic, Mistral, Llama, собственные модели. Подбираем под задачу, не под моду.
C5 — Quote
Карточка-цитата для Problems-секций. Большая кавычка слева — акцент, нижняя строка с последствием — diagnostic-red. Заменяет старый паттерн с красным left-border.
— боль клиента, его голос
«
Команда уже год говорит про ИИ, но никто не понимает с чего начать.
«
Купили подписку на ChatGPT всему отделу — используют трое.
C6 — List rows
Альтернатива tile grid в ЛК. Когда у пользователя 5+ объектов — строки сканируются быстрее тайлов.
— ЛК, мои продукты
MA
MI Analyst
VO
Voice Operator
DE
Doc Extractor
Interaction — inverse on hover
Сильный hover-жест для кликабельных карточек. Используется когда карточка ведёт куда-то целиком. Наведи курсор — увидишь инверсию.
— hover state ниже
Кейс ВТБ
Запуск голосового агента в колл-центре. ROI 4× за квартал.
Кейс Мегафон
Чат-бот первой линии. Снижение времени отклика на 62%.
Кейс Северсталь
RAG над технической документацией. Поиск ответов — секунды.
Архив — что ушло
Эти паттерны были в ранних итерациях. Они не используются в production.
DEPRECATED
Top accent line — 2px primary полоска сверху карточки.
Почему ушло: добавляет визуальный шум, не несёт информации. Hairline или tonal — чище.
DEPRECATED
Left red border — 3px destructive слева на Problems.
Почему ушло: читается как «ошибка валидации», не «знакомая боль». Quote (C5) точнее.
DEPRECATED
Ghost number watermark — гигантская цифра в углу.
Почему ушло: декорация без функции. Numbered list (Approach 1B) — строже.
DEPRECATED
Drop shadows at rest — тень на карточке без hover.
Почему ушло: «SaaS tropes». Тени только на hover, и то тонкие.
Правила композиции
Не смешивать варианты в одной секции
DO
3 hairline-карточки в одном ряду.
3 tonal-карточки в другой секции.
DON'T
Hairline + ring + tonal в одной сетке — ритм ломается.
Иерархия — через размер, не через тип
DO
Главная карточка 2× ширины, остальные 1×. Тип — один (hairline).
DON'T
Главная — inverse, остальные — hairline. Слишком много контраста.
Inverse — один раз на страницу
DO
Тёмная карточка в Features или CTA. Не в обоих сразу.
DON'T
Inverse в hero, Features, CTA, footer — потеряли «особый момент».
Tokens reference
| Property | Value | Token |
|---|---|---|
| Background (light) | #FFFFFF | --card |
| Background (tonal) | #F5F5F7 | --secondary |
| Background (inverse) | #111111 | --foreground |
| Border | 1px #E0E0E0 | --border |
| Ring | 0 0 0 1px rgba(17,17,17,0.08) | — |
| Radius (default) | 12 px | --radius-lg |
| Radius (inverse / large) | 16 px | --radius-xl |
| Padding (compact) | 20 px | --space-lg |
| Padding (default) | 24 px | --space-lg |
| Padding (inverse) | 32 px | --space-xl |
| Hover shadow | 0 4px 12px rgba(17,17,17,0.06) | --shadow-hover |
| Transition | 200ms cubic-bezier(0.2,0,0,1) | --ease-standard |
Исследования, из которых пришли паттерны:
card-alternatives ·
problems-grid ·
surfaces 3 vs 4
Назад: ← Forms · К хабу: Design System →
Назад: ← Forms · К хабу: Design System →