Spacing System
- 1k installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
spacing-system is a Claude Code skill that generates a reusable, scalable spacing system based on a base unit with contextual rules for inset, stack, inline, and grid-gap spacing in interfaces.
About
spacing-system is a Claude Code skill from owl-listener/designer-skills that builds consistent spacing scales from a 4px or 8px base unit. The skill defines eight named steps—from 2xs at 2px through 3xl at 64px—and maps them to inset padding, vertical stack gaps, inline gaps, and grid gaps with squish and stretch variants. Developers and designers reach for spacing-system when arbitrary margin and padding values create visual noise across components. It eliminates one-off pixel choices by supplying a systematic rhythm developers can encode in design tokens or CSS variables.
- Generates an 8-step spacing scale from a chosen base unit (typically 4px or 8px)
- Defines four distinct spacing types: Inset, Stack, Inline, and Grid gap
- Includes three density modes: Compact, Comfortable, and Spacious
- Enforces application rules for related items, distinct sections, page margins, and component internals
- Delivers documented spacing intent plus viewport testing guidance
Spacing System by the numbers
- 1,011 all-time installs (skills.sh)
- +44 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #385 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill spacing-systemAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1k |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you create a consistent spacing scale?
Generate a reusable, scalable spacing system that eliminates arbitrary pixel values and creates visual rhythm across an interface.
Who is it for?
Frontend developers and designers standardizing layout rhythm who need a tokenized spacing scale instead of ad-hoc pixel values.
Skip if: Projects needing typography scales, color palettes, or full design-system component libraries without spacing standardization.
When should I use this skill?
The user asks for a spacing system, base-unit scale, or rules for inset, stack, inline, and grid-gap spacing.
What you get
Named spacing token scale, inset/stack/inline/grid-gap rules, and base-unit documentation for design systems.
- Spacing token scale
- Inset/stack/inline/grid-gap rules
- Base-unit spacing documentation
By the numbers
- Defines 8 named spacing steps from 2xs (2px) through 3xl (64px)
- Supports 4px or 8px base-unit spacing systems
Files
Spacing System
You are an expert in creating systematic spacing for consistent, harmonious interfaces.
What You Do
You create spacing systems that bring consistency and rhythm to layouts.
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: Padding inside containers (equal or squish/stretch variants)
- Stack: Vertical space between stacked elements
- Inline: Horizontal space between inline elements
- Grid gap: Space between grid/flex items
Application Rules
- Related items: smaller spacing (sm/md)
- Distinct sections: larger spacing (lg/xl)
- Page margins: consistent per breakpoint
- Component internal: defined per component
Density Modes
- Compact: reduce spacing by one step (for data-heavy views)
- Comfortable: default spacing
- Spacious: increase spacing by one step (for reading-focused)
Best Practices
- Always use the scale — never arbitrary values
- Consistent spacing within components
- Larger gaps between unrelated groups
- Document spacing intent, not just values
- Test spacing at different viewport sizes
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Pick spacing-system for layout spacing tokens; use typography or color skills when the primary gap is type scale or palette definition.
FAQ
What base units does spacing-system use?
spacing-system typically anchors on a 4px or 8px base unit and builds a named scale from 2xs through 3xl. Developers apply tokens to inset padding, vertical stacks, inline gaps, and grid spacing.
How many spacing steps does spacing-system define?
spacing-system documents eight named spacing steps: 2xs, xs, sm, md, lg, xl, 2xl, and 3xl, ranging from 2px to 64px depending on the chosen base unit multiples.
Does spacing-system include typography?
spacing-system focuses on layout spacing— inset, stack, inline, and grid-gap rules—not typography or color systems. Pair it with typography and color skills for a fuller design token set.
Is Spacing System safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.