Token reference
Border
Border widths, focus geometry, and corner-radius decisions.
Overview
Border widths, focus geometry, and corner-radius decisions. 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 |
|---|---|---|---|---|
radius.none | global | dimension | 0rem | --he-radius-none |
radius.sm | global | dimension | 0.25rem | --he-radius-sm |
radius.md | global | dimension | 0.5rem | --he-radius-md |
radius.lg | global | dimension | 0.75rem | --he-radius-lg |
radius.xl | global | dimension | 1rem | --he-radius-xl |
radius.full | global | dimension | 9999px | --he-radius-full |
radius.2xl | global | dimension | {radius.xl} | --he-radius-2xl |
radius.3xl | global | dimension | {radius.xl} | --he-radius-3xl |
radius.pill | global | dimension | {radius.full} | --he-radius-pill |
border.width.none | global | dimension | 0rem | --he-border-width-none |
border.width.default | global | dimension | 0.0625rem | --he-border-width-default |
border.width.strong | global | dimension | 0.125rem | --he-border-width-strong |
border.width.focus | global | dimension | 0.1875rem | --he-border-width-focus |
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-radius-none);
// Flutter
final value = HeTokens.radiusNone;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.