spacing-system

Create a spacing scale from a base unit with rules for when each step applies. Use when standardising padding and margins. For page-level columns and gutters, use `layout-grid`.

2,279
installs: 0 up / 0 down, score 0.00
votes: 3,024
repo stars
Updated: 2 months ago
In the catalog since: 1 Oct 2026
From: owl-listener/designer-skills

Get it through your agent npx skills add owl-listener/designer-skills@spacing-system

Skill instructions

Rendered from the published SKILL.md, 35 lines.

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

Get it through your agent

Call the Graph-of-Skills MCP server's retrieve_skill_bundle tool and it returns this skill's text inside your budget.

{
  "tool": "retrieve_skill_bundle",
  "arguments": {
    "query": "spacing-system"
  }
}

New to this? Set up Graph-of-Skills or get a free key. The text on this page comes from its authors: how skills are sourced and what we check. If none fits your task, your agent can write a skill for your own library. To keep a skill from your own library on a machine, see how to install one of your skills.

Share on X Share on LinkedIn Share on Bluesky Share on Hacker News

Share on Reddit

Source

Source repository owl-listener/designer-skills
Listing on skills.sh

From owl-listener/designer-skills via skills.sh

Related skills

layout-grid
Define a responsive grid — columns, gutters, margins, and breakpoint behaviour. Use when establishing page structure. For the spacing scale inside components use `spacing-system`; for cross-device behaviour use `responsive-design`.
2,347 installs
layout
Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.
26,360 installs
spacious
Generous whitespace, consistent padding, and grid-based layouts for clean, readable, and breathing interfaces.
2,303 installs
better-layout
Helps with grouping, alignment, reading order, responsive structure and room for translated text, so a layout holds up when it is resized, translated or mirrored.
30,071 installs
arrange
Improve layout, spacing, and visual rhythm. Fixes monotonous grids, inconsistent spacing, and weak visual hierarchy. Use when the user mentions layout feeling off, spacing issues, visual hierarchy, crowded UI, alignment problems, or wanting better composition.
39,112 installs

More from owl-listener/designer-skills

presentation-deck
Structure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use `case-study`; for the written argument use `design-rationale`.
3,064 installs
typography-scale
Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).
2,554 installs
visual-hierarchy
Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique).
2,501 installs
illustration-style
Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).
2,499 installs
color-system
Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems).
2,461 installs

Content is provided as published by its creators; you are responsible for how you use it.

To request removal, use the contact form.