Token reference

Breakpoints

Content-driven responsive thresholds expressed as canonical dimensions.

6 tokensglobal · 6Reference category

Overview

Content-driven responsive thresholds expressed as canonical dimensions. 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
`breakpoint.compact`	global	`dimension`	`360px`	`--he-breakpoint-compact`
`breakpoint.mobile`	global	`dimension`	`600px`	`--he-breakpoint-mobile`
`breakpoint.tablet`	global	`dimension`	`760px`	`--he-breakpoint-tablet`
`breakpoint.desktop`	global	`dimension`	`1024px`	`--he-breakpoint-desktop`
`breakpoint.wide`	global	`dimension`	`1280px`	`--he-breakpoint-wide`
`breakpoint.max`	global	`dimension`	`1440px`	`--he-breakpoint-max`

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.

Open related foundation guidance

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-breakpoint-compact);

// Flutter
final value = HeTokens.breakpointCompact;

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.