Skills
.Work. You
Rest

spacing-system

Community

Create a scalable, harmonious UI spacing system.

Design & Creative#consistency#layout#ui-design#design-system#responsive-design#spacing-system
AuthorOwl-Listener
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: spacing-system
Download link: https://github.com/Owl-Listener/designer-skills/archive/main.zip#spacing-system

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.