SKILL.md
Visual Density
Density Levels
| Level | Row Height | Font Size | Padding | Best For |
|---|---|---|---|---|
| Spacious | 56-64px | 16px | 16-24px | Consumer apps, content reading |
| Comfortable | 44-52px | 14-16px | 12-16px | Default for most apps |
| Compact | 32-40px | 13-14px | 8-12px | Data tables, power user tools |
Implementation
- Use CSS custom properties for density-dependent values.
- Toggle between density levels in settings.
- Remember user preference across sessions.
[data-density="compact"] {
--row-height: 36px;
--cell-padding: 8px 12px;
--font-size-body: 13px;
}Rules
- Never sacrifice readability for density.
- Compact mode doesn't mean removing information — it means tighter spacing.
- Touch targets must remain 44px minimum even in compact mode (add padding without visual change).
- Test compact mode at all breakpoints.