Dimension Tokens
Fixed-size primitives, semantic interaction targets, and layout breakpoints extracted from approved Figma sources.
Scale
| Source token or rule | CSS token | px | rem | Preview |
|---|---|---|---|---|
| 7th.dimension.1300 | --sui-dimension-1300 |
44px | 2.75rem | |
| icon.target.min | --sui-dimension-interactive-min |
40px | 2.5rem | |
| icon.target.comfortable | --sui-dimension-interactive-comfortable |
48px | 3rem |
Layout Breakpoints
| Rule | CSS token | Value |
|---|---|---|
| Small min | --sui-breakpoint-small-min |
320px |
| Small max | --sui-breakpoint-small-max |
599px |
| Medium min | --sui-breakpoint-medium-min |
600px |
| Medium max | --sui-breakpoint-medium-max |
839px |
| Expanded min | --sui-breakpoint-expanded-min |
840px |
| Expanded max | --sui-breakpoint-expanded-max |
1199px |
| Large min | --sui-breakpoint-large-min |
1200px |
| Large max | --sui-breakpoint-large-max |
1599px |
| Extra-large min | --sui-breakpoint-extra-large-min |
1600px |
| Compact layout margin | --sui-layout-margin-compact |
16px |
| Regular layout margin | --sui-layout-margin-regular |
24px |