Spacing & Sizing Hub
Configure base-unit spatial grids, test component padding & gap rhythms in an interactive layout sandbox, and generate fluid CSS clamp() tokens or Tailwind v4 @theme spacing tokens.
Interactive Spacing Studio
Configure spatial scale steps, test layout padding bounds, or generate responsive clamp tokens.
Base Unit & Multipliers
Configure base spatial grid steps and export tokens for CSS or Tailwind v4.
Grid System Summary
Base: 4px GridAll spatial steps are pre-computed multipliers of your 4px base unit, ensuring consistent vertical rhythm and component alignment.
Visual Spacing Ladder
Interactive dimension bars for each step in your spacing system.
Curated Spacing & Sizing Directory
25 production-ready spatial grid systems covering Tailwind 4px baselines, Apple 8pt grids, dense admin toolbars, marketing landers, and fluid clamp tokens.
Click any preset to load into the studio.
Tailwind Standard 4px System
4px Baseline System
The industry-standard 4px base step powering Tailwind CSS. Versatile for apps, websites, and design systems.
Material & Apple 8pt Spatial Grid
8px Spatial Grid
Classic 8pt spatial grid used in iOS HIG and Material Design. Ensures clean pixel alignment across mobile and desktop.
Dense Admin & Table Grid
Compact UI & Dense
Micro 4px spacing scale optimized for financial dashboards, code editors, and dense admin toolbars.
Expansive Hero Marketing
Marketing & Hero
Generous 8px/12px spacing scale providing airy margins and breathing room for high-converting marketing pages.
Fluid Responsive Clamp Scale
Fluid & Clamp Sizing
Fluid clamp() spacing token system that scales smoothly from 390px mobile screens to 1440px desktop displays.
Bento Grid Component Spacing
4px Baseline System
4px-based grid gap and card padding tuned for modern Bento box UI layouts and product feature matrices.
iOS Native App Spacing
8px Spatial Grid
Strict 8pt iOS layout margins (16pt screen padding, 12pt card gap, 44pt touch button targets).
IDE & Code Editor Micro-Grid
Compact UI & Dense
Ultra-compact 4px grid for developer workspace tools, file trees, and tab bars.
Airy Luxury Editorial
Marketing & Hero
Extra-large padding scale designed for high-end fashion, architectural portfolios, and luxury editorial magazines.
Fluid Type & Spacing Bridge
Fluid & Clamp Sizing
Integrated fluid clamp tokens matching modular type scale steps to section spacing.
SaaS Pricing Table Scale
4px Baseline System
4px-based grid gap and tier card padding for SaaS pricing tables and comparison grids.
Android Material 3 Layout Grid
8px Spatial Grid
Official Material 3 8dp grid system with 16dp compact and 24dp medium layout margins.
Form & Input Control Micro-Scale
Compact UI & Dense
4px micro scale for form labels, helper text gaps, input paddings, and button row inline gaps.
Editorial Blog Post Margins
Marketing & Hero
Generous paragraph spacing and article section margins tailored for comfortable reading.
Fluid Container Breakpoint Scale
Fluid & Clamp Sizing
Fluid clamp padding system for page containers scaling between mobile (16px) and desktop (64px).
10px Decimal Metric System
4px Baseline System
10px base unit system for teams who prefer round decimal calculations (5px, 10px, 20px, 30px...).
Tailwind v4 @theme Token Scale
4px Baseline System
Ready-to-copy Tailwind v4 @theme spacing scale matching custom CSS variable tokens.
Dashboard Widget Grid Scale
8px Spatial Grid
8px-based grid gap and widget padding tuned for executive dashboards and analytics cards.
Modal & Dialog Surface Spacing
Compact UI & Dense
4px-based padding and gap rules for overlay dialogs, popovers, dropdowns, and toast alerts.
Product Showcase Hero Banner
Marketing & Hero
Expansive vertical padding scale for landing page hero banners, product demos, and CTA sections.
Fluid Grid Gutter Clamp System
Fluid & Clamp Sizing
Fluid clamp grid gutters scaling smoothly from 12px on mobile to 32px on desktop displays.
E-Commerce Product Card Spacing
4px Baseline System
4px-based image padding, title gap, price tag margin, and CTA button padding for shop grids.
Design System Core Space Scale
8px Spatial Grid
Complete 8px-based spatial system ready for design-token documentation and component handoff.
Navigation Header & Bar Spacing
Compact UI & Dense
4px micro spacing for top navigation bars, brand logo padding, link items, and search inputs.
Fluid Hero Padding Clamp System
Fluid & Clamp Sizing
Fluid clamp padding system for hero sections scaling between mobile (32px) and desktop (96px).