skills.rest
thrillmade
thrillmadeOFFICIAL
Explore all skills by this author →
GitHub

spacing-system

Enforce a two-unit primitive model and generate spacing ladders for UI design systems.

1|Updated May 15, 2026
Search Tags:#accessibility#design system#UI design#spacing#grid system
One-click install
npx skills add https://github.com/thrillmade/agent-skills --skill spacing-system-thrillmade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: spacing-system
Source: https://github.com/thrillmade/agent-skills/tree/main/skills/spacing-system
Command: npx skills add https://github.com/thrillmade/agent-skills --skill spacing-system-thrillmade

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures that spacing in UI design systems is consistent and accessible, providing a standardized way to create and maintain a two-unit primitive model for padding, gaps, icon sizes, component heights, and border radii.

Core Features & Use Cases

  • Two-Unit Primitive Model: Defines a minor and major unit for spacing, ensuring consistency across design elements.
  • Spacing Ladders: Generates ladders for padding, gaps, icon sizes, component heights, and border radii.
  • Density Modes: Supports dense, balanced, and spacious density modes with predefined unit primitives.
  • Accessibility: Ensures interactive controls meet WCAG 2.5.8 AA Pointer Target floor for accessibility.

Quick Start

Apply the spacing-system Skill to your design system to define and maintain a consistent spacing scale.

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 spacing scale for a UI design system?▼

Generate spacing ladders for padding, gaps, icon sizes, component heights, and border radii by enforcing a two-unit primitive model. This approach standardizes your UI design system spacing scale to maintain visual consistency across all interface elements.

What is a two-unit primitive model in UI design spacing?▼

A two-unit primitive model in UI design spacing defines a minor and major unit to calculate all padding, gaps, and dimensions. This standardizes element sizing and prevents arbitrary spacing values across your design system components.

How do I ensure my UI spacing meets WCAG accessibility requirements?▼

Ensure your UI spacing meets WCAG accessibility requirements by enforcing the WCAG 2.5.8 AA Pointer Target floor for interactive controls. This standard guarantees that touch targets are large enough for accessible user interaction.

Can I use different density modes for my UI grid system?▼

You can apply different density modes to your UI grid system by selecting from dense, balanced, and spacious options. Each mode provides predefined unit primitives to adjust the visual density of your design system components.

What is the best way to manage component heights and border radii in a design system?▼

The best way to manage component heights and border radii in a design system is to derive them from a standardized spacing ladder. Generating these values from a two-unit primitive model ensures proportional scaling across your UI.

Related Skills

Explore More Design & Creative Skills→
thejordanleopoldthejordanleopold
4

design-system

Codify design tokens, color, typography, spacing, and motion into a DESIGN.md deliverable.

Community
Advanced
thrillmadethrillmade
1

component-sizing

Select UI component heights using predefined ladders and WCAG 2.5.8 guidelines.

Official
Intermediate
lemulemu

visual-design-foundations

Standardize typography, color, spacing, and iconography into design tokens and guidelines.

Community
Intermediate
Higashi-KotaHigashi-Kota

styling

Standardize CSS styling with design tokens and grid-first layouts.

Community
Basic