Layout

var(--set-layout-border-width-default)

Default border width. Use as the system's standard border weight.

var(--set-layout-border-width-thick)

Thick border width. Use for emphasised strokes (focus rings, prominent dividers).

var(--set-layout-container-max-width-default)

Default container max-width. Use as the standard content width for typical pages.

var(--set-layout-container-max-width-wide)

Wide container max-width. Use for content that benefits from more horizontal space on wider screens (e.g. site furniture).

var(--set-layout-container-gutter-narrow)

Narrow container gutter. Use in tight responsive layouts where the default gutter consumes too much horizontal space.

var(--set-layout-container-gutter-default)

Default container gutter. The inline padding between page edge and content.

var(--set-layout-focus-ring-outset)

Focus ring outset. Total outward extent of the ring beyond the element edge. Use in size calculations that need to account for the ring (e.g. corner radius on focus states).

var(--set-layout-focus-ring-width)

Focus ring stroke width. Use as the line thickness of the focus indicator.

var(--set-layout-focus-ring-offset-inset)

Inset focus ring offset. Use when the ring sits inside the element bounds (e.g. when an outset ring would clip).

var(--set-layout-focus-ring-offset-default)

Default focus ring offset between the focused element and its ring.

var(--set-layout-focus-ring-offset-lg)

Larger focus ring offset. Use on elements where the default offset would feel cramped.

var(--set-layout-grid-columns)

Grid column count for the standard layout grid.

var(--set-layout-grid-gap-sm)

Small grid gap. Use for compact grids where columns should sit close together.

var(--set-layout-grid-gap-md)

Default grid gap.

var(--set-layout-grid-gap-lg)

Large grid gap. Use for spacious grids (marketing layouts, gallery views) where columns benefit from extra breathing room.

var(--set-layout-grid-item-min-width)

Minimum width for grid items. Use as the floor below which items shouldn't shrink.

var(--set-layout-icon-size-2xs)

Smallest icon size.

var(--set-layout-icon-size-xs)

Small icon size.

var(--set-layout-icon-size-sm)

Moderate icon size.

var(--set-layout-icon-size-md)

Default icon size. Also used for icon-shaped elements (spinners, radios, checkboxes). Pick the step that visually balances surrounding text size and UI scale.

var(--set-layout-icon-size-lg)

Largest icon size.

var(--set-layout-icon-viewbox-inset-ratio)

Icon viewBox inset ratio. Use as the multiplier for compensating icon edge inset in layout calculations.

var(--set-layout-icon-viewbox-outset-ratio)

Icon viewBox outset ratio. Use as the multiplier for compensating icon edge outset in layout calculations.

var(--set-layout-divider-brand-size)

Brand divider size. The length of a brand-marked divider element.

var(--set-layout-divider-brand-thickness)

Brand divider thickness. The cross-axis dimension of a brand-marked divider.