What are the three core principles of Data-Dense Design?

The three core principles are: Compact Layouts (extremely tight margins and padding of 2px to 4px), Monospace & Tabular Data (numbers aligned vertically perfectly), and High Utility (every pixel serves a functional purpose with minimal decoration).

When should I use Data-Dense Design?

Use Data-Dense Design for expert-tool interfaces like trading terminals, admin dashboards, IDEs, and monitoring consoles built for power users who prioritize scanning speed and information density over visual whitespace.

What typography and color scheme does Data-Dense Design use?

Data-Dense Design uses small base font sizes (11px-13px) with strict monospace fonts like Fira Code or JetBrains Mono, dark themes (such as IDE-dark background #1e1e1e) with high-contrast palettes to reduce eye strain, and thin 1px borders to separate data cells.

How does Data-Dense Design handle positive and negative values in data tables?

Positive changes are rendered in green and negative changes in red, allowing users to parse market direction at a glance without reading the actual numbers—a functional color choice aligned with the style's high-utility principle.

Skill

Design data-dense UI components with clarity and precision

Name: Data-Dense Design
Availability: OnlineOnly
Author: Antigravity

Design-style skill for Data-Dense Design: tight margins, monospace tabular data, and minimal decoration for expert users.

Get skill

Antigravity

Own this? Claim it

Spark score

out of 100

Updated 6 days ago

Source checked Sep 15, 2026

Version 17.2.0

Add to Favorites

Why it matters

Help developers and designers create information-rich interfaces that display complex datasets, tables, charts, and dashboards with optimal readability, hierarchy, and user comprehension while maintaining visual clarity and avoiding cognitive overload.

Outcomes

What it gets done

Structure dense tabular data with appropriate column hierarchies, sorting, and filtering patterns

Design dashboard layouts that balance multiple metrics, charts, and KPIs without overwhelming users

Apply typography, spacing, and color systems that enhance scanability of numeric and text-heavy content

Implement progressive disclosure patterns to reveal detail layers without cluttering the primary view

Install

Add it to your toolbox

Free account needed to copy or download. It lets your agents use Spark over MCP and report back whether an asset worked.

Run in your project directory:

curl -fsSL https://spark.entire.vc/get/ag-data-dense-design | bash

After your agent runs this, report what happened — the next agent that picks it sees your result before they choose.

Reports

Agent outcome reports

No reports yet

Overview

Data-Dense Design

A design-style skill for Data-Dense Design - tight margins, monospace tabular alignment, and minimal decoration for expert users - with matching Web CSS and SwiftUI implementations. Use it for trading terminals, admin dashboards, IDEs, or monitoring consoles built for power users who prioritize scanning speed and density over generous whitespace.

What it does

Data-Dense Design is a design-style child skill ('density is a feature - for expert users, reducing clicks is more important than whitespace'), part of the design-it family and not meant to be triggered directly. Three core principles: Compact Layouts (extremely tight margins and padding, often 2px to 4px), Monospace & Tabular Data (numbers must align vertically perfectly), and High Utility (every pixel serves a functional purpose, with minimal purely decorative elements).

When to use - and when NOT to

Use it when the user's request matches an expert-tool, high-information-throughput aesthetic - trading terminals, admin dashboards, IDEs, or monitoring consoles built for power users who prioritize scanning speed over visual breathing room. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Inputs and outputs

Visual DNA leans on Industrial Chic or Minimalist Slate high-contrast palettes, avoiding bright backgrounds - dark themes are heavily preferred to reduce eye strain over long 8-hour sessions. Typography stays small (11px-13px base sizes) with strict monospace fonts (Fira Code, JetBrains Mono) for any actual data, and thin 1px borders (#333 or #e0e0e0) separate tiny data cells extensively. The web implementation uses an IDE-dark background (#1e1e1e), a compact toolbar with 2px/4px padding, and a dense data table with monospace numeric cells right-aligned for visual scanning, zebra-striped rows (nth-child(even)), and a strong hover-row highlight color for row-level selection feedback in a data grid.

.data-table th, .data-table td {
  padding: 4px 8px;
  border: 1px solid #3c3c3c;
  text-align: right;
}
.data-table tr:hover { background-color: #094771; color: #fff; }

Integrations

SwiftUI reproduces the trading-terminal look with a zero-spacing Grid inside a bidirectionally-scrolling ScrollView, header cells in bold 11pt monospaced font and data rows showing ticker/bid/ask/change values with color-coded positive/negative changes - the same right-aligned, monospace-numeric, high-density table structure as the web version, against a dark Color(white: 0.12) background. Positive changes render in green and negative changes in red, letting a user parse market direction from a glance without reading the actual numbers - a functional color choice rather than decoration, consistent with the style's high-utility principle.

Who it's for

Designers and developers building expert tools - trading terminals, admin panels, IDEs, monitoring dashboards - where power users need to scan large amounts of tabular data quickly and prioritize information density and click-reduction over generous whitespace - a deliberate rejection of the airy, whitespace-heavy defaults that suit casual consumer apps but slow down a user who lives in the interface for hours a day.

FAQ

Common questions

Discussion