# Visual Density

> Information density design, compact modes, and density management in data-heavy interfaces.

- Skill: `dragoon0x/visual-density` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/visual-density`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/visual-density/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/visual-density

---


# 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.

```css
[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.