Layout

Tessera UI uses a systematic spacing scale with a comfortable default density. This ensures visual rhythm, consistent alignment, and predictable component composition.

---

Spacing Scale

All spacing uses tokens from this scale. Never use arbitrary pixel values.

—ts-spacing-0

0

—ts-spacing-1

6px

—ts-spacing-2

10px

—ts-spacing-3

16px

—ts-spacing-4

20px

—ts-spacing-5

24px

—ts-spacing-6

32px

—ts-spacing-8

40px

—ts-spacing-10

48px

—ts-spacing-12

64px

—ts-spacing-16

80px

The progression (6/10/16/20/24/32/40/48/64/80px) provides natural visual rhythm:

• 6px — minimum gap between closely related elements (label to field, icon to text)
• 10px — default inline gap, small button padding
• 16px — standard internal padding for components
• 20-24px — section gaps and medium component padding
• 32-40px — large container padding, section separation
• 48-80px — page-level layout spacing

---

Density Modes

Density modes remap spacing tokens globally via the data-density attribute. Components automatically adjust without any code changes.

Compact

Dashboard4/8px

Analytics4/8px

Settings4/8px

Reports4/8px

Default (Comfortable)

Dashboard6/10px

Analytics6/10px

Settings6/10px

Reports6/10px

Spacious

Dashboard8/12px

Analytics8/12px

Settings8/12px

Reports8/12px

Density Token Remapping

Token	Compact	Default	Spacious
--ts-spacing-1	4px	6px	8px
--ts-spacing-2	8px	10px	12px
--ts-spacing-3	12px	16px	20px
--ts-spacing-4	16px	20px	24px
--ts-spacing-5	20px	24px	32px
--ts-spacing-6	24px	32px	40px

Apply density on any ancestor element:

<!-- Compact data table -->
<div data-density="compact">
  <ts-table>...</ts-table>
</div>

<!-- Spacious marketing layout -->
<section data-density="spacious">
  <ts-card>...</ts-card>
</section>

---

Grid System

A 12-column grid provides the foundation for page layout.

1

2

3

4

5

6

7

8

9

10

11

12

Columns12

Gutter32px (default)

Margin20px

Compact Gutter16px

Spacious Gutter40px

---

Breakpoints

Breakpoints define responsive layout transitions. Stored as CSS custom properties for JS access (CSS media queries require static values).

sm640px

md768px

lg1024px

xl1280px

2xl1536px

/* Use in media queries with static values */
@media (min-width: 640px)  { /* sm  */ }
@media (min-width: 768px)  { /* md  */ }
@media (min-width: 1024px) { /* lg  */ }
@media (min-width: 1280px) { /* xl  */ }
@media (min-width: 1536px) { /* 2xl */ }

---

Spacing Rhythm in Practice

Consistent spacing creates visual grouping. Related elements use smaller gaps; distinct sections use larger gaps.

Project Update

2 minutes ago

16px padding

The new dashboard components have been reviewed and are ready for integration testing.

10px gap between paragraphs / 20px block padding / 16px inline padding

ReplyShare10px gap / 12px block padding

---

Touch Targets

Minimum interactive area sizes ensure usability across input methods.

Token	Value	Usage
--ts-touch-target-min	44px	Default minimum (WCAG compliant)
--ts-touch-target-compact	32px	Compact mode (data-dense UIs only)