Spacing

Tessera UI provides a spacing scale built on CSS custom properties. The scale uses a curated set of values rather than a linear sequence, which means some numbers are intentionally skipped.

---

Spacing Scale Reference

The table below shows every spacing token, its CSS value, and the resolved pixel size across all three density modes.

Token	Default (Comfortable)	Compact	Spacious	Visual
--ts-spacing-0	0	0	0
--ts-spacing-1	0.375rem (6px)	0.25rem (4px)	0.5rem (8px)
--ts-spacing-2	0.625rem (10px)	0.5rem (8px)	0.75rem (12px)
--ts-spacing-3	1rem (16px)	0.75rem (12px)	1.25rem (20px)
--ts-spacing-4	1.25rem (20px)	1rem (16px)	1.5rem (24px)
--ts-spacing-5	1.5rem (24px)	1.25rem (20px)	2rem (32px)
--ts-spacing-6	2rem (32px)	1.5rem (24px)	2.5rem (40px)
--ts-spacing-8	2.5rem (40px)	2.5rem (40px)	2.5rem (40px)
--ts-spacing-10	3rem (48px)	3rem (48px)	3rem (48px)
--ts-spacing-12	4rem (64px)	4rem (64px)	4rem (64px)
--ts-spacing-16	5rem (80px)	5rem (80px)	5rem (80px)

Note

Tokens 8, 10, 12, and 16 are not remapped by density modes. They serve as fixed layout anchors for page-level spacing that should remain constant regardless of density setting.

---

About the Numbering Gaps

Tokens 7, 9, 11, and 13-15 are intentionally skipped — the scale maps to the geometric progression used across the component library. Rather than providing a value at every integer, the scale includes only the steps that are actually needed for consistent visual rhythm. This avoids “in-between” sizes that would create ambiguity and inconsistent spacing decisions.

The numbering after --ts-spacing-6 switches to even increments (8, 10, 12, 16) because at larger sizes the visual difference between adjacent steps is less perceptible and fewer stops are needed. The numbers themselves reflect relative magnitude rather than a sequential index.

Do not create custom tokens to fill the gaps. If you find yourself needing a value between two existing tokens, consider whether one of the existing tokens is a better fit for the use case.

---

When to Use Each Token

Token	Default Value	Typical Usage
--ts-spacing-0	0	Reset spacing, flush alignment
--ts-spacing-1	6px	Tightest gap — icon to label, label to field
--ts-spacing-2	10px	Inline padding, small gaps between related items
--ts-spacing-3	16px	Standard component internal padding
--ts-spacing-4	20px	Section gaps, medium component padding
--ts-spacing-5	24px	Card padding, form group separation
--ts-spacing-6	32px	Large container padding, section dividers
--ts-spacing-8	40px	Page section separation
--ts-spacing-10	48px	Major layout regions
--ts-spacing-12	64px	Page-level vertical rhythm
--ts-spacing-16	80px	Hero sections, maximum breathing room

---

Usage in CSS

Always reference spacing tokens rather than hard-coded values:

/* Correct */
.card {
  padding: var(--ts-spacing-3);
  gap: var(--ts-spacing-2);
}

/* Incorrect -- bypasses density modes */
.card {
  padding: 16px;
  gap: 10px;
}

Using tokens ensures your layout automatically adjusts when a user or container switches density via the data-density attribute. See the Layout page for density modes, grid system, and breakpoint details.