prompt

Spacing System Builder

Builds a consistent spacing scale and rules for applying it across a UI.

VettedUpdated June 2026
The prompt
Build a spacing system for {{product}} based on a {{base_unit}} base unit. Provide the scale (the step values), names or tokens for each step, guidance on which steps to use for tight, default, and section spacing, and one rule for vertical rhythm. Keep it simple enough to remember.
Did it work? Rate this prompt

Variables

productProduct
base_unitBase unit

Example output

Spacing system on a 4px base. Scale: 4, 8, 12, 16, 24, 32, 48, 64. Tokens: space-1 (4) to space-8 (64). Use: 4-8 for tight spacing inside components (icon to label, input padding); 12-16 as the default gap between related elements; 24-32 between distinct groups; 48-64 between page sections. Vertical rhythm rule: stack spacing should always come from the scale — never a one-off value like 13 or 27. This keeps every screen visually consistent and easy to hand off.

Details

Author

AI Khazna

License

—

Security

Vetted

Type

prompt

Frequently asked questions

What is the Spacing System Builder prompt?

Builds a consistent spacing scale and rules for applying it across a UI.

Is Spacing System Builder free?

Yes, it is free to use.

Related assets

More curated picks in Design & Creative.

prompt
Checks color pairs against WCAG contrast rules and suggests accessible fixes.
Accessibility Contrast Checker
Checks color pairs against WCAG contrast rules and suggests accessible fixes.0+
prompt
Specs a UI component with its variants, states, sizing, and usage rules for a design system.
Design System Component Spec
Specs a UI component with its variants, states, sizing, and usage rules for a design system.0+
prompt
Turns a vague design ask into a structured creative brief a designer can act on.
Creative Brief Generator
Turns a vague design ask into a structured creative brief a designer can act on.0+
prompt
Adapts a light-mode color palette to an accessible dark-mode palette with surface and text tokens.
Dark Mode Palette Adapter
Adapts a light-mode color palette to an accessible dark-mode palette with surface and text tokens.0+
prompt
Defines a consistent illustration direction including style, palette, composition, and do/don't rules.
Illustration Style Brief
Defines a consistent illustration direction including style, palette, composition, and do/don't rules.0+
prompt
Recommends harmonious font pairings for a brand or project with rationale and usage guidance.
Font Pairing Advisor
Recommends harmonious font pairings for a brand or project with rationale and usage guidance.0+

Audit before you install

Run any source through our checks - AI visibility, security, performance, and stack detection.

AI Agent / MCP Server Tester

ai testing

Automated Web Security Scan

security

AI Content Quality Test

arabic content

Site Stack Detector

migration

PageSpeed Analyzer

performance

AI SEO / AEO / GEO Audit

ai visibility

llms.txt Generator

ai visibility

Schema / JSON-LD Builder

ai visibility

Readability Score

arabic content

AI Cost Calculator

ai testing

Headline Analyzer

arabic content

More in Design & Creative