Spacing Systemby Owl-Listener

Spacing System Skill.

Choose spacing by relationship and purpose, not by isolated pixel adjustments.

UI Design
Design Tokens

Source Review · Spacing SystemSKILL.md

Task UI Design Produces • A named spacing scale derived from a chosen base unit. • Usage rules for inset, stack, inline, and grid gaps. • Density-mode mappings for different content contexts. Before You Start No specific token tool is required; application depends on the existing component system.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Give Spacing a Consistent Meaning

A compact spacing framework covering a base scale, semantic applications, grouping, and density modes.

Source-based workflowNot an execution benchmark

The Working Approach

Spacing System establishes a base unit and a reusable scale for margins, padding, and gaps. It distinguishes inset space inside a container from vertical stacks, inline relationships, and grid gaps, so identical numbers can still have clearly documented purposes.

The source links spacing to grouping: related items sit closer together while unrelated sections receive more separation. It also describes density modes for different contexts. This is a concise system specification, not a claim that the example scale will suit every product unchanged.

Expected Deliverables

A named spacing scale derived from a chosen base unit.
Usage rules for inset, stack, inline, and grid gaps.
Density-mode mappings for different content contexts.

See the Example Brief

From Brief to Review

01
Choose the Base and Scale
Review existing patterns and choose a limited spacing vocabulary instead of preserving every accidental value.
02
Assign Semantic Uses
Define which steps belong inside components, between related controls, and between sections.
03
Specify Density Changes
Explain how compact and spacious modes alter the default while keeping grouping relationships legible.

02 When to Use It

When to Use It

No specific token tool is required; application depends on the existing component system.

A Good Fit

Inconsistent Component PaddingUseful when similar controls use unrelated spacing values.
Multiple Density NeedsSupports products that mix dense work views with more relaxed reading surfaces.

Limits to Check

Not a Column GridPage columns and responsive gutters belong to Layout Grid.
Not Automatic MigrationThe source describes rules, not a codemod that replaces every existing CSS value safely.

Bring These Inputs

Current Spacing SamplesProvide representative components and the values they use.
Grouping IntentExplain which elements belong together and which sections should separate.
Density RequirementsIdentify data-heavy, ordinary, and reading-focused contexts.

03 Decisions That Matter

Decisions That Matter

Intent Is Documented
A token table alone does not tell a developer which gap belongs between a label and its input.
Density Without Randomness
Modes can change compactness while preserving a shared system rather than creating another set of arbitrary values.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the repository's documented installation route and retain any referenced companion files. This entry describes a focused design method rather than an executable application.

Upstream Source File

https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/spacing-system/SKILL.md

No specific token tool is required; application depends on the existing component system.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use spacing-system to reconcile our settings forms and dense records table. Define a base unit, named scale, inset/stack/inline rules, and compact versus comfortable modes. Explain label-to-input spacing separately from section spacing; do not redesign the page columns.

Inspect the Result

Check the actual output against these observable criteria.

Every proposed value belongs to the documented scale.
Related groups remain visually distinct from unrelated sections.
Density changes preserve a clear usage rule.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: Owl-Listener
Repository: Owl-Listener/designer-skills
Skill File: ui-design/skills/spacing-system/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · 9a6930cf84a8

Editorial Source Summary

A compact spacing framework covering a base scale, semantic applications, grouping, and density modes.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does it require an 8-pixel base?

The source gives 4-pixel and 8-pixel bases as typical options; choose based on the product's needs.

Is page margin part of the system?

It can document consistent page margins, but the broader column and breakpoint structure belongs to the grid specification.

Why name different spacing types?

Inset, stack, inline, and gap describe how space is used, making application more repeatable than a list of numbers alone.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills