HELIOS UI · FOUNDATIONS

Spacing, radius & grids

Resolved dimensions and interactive layout previews.

Dimensions and layout

Spacing and radius options below come from the existing resolved token snapshot. Custom gap previews are labeled as CSS examples and do not create new tokens.

Search dimension tokens

Spacing roleRadius roleGrid columns

Preview gap: 24px · Spacing roles/spacing-3xl

Button

Input

Card

Radius: Radius roles/radius-md · 8px. The preview scrolls so the selected pixel spacing remains exact on small screens.

123456789101112

Spacing roles

Radius roles

Local reference snapshot · no live Figma synchronizationOpen Spacing, radius & grids in Figma

HELIOS UI · FOUNDATIONS

Spacing, radius & grids

Resolved dimensions and interactive layout previews.

Dimensions and layout

Spacing and radius options below come from the existing resolved token snapshot. Custom gap previews are labeled as CSS examples and do not create new tokens.

Search dimension tokens

Spacing roleRadius roleGrid columns

Preview gap: 24px · Spacing roles/spacing-3xl

Button

Input

Card

Radius: Radius roles/radius-md · 8px. The preview scrolls so the selected pixel spacing remains exact on small screens.

123456789101112

Spacing roles

Radius roles

Local reference snapshot · no live Figma synchronizationOpen Spacing, radius & grids in Figma

Spacing, radius & grids

Dimensions and layout

Spacing roles

Radius roles

Search Helios UI

Spacing, radius & grids

Dimensions and layout

Spacing roles

Radius roles

Search Helios UI