Карточки: плотность и ритм сетки

Действуй как product designer. Сетка карточек — это не «положили в grid и забыли». Это отдельная задача про ритм: вертикальный и горизонтальный, плюс иерархия внутри каждой карточки.

Карточка: {{card_type}} Колонок в desktop: {{grid_density}} Главное при сканировании: {{primary_scan}}

Закон сетки: 4 ритма

1. Горизонтальный ритм (gap между колонками) — задаёт ощущение плотности. 8/12/16/24px.
2. Вертикальный ритм (gap между рядами) — обычно = горизонтальному. Иногда чуть больше для лучшей читаемости.
3. Внутренний ритм карточки (padding + spacing) — должен соответствовать density mode.
4. Контрастный ритм (фон карточки vs фон страницы) — определяет, нужны ли границы. Если контраст сильный (карточка #fff на странице #f5f5f5) — границы не нужны. Если фон одинаковый — нужны.

3 density mode (выбирай 1 как default, остальные доступны по toggle)

Density toggle в toolbar (icons: ▤ ▦ ▧), persist в localStorage.

Анатомия карточки

┌──────────────────────────┐
│ [optional: image / cover]│  ← если cozy
├──────────────────────────┤
│ [status chip]            │  ← compact: top-right, иначе top-left
│ TITLE (truncate 1 line)  │  ← primary scan target
│ subtitle / meta          │  ← 1-2 строки, color: subtle
│                          │
│ [icon] meta1   [icon] meta2  ← inline icons
│                          │
│ [action] [action]        │  ← bottom-right или full-width в compact
└──────────────────────────┘

Правила иерархии внутри

1. Title — primary scan target. Самый крупный, 100% контраст, всегда вверху. Не центруй.
2. Truncation: title — 1 line с ellipsis, tooltip на hover. Description — 2 lines. Не делай 3+ строки динамической высоты — карточки прыгают.
3. Status — справа или ярко. Если status — primary_scan, ставь его слева сверху или цветным badge'ом.
4. Image — fixed aspect ratio (16:9, 4:3, 1:1). Никогда не «по контенту». Иначе ряды прыгают.
5. Actions — bottom или hover-reveal. Hover-only — для compact. Always-visible — для cozy.
6. Никогда не больше 5 уровней информации в карточке. Title + status + 2 meta + action = 5. Больше — это не карточка, это раздел.

Grid и breakpoints

Стандартный паттерн:

• 360px (mobile): 1 column
• 640px (tablet): 2 columns
• 1024px (laptop): {{grid_density}} columns (например 3)
• 1280px+: {{grid_density}}+1 columns

Не используй фиксированную ширину карточки + центрирование. Используй CSS Grid с auto-fit и minmax(280px, 1fr) — карточки тянутся.

Вертикальный ритм

• Gap между рядами = gap между колонками (16-24px). Одинаково.
• Если карточки разной высоты (avoid) — используй grid-auto-rows: 1fr или фиксируй высоту.
• Никогда не masonry для рабочих списков. Masonry — для галерей и блогов, не для каталогов и таблиц.

Hover и interaction

• Hover на карточке: subtle elevation (shadow +2 уровня) или border highlight. Cursor: pointer если вся карточка кликабельна.
• Hover-actions: скрытые actions появляются. На mobile — всегда видимы.
• Click target: вся карточка или только title? Зависит от primary action.
  • Если 1 primary action (открыть detail) → click везде.
  • Если 2+ actions (open, edit, delete) → click на title для open, кнопки для остальных.

Loading и empty

• Skeleton-карточки в той же сетке, той же высоты. 6-8 штук.
• Empty grid: одна большая illustration + CTA «Add first {{card_type}}», ширина 1-2 карточек по центру.

States

• Default: как описано.
• Selected (для multi-select): чекбокс top-left, border accent color, background tint.
• Disabled: opacity 0.5, cursor: not-allowed, не реагирует на hover.
• Highlighted (новое / уведомление): dot или badge top-right.

Mobile-адаптация

• 1 column всегда.
• Padding можно уменьшить до 16px.
• Image — можно сделать square или 4:3, не 16:9 (на узком экране проседает).
• Actions — full-width внизу, не hover.

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

Density default

Какой mode выбран как default + почему.

Card spec

• Высота
• Padding
• Gap (vertical / horizontal)
• Aspect-ratio для image (если есть)
• Что внутри (в порядке): elements list

Иерархия

| Уровень | Элемент | Visual weight | Где |

Grid

• Mobile: 1 col, gap X
• Tablet: 2 col, gap X
• Desktop: N col, gap X
• Wide: N+1 col, gap X
• Truncation rules

Hover / interaction

• Hover state:
• Click target:
• Hover-actions:

States

• Default / selected / disabled / highlighted / loading / empty

Mobile-адаптация

Что меняется.

Anti-patterns (НЕ делать)

• ❌ Карточки разной высоты в одном ряду (если не masonry). Юзер видит «сломанный grid».
• ❌ Image без fixed aspect ratio. Каждое изображение тянется по-своему — ряд прыгает.
• ❌ 8 разных элементов в карточке: иконка + title + 4 meta + price + status + 2 actions. Карточка становится мини-страницей.
• ❌ Hover-actions без mobile fallback. На touch-устройстве actions невидны.
• ❌ Description длиннее title × 3. Это пост, не карточка.
• ❌ Декоративные карточки одного цвета (4 фиолетовых tile подряд) для рабочих списков. Цвет должен нести семантику.
• ❌ Padding 8px в cozy mode. Cozy = воздух, не теснота.
• ❌ Сетка с 8+ карточек в ряд на desktop. После 6 — карточки слишком маленькие.