Spacing · Learn

Spacing

Material spacing tokens are a fixed numeric measurement scale. space100 is 8px at every Density profile; purpose lives in the component and product-layout recipes that map their attributes to the scale.

Density model

Mappings change. Measurement values do not.

Comfortable, Cozy, and Compact coordinate layout information density with eligible components' Material levels. The label-to-level binding is Etesie product policy, not a Material token mapping. Raw utilities such as gap-space200 always remain literal.

Customize Density →

Material scale

Fixed measurement tokens

Use the scale as measurement vocabulary. Use Use the system when the job—not the token name—is your starting point.

space0 0px

space25 2px

space50 4px

space75 6px

space100 8px

space125 10px

space150 12px

space175 14px

space200 16px

space250 20px

space300 24px

space400 32px

space450 36px

space500 40px

space600 48px

space700 56px

space800 64px

space900 72px

Components own inside space

Supported components name attributes such as container height, padding, and content gap. Eligible recipes author each density level; focused tasks and targets may stay at level 0.

Layouts own relationships

A named product-layout recipe maps item, group, region, and page-edge relationships according to its scan, standard, or focus intent.

Breakpoints cap page edges

Available width can cap outer room without rewriting a person's Density preference. Tailwind responsive utilities apply those Material tokens on the web.