Token reference
Length
Governed dimensions for controls, targets, measures, and structural layout.
Overview
Governed dimensions for controls, targets, measures, and structural layout. Values come from canonical DTCG JSON or are derived from governed responsive and preference contracts. Published names are versioned APIs. This page is a structural counterpart of the audited reference information architecture.
Token Reference
| Token path | Set | Type | Canonical value | CSS custom property |
|---|---|---|---|---|
size.control.compact | global | dimension | 2rem | --he-size-control-compact |
size.control.small | global | dimension | 2.5rem | --he-size-control-small |
size.control.medium | global | dimension | 2.75rem | --he-size-control-medium |
size.control.large | global | dimension | 3rem | --he-size-control-large |
size.control.extraLarge | global | dimension | 3.5rem | --he-size-control-extra-large |
size.control.xs | global | dimension | {size.control.compact} | --he-size-control-xs |
size.control.sm | global | dimension | {size.control.small} | --he-size-control-sm |
size.control.md | global | dimension | {size.control.medium} | --he-size-control-md |
size.control.lg | global | dimension | {size.control.large} | --he-size-control-lg |
size.control.xl | global | dimension | {size.control.extraLarge} | --he-size-control-xl |
size.icon.xs | global | dimension | 0.75rem | --he-size-icon-xs |
size.icon.sm | global | dimension | 1rem | --he-size-icon-sm |
size.icon.md | global | dimension | 1.25rem | --he-size-icon-md |
size.icon.lg | global | dimension | 1.5rem | --he-size-icon-lg |
size.icon.xl | global | dimension | 2rem | --he-size-icon-xl |
size.icon.2xl | global | dimension | 3rem | --he-size-icon-2xl |
size.target.minimumWeb | global | dimension | 2.75rem | --he-size-target-minimum-web |
size.target.minimum | global | dimension | {size.target.minimumWeb} | --he-size-target-minimum |
layout.gutter.mobile | global | dimension | 24px | --he-layout-gutter-mobile |
layout.gutter.tablet | global | dimension | 48px | --he-layout-gutter-tablet |
layout.gutter.desktop | global | dimension | 7vw | --he-layout-gutter-desktop |
layout.content.reading | global | dimension | 720px | --he-layout-content-reading |
layout.content.standard | global | dimension | 1200px | --he-layout-content-standard |
layout.content.wide | global | dimension | 1440px | --he-layout-content-wide |
layout.grid.columns.compact | global | number | 4 | --he-layout-grid-columns-compact |
layout.grid.columns.tablet | global | number | 8 | --he-layout-grid-columns-tablet |
layout.grid.columns.desktop | global | number | 12 | --he-layout-grid-columns-desktop |
layout.grid.gap.compact | global | dimension | {space.4} | --he-layout-grid-gap-compact |
layout.grid.gap.tablet | global | dimension | {space.6} | --he-layout-grid-gap-tablet |
layout.grid.gap.desktop | global | dimension | {space.6} | --he-layout-grid-gap-desktop |
Usage
- Consume semantic or component aliases in application code.
- Use global values only to author or review foundation aliases.
- Keep responsive and preference behavior aligned across Web and Flutter.
- Do not edit generated outputs or introduce an unregistered literal.
Accessibility
Changes require cross-theme contrast, text-scaling, reflow, forced-colors, reduced-motion, and input-modality review where applicable. A token cannot make essential meaning depend on color, opacity, motion, elevation, or viewport size alone.
Web and Flutter API
/* Web */
color: var(--he-size-control-compact);
// Flutter
final value = HeTokens.sizeControlCompact;The example uses an exact generated name. The table is the complete Web reference; global and semantic Flutter constants are generated in he_tokens.g.dart, while component contracts own component-level values.