skills.rest
Owl-Listener
Owl-ListenerCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

spacing-system

Define a rule-based spacing scale with named steps for UI layouts.

2.0k|325|Updated Mar 7, 2026
Search Tags:#consistency#layout#ui-design#design-system#responsive-design#spacing-system
One-click install
npx skills add https://github.com/Owl-Listener/designer-skills --skill spacing-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spacing-system
Source: https://github.com/Owl-Listener/designer-skills/tree/main/ui-design/skills/spacing-system
Command: npx skills add https://github.com/Owl-Listener/designer-skills --skill spacing-system

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Design teams struggle with inconsistent spacing that causes visual noise and layout drift across components and breakpoints.

Core Features & Use Cases

  • Base Unit: Choose a base unit (typically 4px or 8px) and build a scale:
    • 2xs: 2px
    • xs: 4px
    • sm: 8px
    • md: 16px
    • lg: 24px
    • xl: 32px
    • 2xl: 48px
    • 3xl: 64px
  • Spacing Types: Inset, Stack, Inline, Grid gap
  • Density Modes: Compact, Comfortable, Spacious
  • Best Practices: Always use the scale - never arbitrary values; Document spacing intent, not just values; Test spacing at different viewport sizes

Quick Start

Set your base unit (4px or 8px) and begin applying the spacing scale to components and layouts.

Frequently Asked Questions about spacing-system

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

FAQPage Schema
How do I create a consistent UI spacing system for web and app layouts?▼

A consistent UI spacing system uses a base unit like 4px or 8px to define a scale of named steps, ensuring harmonious margins, paddings, and grid gaps across responsive breakpoints and components.

What is the best way to fix inconsistent spacing and layout drift across breakpoints?▼

To fix layout drift, apply a rule-based spacing scale with named steps from 2xs to 3xl instead of arbitrary values. This establishes consistent visual rhythm and reduces noise across components.

Can I use different density modes for my UI design spacing scale?▼

Yes, the spacing system supports Compact, Comfortable, and Spacious density modes. These modes adjust the applied spacing values to suit different layout contexts and viewport sizes.

How do I apply spacing tokens for inset, stack, inline, and grid gaps?▼

Apply named scale steps like sm or lg to spacing types such as inset, stack, inline, and grid gaps. Document the spacing intent rather than just values to ensure consistent application.

Do I need a specific framework to implement a scalable spacing system?▼

No specific framework is required. The spacing system is a rule-based methodology applicable to any web or app design workflow, relying on a chosen base unit and scale rather than external dependencies.

Related Skills

Explore More Design & Creative Skills→
spontus-reachspontus-reach
1

figma-spacing-system

Generate tokenized spacing scales and responsive grid specifications for Figma design systems.

Official
Intermediate
dylantarredylantarre
38

spacing-scale

Generate centered exponential spacing scales for CSS, Tailwind, and JSON tokens.

Community
Intermediate
TobiasPerryTobiasPerry

design-consultation

Generate a design system proposal and DESIGN.md with typography, color, spacing, and motion guidelines.

Community
Advanced
bfree-trainerbfree-trainer
60

arrange

Diagnose spacing and grid issues to produce a spacing scale and layout approach.

Official
Intermediate