Material Design Space Guide

Comprehensive spacing specifications for web and mobile app design

Base Grid System

Material Design uses an 8dp base grid system. All spacing should be multiples of 8dp for consistency.

4dp
Micro spacing
Icon padding, small gaps
8dp
Base unit
Standard spacing unit
16dp
Small spacing
Between related elements
24dp
Medium spacing
Section padding, card margins
32dp
Large spacing
Major section separation
48dp
Extra large
Page margins, hero sections

Mobile Specifications

Screen Margins

16dp side margins (standard)
24dp side margins (wide content)

Component Heights

48dp
Button height
Standard touch target
56dp
List item height
Single line list items
64dp
App bar height
Standard app bar
72dp
Two-line list item
List with subtitle

Desktop Specifications

Layout Grid

12 columns with 24px gutters
Minimum 24px margins
Maximum 1440px content width

Component Sizing

36px
Button height
Standard desktop button
40px
Input field height
Text inputs, dropdowns
64px
App bar height
Dense desktop app bar
48px
List item height
Compact list items

Typography Spacing

4dp
Letter spacing
Tight letter spacing
8dp
Line spacing
Between text lines
16dp
Paragraph spacing
Between paragraphs
24dp
Section spacing
Between content sections

Interactive Component Spacing Tool

Select a component to see its recommended spacing values and visual preview:

Button

Card

List Item

Input Field

Navigation

Dialog

FAB

Chip

Select a component

Visual Preview

Click on a component above to see its preview and spacing details
Property Mobile (dp) Desktop (px) Usage

Figma Setup Tips

1. Set up your grid: Use 8px base grid with 24px gutters

2. Create spacing tokens: Set up 4, 8, 16, 24, 32, 48dp as style tokens

3. Use Auto Layout: Leverage Figma's Auto Layout with these spacing values

4. Component variants: Create mobile and desktop variants for each component

5. Consistency check: Use plugins like "Design Lint" to ensure spacing consistency