whitespace-density

Optimize UI spacing using a 4px/8px scale and Gestalt proximity principles.

28|3|Updated Feb 22, 2026
One-click install
npx skills add https://github.com/oborchers/fractional-cto --skill whitespace-density
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: whitespace-density
Source: https://github.com/oborchers/fractional-cto/tree/main/visual-design-principles/skills/whitespace-density
Command: npx skills add https://github.com/oborchers/fractional-cto --skill whitespace-density

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the challenge of creating visually appealing and user-friendly interfaces by providing clear guidelines on managing whitespace, padding, margins, and element separation. It helps avoid designs that feel cramped or overly sparse.

Core Features & Use Cases

  • Spacing System: Implements a consistent 4px/8px spacing scale for predictable layouts.
  • Separation Techniques: Prioritizes whitespace and background shifts over borders to reduce visual clutter.
  • Gestalt Proximity: Ensures elements are grouped logically by maintaining specific internal-to-external spacing ratios.
  • Use Case: When designing a new SaaS dashboard, use this Skill to define a spacing system that ensures data tables are readable, sidebars have adequate breathing room, and related form elements are clearly grouped.

Quick Start

Apply the 4px/8px spacing scale and prioritize whitespace for separation in the new user profile form.

Frequently Asked Questions about whitespace-density

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix cramped or sparse UI layout spacing in a SaaS dashboard?

Fix UI layout spacing by applying a consistent 4px/8px spacing scale and using Gestalt proximity principles to group related elements logically. This ensures adequate breathing room for sidebars and readable data tables in dashboard designs.

What is the best way to separate UI elements without adding visual clutter from borders?

The best way to separate UI elements without visual clutter is prioritizing whitespace and background color shifts over borders. This technique reduces visual noise while maintaining clear element separation and consistent vertical rhythm.

How does Gestalt proximity apply to UI spacing and element grouping?

Gestalt proximity applies to UI spacing by maintaining specific internal-to-external spacing ratios. This ensures elements are grouped logically, creating predictable layouts where related form elements and content blocks are visually associated.

Can I use a 4px/8px spacing scale for marketing pages and presentations?

Yes, you can use a 4px/8px spacing scale across various contexts including marketing pages and presentations. It provides predictable layouts by ensuring consistent vertical rhythm and appropriate whitespace ratios for different content densities.

Why does my dashboard design feel visually cluttered despite using a spacing system?

Dashboard design feels visually cluttered when relying heavily on borders instead of whitespace. Shift to using whitespace and background shifts for element separation to reduce visual clutter and establish a cleaner vertical rhythm.