// REFERENCE

Spacing Scale Reference

Consistent spacing creates visual harmony. Use this scale for margins, padding, and gaps throughout your interface.

👕

T-Shirt Size Scale

8 sizes
3xs
2px
2xs
4px
xs
8px
sm
12px
md
16px
lg
24px
xl
32px
2xl
48px
3xl
64px
4xl
96px
📐

Spacing Categories

4 categories
🎯

Tight Spacing

Used for closely related elements that need visual connection. Creates cohesion between grouped items.

3xs - xs 2-8px
Use Cases
Chip groups, badges, inline icons with text, form field spacing.
Examples
cohesion grouped
📦

Standard Spacing

The workhorse of your spacing system. Used for most component internals and typical element gaps.

sm - md 12-16px
Use Cases
Card padding, button padding, list item spacing, form field spacing.
Examples
components default
📏

Comfortable Spacing

Creates breathing room between distinct sections. Used when elements need visual separation without being disconnected.

lg - xl 24-32px
Use Cases
Section padding, modal content spacing, modal header/footer separation.
Examples
sections breathing
🌌

Generous Spacing

Maximum impact spacing for major structural divisions. Use sparingly to maintain hierarchy.

2xl - 4xl 48-96px
Use Cases
Page section separation, hero section padding, footer top spacing.
Examples
structure impact
🔄

Spacing Patterns

3 patterns
🔲

Box Padding

Internal spacing within containers. Provides breathing room between container edges and content.

sm - lg 12-24px
Formula
Top/Bottom: lg (24px), Left/Right: lg (24px) for cards. Adjust based on component size.
Content inside card
internal padding
📏

Stack Gap

Vertical spacing between stacked elements. Creates rhythm in vertical layouts.

md - xl 16-32px
Formula
Use same spacing on all stacked items for consistency. Increase by one step for major section breaks.
Item 1 (16px gap)
Item 2 (16px gap)
Item 3
vertical stack
↔️

Inline Gap

Horizontal spacing between inline or adjacent elements. Maintains flow in horizontal layouts.

xs - md 8-16px
Formula
Smaller spacing for inline elements. Use flexbox gap or grid gap for consistent horizontal spacing.
Item 1
Item 2
Item 3
horizontal inline
📱

Responsive Spacing

3 breakpoints
📱

Mobile

Smaller spacing values for mobile screens. Tighter spacing maximizes limited screen real estate.

base <640px
Scale Adjustment
Use one step down from base scale. 2xl becomes xl, xl becomes lg.
mobile compact
📱

Tablet

Medium spacing for tablet devices. Bridge between mobile and desktop experiences.

md +1 640-1024px
Scale Adjustment
Use base scale values. May need slight increases for tablet-specific layouts.
tablet bridge
🖥️

Desktop

Full spacing scale for desktop. More space creates comfortable, spacious interfaces on large screens.

md +2 >1024px
Scale Adjustment
Use full scale values. Can increase by one step for premium desktop experiences.
desktop spacious
📊

Extended Spacing Scale

20 references
1️⃣

4xs - Micro

Ultra-tight spacing for micro-adjustments and fine-tuning element positioning.

4xs 1px 0.0625rem
Use Cases
Border thickness, hairline dividers, icon nudging, pixel-perfect adjustments.
Live Preview - 1px Divider
Section A
Section B
micro fine-tune
2️⃣

3xs - Mini

Minimal spacing for tight groupings where elements need to feel connected.

3xs 2px 0.125rem
Use Cases
Tight icon groups, compact badges, inline spacing, micro gaps.
Live Preview - Tight Icon Group
★ ★ ★ ★ ★
minimal compact
3️⃣

2xs - Extra Small

Extra small spacing for closely related elements within components.

2xs 4px 0.25rem
Use Cases
Input padding, button internal spacing, small gaps in forms.
Live Preview - Compact Input
Compact input
extra-small component
4️⃣

xs - Small

Small spacing for related items that need slight separation.

xs 8px 0.5rem
Use Cases
Icon + text pairs, small button groups, inline element gaps.
Live Preview - Icon + Text
✓ 8px gap
small inline
5️⃣

sm - Small Medium

Small-medium spacing for component internals and tight layouts.

sm 12px 0.75rem
Use Cases
Card compact padding, small modal padding, list item gaps.
Live Preview - Compact Card
Card Title
12px padding
compact internal
6️⃣

md - Base Medium

The base medium spacing - the standard unit for most UI spacing.

md 16px 1rem
Use Cases
Standard card padding, button padding, form field spacing.
Live Preview - Standard Card
Card Title
Standard 16px padding creates comfortable breathing room.
base standard
7️⃣

lg - Large

Large spacing for section breaks and component separation.

lg 24px 1.5rem
Use Cases
Section padding, modal content spacing, card generous padding.
Live Preview - Spacious Card
Spacious Card
24px padding gives content more room to breathe.
large section
8️⃣

xl - Extra Large

Extra large spacing for major component divisions.

xl 32px 2rem
Use Cases
Large card padding, section content gaps, feature block spacing.
Live Preview - Feature Block
Feature Title
32px padding for feature blocks.
extra-large feature
9️⃣

2xl - Double Large

Double large spacing for major structural divisions.

2xl 48px 3rem
Use Cases
Page section separation, large component gaps, hero spacing.
Live Preview - Section Break
Section A
48px gap
Section B
double structural
🔟

3xl - Triple Large

Triple large spacing for page-level structural separation.

3xl 64px 4rem
Use Cases
Major section breaks, landing page sections, large hero areas.
Live Preview - Major Section
Hero Section
64px separation
Content Section
triple page-level
📏

4xl - Quadruple Large

Maximum standard spacing for dramatic page divisions.

4xl 96px 6rem
Use Cases
Hero section padding, major landing zones, footer separation.
Live Preview - Hero Padding
Hero Content
96px vertical padding
maximum hero
🎯

5xl - Extra Massive

Extra massive spacing for dramatic visual impact sections.

5xl 128px 8rem
Use Cases
Full-page hero sections, dramatic landing pages, immersive experiences.
Live Preview - Full Page Hero
128px Spacing
Dramatic landing zones
massive dramatic
🌌

6xl - Ultra Massive

Ultra massive spacing for maximum impact layouts.

6xl 160px 10rem
Use Cases
Immersive landing pages, portfolio showcases, presentation sites.
Live Preview - Immersive Layout
160px Ultra
Portfolio showcase spacing
ultra immersive
🚀

7xl - Epic

Epic spacing for bold, statement-making designs.

7xl 192px 12rem
Use Cases
Epic landing pages, brand showcases, artistic presentations.
Live Preview - Epic Statement
192px EPIC
Statement design spacing
epic statement
🎨

8xl - Monumental

Monumental spacing for gallery-style and editorial layouts.

8xl 224px 14rem
Use Cases
Gallery pages, editorial spreads, premium brand experiences.
Live Preview - Monumental
224px MONUMENTAL
Gallery layout spacing
monumental gallery
🏔️

9xl - Supreme

Supreme spacing for ultimate premium and luxury experiences.

9xl 256px 16rem
Use Cases
Luxury brand sites, high-end portfolios, exclusive experiences.
Live Preview - Supreme
256px SUPREME
Luxury experience
supreme luxury
⚡

Button Compact

Specialized spacing for compact button sizes and micro-interactions.

btn-sm 6px 12px 0.375rem 0.75rem
Use Cases
Small buttons, icon buttons, chip components, badge elements.
Live Preview - Compact Button
button compact
🔘

Button Default

Standard button padding for primary actions and CTAs.

btn-md 12px 24px 0.75rem 1.5rem
Use Cases
Primary buttons, CTAs, form submit buttons, main actions.
Live Preview - Default Button
button default
⬜

Button Large

Large button padding for hero CTAs and prominent actions.

btn-lg 16px 32px 1rem 2rem
Use Cases
Hero CTAs, landing page buttons, prominent actions, feature buttons.
Live Preview - Large Button
button large
🔳

Container Padding

Standard container padding for page layouts and content areas.

container 5% responsive
Use Cases
Page containers, section wrappers, content areas, grid gutters.
Live Preview - Container
Viewport Edge
Content Area (5% padding)
Viewport Edge
container layout