Typography, Space, and Material

Font roles

Serif type never enters the application shell, forms, or data tables. Money, dates, statistics, and identifiers use tabular numbers.

Type scale

Body uses weight 400 and line-height 1.5. Labels use 500 and 1.4. Headings use 600 and 1.25. Do not use thin 300 weight.

Reference spacing

Theme and Density never rewrite Reference spacing.

Radius

Do not scale all components from one global radius or build a default wall of large-radius cards.

Elevation

Colored shadows and glow are prohibited.

Motion and density

Durations are 0ms, 120ms, 180ms, and 240ms. Structural motion becomes instant under prefers-reduced-motion.

Global component tokens

Global component tokens do not vary with density. They define fixed shell, page, and panel dimensions:

Density

Density has four levels: dense, compact, comfortable, spacious. dense targets high-density tables and bulk desktop operations; spacious targets touch and accessibility scaling.

Density overrides control, table, field, panel, and workspace semantic dimensions. It does not change font families, brand colors, Reference spacing, or page structure. control-font-size and control-line-height vary with density and are further scaled by the accessibility fontScale axis. Dense interaction targets remain at least 24px; visible line height and touch target are calculated separately.

Button, input, select, table, query toolbar, and panel primitives must consume these Component Tokens directly. Changing only the data-density attribute without changing the rendered geometry is not a conformant density implementation.

Consumption examples

A table primitive reads density-aware Component Tokens directly. Changing the root data-density updates row height, padding, and typography without maintaining four component class sets:

/* Geometry follows the active Density and never reads Reference spacing. */
.data-cell {
  min-block-size: var(--cmp-table-row-height);
  padding: var(--cmp-table-cell-padding-y) var(--cmp-table-cell-padding-x);
  font-size: var(--cmp-control-font-size);
  line-height: var(--cmp-control-line-height);
}

Structural motion and elevation use System Tokens. data-reduce-motion=true or the operating-system preference remaps System duration to instant, so a product component needs no second animation branch:

/* Stable semantic roles control sheet size, elevation, and motion. */
.operation-sheet {
  inline-size: clamp(
    var(--cmp-panel-min-width),
    var(--cmp-panel-default-width),
    var(--cmp-panel-max-width)
  );
  box-shadow: var(--sys-elevation-sheet);
  transition-duration: var(--sys-duration-structural);
}