Data-Dense Design

Data-Dense Design

"Density is a feature. For expert users, reducing clicks is more important than whitespace."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Compact Layouts: Extremely tight margins and padding (often 2px to 4px).
2. Monospace & Tabular Data: Numbers must align vertically perfectly.
3. High Utility: Every pixel serves a functional purpose. Minimal purely decorative elements.

Visual DNA

• Colors: Industrial Chic (high contrast) or Minimalist Slate. Avoid bright backgrounds. Dark themes are heavily preferred to reduce eye strain over 8-hour sessions.
• Typography: Small base sizes (11px - 13px). Strict use of monospace fonts (Fira Code, JetBrains Mono) for data.
• Borders: Thin 1px borders (#333 or #e0e0e0) are used extensively to separate tiny cells of data.

Web Implementation

• Tables, CSS Grid, and Flexbox with zero gap.
• CSS Example:

body {
  background-color: #1e1e1e; /* IDE Dark */
  color: #cccccc;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 12px; /* Very small */
  margin: 0;
}

.dense-toolbar {
  display: flex;
  background-color: #2d2d2d;
  border-bottom: 1px solid #3c3c3c;
  padding: 2px 4px;
}

.dense-btn {
  background: transparent;
  color: #ccc;