Token reference
All tokens
Complete generated inventory across global, semantic, component, visualization, and brand sets.
Overview
Complete generated inventory across global, semantic, component, visualization, and brand sets. Values come from canonical DTCG JSON or are derived from governed responsive and preference contracts. Published names are versioned APIs. This page is a governed extension to the audited reference information architecture.
Token Reference
| Token path | Set | Type | Canonical value | CSS custom property |
|---|---|---|---|---|
color.palette.neutral.0 | global | color | #FFFFFF | --he-color-palette-neutral-0 |
color.palette.neutral.25 | global | color | #FBFCFC | --he-color-palette-neutral-25 |
color.palette.neutral.50 | global | color | #F2F5F7 | --he-color-palette-neutral-50 |
color.palette.neutral.100 | global | color | #E4EDF2 | --he-color-palette-neutral-100 |
color.palette.neutral.200 | global | color | #C8D6DF | --he-color-palette-neutral-200 |
color.palette.neutral.300 | global | color | #A8BBC7 | --he-color-palette-neutral-300 |
color.palette.neutral.400 | global | color | #7890A0 | --he-color-palette-neutral-400 |
color.palette.neutral.500 | global | color | #5C7484 | --he-color-palette-neutral-500 |
color.palette.neutral.600 | global | color | #425A6A | --he-color-palette-neutral-600 |
color.palette.neutral.700 | global | color | #2B4659 | --he-color-palette-neutral-700 |
color.palette.neutral.800 | global | color | #183B56 | --he-color-palette-neutral-800 |
color.palette.neutral.900 | global | color | #102A43 | --he-color-palette-neutral-900 |
color.palette.neutral.950 | global | color | #071B2B | --he-color-palette-neutral-950 |
color.palette.pasture.50 | global | color | #F5FBEF | --he-color-palette-pasture-50 |
color.palette.pasture.100 | global | color | #E9F5DE | --he-color-palette-pasture-100 |
color.palette.pasture.200 | global | color | #D2EABF | --he-color-palette-pasture-200 |
color.palette.pasture.300 | global | color | #B0D894 | --he-color-palette-pasture-300 |
color.palette.pasture.400 | global | color | #86BA67 | --he-color-palette-pasture-400 |
color.palette.pasture.500 | global | color | #5F9445 | --he-color-palette-pasture-500 |
color.palette.pasture.600 | global | color | #4D7E32 | --he-color-palette-pasture-600 |
color.palette.pasture.700 | global | color | #3A6127 | --he-color-palette-pasture-700 |
color.palette.pasture.800 | global | color | #29491F | --he-color-palette-pasture-800 |
color.palette.pasture.900 | global | color | #18331A | --he-color-palette-pasture-900 |
color.palette.pasture.950 | global | color | #0E2413 | --he-color-palette-pasture-950 |
color.palette.pasture.signal | global | color | #D9FF72 | --he-color-palette-pasture-signal |
color.palette.atlantic.50 | global | color | #EFF9FF | --he-color-palette-atlantic-50 |
color.palette.atlantic.100 | global | color | #D9F0FF | --he-color-palette-atlantic-100 |
color.palette.atlantic.200 | global | color | #B7E3FF | --he-color-palette-atlantic-200 |
color.palette.atlantic.300 | global | color | #73C9FF | --he-color-palette-atlantic-300 |
color.palette.atlantic.400 | global | color | #46B1F2 | --he-color-palette-atlantic-400 |
color.palette.atlantic.500 | global | color | #198CCF | --he-color-palette-atlantic-500 |
color.palette.atlantic.600 | global | color | #1478B8 | --he-color-palette-atlantic-600 |
color.palette.atlantic.700 | global | color | #075F9B | --he-color-palette-atlantic-700 |
color.palette.atlantic.800 | global | color | #144F78 | --he-color-palette-atlantic-800 |
color.palette.atlantic.900 | global | color | #103A59 | --he-color-palette-atlantic-900 |
color.palette.atlantic.950 | global | color | #08263D | --he-color-palette-atlantic-950 |
color.palette.green.50 | global | color | #ECFDF3 | --he-color-palette-green-50 |
color.palette.green.100 | global | color | #D1FADF | --he-color-palette-green-100 |
color.palette.green.500 | global | color | #12B76A | --he-color-palette-green-500 |
color.palette.green.700 | global | color | #027A48 | --he-color-palette-green-700 |
color.palette.green.900 | global | color | #054F31 | --he-color-palette-green-900 |
color.palette.amber.50 | global | color | #FFFAEB | --he-color-palette-amber-50 |
color.palette.amber.100 | global | color | #FEF0C7 | --he-color-palette-amber-100 |
color.palette.amber.400 | global | color | #FDB022 | --he-color-palette-amber-400 |
color.palette.amber.700 | global | color | #B54708 | --he-color-palette-amber-700 |
color.palette.amber.900 | global | color | #7A2E0E | --he-color-palette-amber-900 |
color.palette.red.50 | global | color | #FEF3F2 | --he-color-palette-red-50 |
color.palette.red.100 | global | color | #FEE4E2 | --he-color-palette-red-100 |
color.palette.red.500 | global | color | #F04438 | --he-color-palette-red-500 |
color.palette.red.700 | global | color | #B42318 | --he-color-palette-red-700 |
color.palette.red.900 | global | color | #7A271A | --he-color-palette-red-900 |
color.palette.violet.50 | global | color | #F5F3FF | --he-color-palette-violet-50 |
color.palette.violet.300 | global | color | #C4B5FD | --he-color-palette-violet-300 |
color.palette.violet.600 | global | color | #7C3AED | --he-color-palette-violet-600 |
color.palette.violet.800 | global | color | #5B21B6 | --he-color-palette-violet-800 |
color.palette.coral.100 | global | color | #FCE6DE | --he-color-palette-coral-100 |
color.palette.coral.300 | global | color | #F2B29A | --he-color-palette-coral-300 |
color.palette.coral.500 | global | color | #F19A77 | --he-color-palette-coral-500 |
color.palette.coral.700 | global | color | #B8583C | --he-color-palette-coral-700 |
font.family.display | global | fontFamily | Manrope | --he-font-family-display |
font.family.body | global | fontFamily | DM Sans | --he-font-family-body |
font.family.mono | global | fontFamily | JetBrains Mono | --he-font-family-mono |
font.weight.regular | global | fontWeight | 400 | --he-font-weight-regular |
font.weight.medium | global | fontWeight | 500 | --he-font-weight-medium |
font.weight.semibold | global | fontWeight | 600 | --he-font-weight-semibold |
font.weight.bold | global | fontWeight | 700 | --he-font-weight-bold |
font.size.xs | global | dimension | 0.75rem | --he-font-size-xs |
font.size.sm | global | dimension | 0.875rem | --he-font-size-sm |
font.size.md | global | dimension | 1rem | --he-font-size-md |
font.size.lg | global | dimension | 1.125rem | --he-font-size-lg |
font.size.xl | global | dimension | 1.25rem | --he-font-size-xl |
font.size.2xl | global | dimension | 1.5rem | --he-font-size-2xl |
font.size.3xl | global | dimension | 2rem | --he-font-size-3xl |
font.size.4xl | global | dimension | 2.5rem | --he-font-size-4xl |
font.size.5xl | global | dimension | 3rem | --he-font-size-5xl |
font.size.6xl | global | dimension | 3.5rem | --he-font-size-6xl |
font.size.7xl | global | dimension | 4rem | --he-font-size-7xl |
font.fluidSize.displayXl | global | string | clamp(2.75rem, 2rem + 3vw, 4rem) | --he-font-fluid-size-display-xl |
font.fluidSize.displayLg | global | string | clamp(2.5rem, 1.9rem + 2.4vw, 3.5rem) | --he-font-fluid-size-display-lg |
font.fluidSize.displayMd | global | string | clamp(2.25rem, 1.8rem + 1.8vw, 3rem) | --he-font-fluid-size-display-md |
font.fluidSize.headingH1 | global | string | clamp(2rem, 1.65rem + 1.4vw, 2.5rem) | --he-font-fluid-size-heading-h1 |
font.fluidSize.headingH2 | global | string | clamp(1.75rem, 1.55rem + 0.8vw, 2rem) | --he-font-fluid-size-heading-h2 |
font.fluidSize.headingH3 | global | string | clamp(1.375rem, 1.28rem + 0.4vw, 1.5rem) | --he-font-fluid-size-heading-h3 |
font.lineHeight.display | global | number | 1.1 | --he-font-line-height-display |
font.lineHeight.displayMd | global | number | 1.15 | --he-font-line-height-display-md |
font.lineHeight.headingH1 | global | number | 1.2 | --he-font-line-height-heading-h1 |
font.lineHeight.headingH2 | global | number | 1.25 | --he-font-line-height-heading-h2 |
font.lineHeight.headingH3 | global | number | 1.3 | --he-font-line-height-heading-h3 |
font.lineHeight.headingH4 | global | number | 1.35 | --he-font-line-height-heading-h4 |
font.lineHeight.headingH5 | global | number | 1.4 | --he-font-line-height-heading-h5 |
font.lineHeight.body | global | number | 1.5 | --he-font-line-height-body |
font.lineHeight.bodyRelaxed | global | number | 1.6 | --he-font-line-height-body-relaxed |
font.lineHeight.label | global | number | 1.3 | --he-font-line-height-label |
font.lineHeight.labelSm | global | number | 1.35 | --he-font-line-height-label-sm |
font.lineHeight.caption | global | number | 1.4 | --he-font-line-height-caption |
font.lineHeight.code | global | number | 1.5 | --he-font-line-height-code |
font.lineHeight.codeRelaxed | global | number | 1.6 | --he-font-line-height-code-relaxed |
font.letterSpacing.tight | global | dimension | -0.04em | --he-font-letter-spacing-tight |
font.letterSpacing.normal | global | dimension | 0em | --he-font-letter-spacing-normal |
font.letterSpacing.wide | global | dimension | 0.08em | --he-font-letter-spacing-wide |
font.letterSpacing.caps | global | dimension | 0.14em | --he-font-letter-spacing-caps |
font.measure.default | global | string | 65ch | --he-font-measure-default |
font.measure.minimum | global | string | 60ch | --he-font-measure-minimum |
font.measure.maximum | global | string | 75ch | --he-font-measure-maximum |
font.role.display.family | global | fontFamily | {font.family.display} | --he-font-role-display-family |
font.role.display.size | global | dimension | {font.size.7xl} | --he-font-role-display-size |
font.role.display.weight | global | fontWeight | {font.weight.bold} | --he-font-role-display-weight |
font.role.display.lineHeight | global | number | {font.lineHeight.display} | --he-font-role-display-line-height |
font.role.display.letterSpacing | global | dimension | {font.letterSpacing.tight} | --he-font-role-display-letter-spacing |
font.role.heading.family | global | fontFamily | {font.family.display} | --he-font-role-heading-family |
font.role.heading.size | global | dimension | {font.size.4xl} | --he-font-role-heading-size |
font.role.heading.weight | global | fontWeight | {font.weight.bold} | --he-font-role-heading-weight |
font.role.heading.lineHeight | global | number | {font.lineHeight.headingH1} | --he-font-role-heading-line-height |
font.role.heading.letterSpacing | global | dimension | {font.letterSpacing.tight} | --he-font-role-heading-letter-spacing |
font.role.title.family | global | fontFamily | {font.family.display} | --he-font-role-title-family |
font.role.title.size | global | dimension | {font.size.xl} | --he-font-role-title-size |
font.role.title.weight | global | fontWeight | {font.weight.semibold} | --he-font-role-title-weight |
font.role.title.lineHeight | global | number | {font.lineHeight.headingH4} | --he-font-role-title-line-height |
font.role.title.letterSpacing | global | dimension | {font.letterSpacing.normal} | --he-font-role-title-letter-spacing |
font.role.body.family | global | fontFamily | {font.family.body} | --he-font-role-body-family |
font.role.body.size | global | dimension | {font.size.md} | --he-font-role-body-size |
font.role.body.weight | global | fontWeight | {font.weight.regular} | --he-font-role-body-weight |
font.role.body.lineHeight | global | number | {font.lineHeight.body} | --he-font-role-body-line-height |
font.role.body.letterSpacing | global | dimension | {font.letterSpacing.normal} | --he-font-role-body-letter-spacing |
font.role.label.family | global | fontFamily | {font.family.body} | --he-font-role-label-family |
font.role.label.size | global | dimension | {font.size.sm} | --he-font-role-label-size |
font.role.label.weight | global | fontWeight | {font.weight.semibold} | --he-font-role-label-weight |
font.role.label.lineHeight | global | number | {font.lineHeight.label} | --he-font-role-label-line-height |
font.role.label.letterSpacing | global | dimension | {font.letterSpacing.normal} | --he-font-role-label-letter-spacing |
font.role.mono.family | global | fontFamily | {font.family.mono} | --he-font-role-mono-family |
font.role.mono.size | global | dimension | {font.size.sm} | --he-font-role-mono-size |
font.role.mono.weight | global | fontWeight | {font.weight.regular} | --he-font-role-mono-weight |
font.role.mono.lineHeight | global | number | {font.lineHeight.code} | --he-font-role-mono-line-height |
font.role.mono.letterSpacing | global | dimension | {font.letterSpacing.normal} | --he-font-role-mono-letter-spacing |
space.0 | global | dimension | {space.none} | --he-space-0 |
space.1 | global | dimension | {space.3xs} | --he-space-1 |
space.2 | global | dimension | {space.2xs} | --he-space-2 |
space.3 | global | dimension | {space.xs} | --he-space-3 |
space.4 | global | dimension | {space.sm} | --he-space-4 |
space.5 | global | dimension | {space.md} | --he-space-5 |
space.6 | global | dimension | {space.md} | --he-space-6 |
space.8 | global | dimension | {space.lg} | --he-space-8 |
space.10 | global | dimension | {space.xl} | --he-space-10 |
space.12 | global | dimension | {space.xl} | --he-space-12 |
space.16 | global | dimension | {space.2xl} | --he-space-16 |
space.20 | global | dimension | {space.3xl} | --he-space-20 |
space.24 | global | dimension | {space.4xl} | --he-space-24 |
space.30 | global | dimension | {space.4xl} | --he-space-30 |
space.none | global | dimension | 0rem | --he-space-none |
space.3xs | global | dimension | 0.25rem | --he-space-3xs |
space.2xs | global | dimension | 0.5rem | --he-space-2xs |
space.xs | global | dimension | 0.75rem | --he-space-xs |
space.sm | global | dimension | 1rem | --he-space-sm |
space.md | global | dimension | 1.5rem | --he-space-md |
space.lg | global | dimension | 2rem | --he-space-lg |
space.xl | global | dimension | 3rem | --he-space-xl |
space.2xl | global | dimension | 4rem | --he-space-2xl |
space.3xl | global | dimension | 5rem | --he-space-3xl |
space.4xl | global | dimension | 6rem | --he-space-4xl |
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 |
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 |
shadow.sm | global | string | 0 1px 3px rgba(7,27,43,0.12) | --he-shadow-sm |
shadow.md | global | string | 0 8px 24px rgba(7,27,43,0.14) | --he-shadow-md |
shadow.lg | global | string | 0 20px 48px rgba(7,27,43,0.16) | --he-shadow-lg |
shadow.xl | global | string | 0 28px 80px rgba(7,27,43,0.18) | --he-shadow-xl |
shadow.focus | global | string | 0 0 0 3px rgba(20,120,184,0.30) | --he-shadow-focus |
opacity.disabled | global | number | 0.42 | --he-opacity-disabled |
opacity.muted | global | number | 0.64 | --he-opacity-muted |
opacity.scrim | global | number | 0.68 | --he-opacity-scrim |
opacity.hover | global | number | 0.08 | --he-opacity-hover |
opacity.pressed | global | number | 0.14 | --he-opacity-pressed |
motion.duration.instant | global | duration | 0ms | --he-motion-duration-instant |
motion.duration.fast | global | duration | 100ms | --he-motion-duration-fast |
motion.duration.standard | global | duration | 200ms | --he-motion-duration-standard |
motion.duration.emphasized | global | duration | 300ms | --he-motion-duration-emphasized |
motion.duration.slow | global | duration | 500ms | --he-motion-duration-slow |
motion.duration.reveal | global | duration | 900ms | --he-motion-duration-reveal |
motion.easing.standard | global | cubicBezier | [0.2,0,0,1] | --he-motion-easing-standard |
motion.easing.enter | global | cubicBezier | [0,0,0,1] | --he-motion-easing-enter |
motion.easing.exit | global | cubicBezier | [0.3,0,1,1] | --he-motion-easing-exit |
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 |
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 |
zIndex.base | global | number | 0 | --he-z-index-base |
zIndex.raised | global | number | 10 | --he-z-index-raised |
zIndex.sticky | global | number | 20 | --he-z-index-sticky |
zIndex.overlay | global | number | 40 | --he-z-index-overlay |
zIndex.modal | global | number | 60 | --he-z-index-modal |
zIndex.toast | global | number | 80 | --he-z-index-toast |
zIndex.critical | global | number | 100 | --he-z-index-critical |
color.brand.primary | semantic/atlantic | color | {color.palette.atlantic.300} | --he-color-brand-primary |
color.brand.strong | semantic/atlantic | color | {color.palette.atlantic.600} | --he-color-brand-strong |
color.brand.subtle | semantic/atlantic | color | {color.palette.atlantic.100} | --he-color-brand-subtle |
color.background.canvas | semantic/atlantic | color | {color.palette.neutral.50} | --he-color-background-canvas |
color.background.subtle | semantic/atlantic | color | {color.palette.neutral.100} | --he-color-background-subtle |
color.background.inverted | semantic/atlantic | color | {color.palette.neutral.900} | --he-color-background-inverted |
color.background.scrim | semantic/atlantic | color | rgba(7,27,43,0.68) | --he-color-background-scrim |
color.surface.primary | semantic/atlantic | color | #F8FBFF | --he-color-surface-primary |
color.surface.secondary | semantic/atlantic | color | #E1EDF3 | --he-color-surface-secondary |
color.surface.raised | semantic/atlantic | color | {color.palette.neutral.0} | --he-color-surface-raised |
color.surface.inverted | semantic/atlantic | color | {color.palette.neutral.900} | --he-color-surface-inverted |
color.surface.brand | semantic/atlantic | color | {color.palette.atlantic.300} | --he-color-surface-brand |
color.text.primary | semantic/atlantic | color | {color.palette.neutral.900} | --he-color-text-primary |
color.text.secondary | semantic/atlantic | color | {color.palette.neutral.800} | --he-color-text-secondary |
color.text.tertiary | semantic/atlantic | color | {color.palette.atlantic.800} | --he-color-text-tertiary |
color.text.inverse | semantic/atlantic | color | #F8FBFF | --he-color-text-inverse |
color.text.disabled | semantic/atlantic | color | {color.palette.neutral.500} | --he-color-text-disabled |
color.text.link | semantic/atlantic | color | {color.palette.atlantic.700} | --he-color-text-link |
color.icon.primary | semantic/atlantic | color | {color.palette.neutral.900} | --he-color-icon-primary |
color.icon.secondary | semantic/atlantic | color | {color.palette.atlantic.800} | --he-color-icon-secondary |
color.icon.inverse | semantic/atlantic | color | #F8FBFF | --he-color-icon-inverse |
color.icon.brand | semantic/atlantic | color | {color.palette.atlantic.600} | --he-color-icon-brand |
color.border.subtle | semantic/atlantic | color | rgba(16,42,67,0.12) | --he-color-border-subtle |
color.border.default | semantic/atlantic | color | rgba(16,42,67,0.20) | --he-color-border-default |
color.border.strong | semantic/atlantic | color | {color.palette.neutral.900} | --he-color-border-strong |
color.border.inverse | semantic/atlantic | color | rgba(248,251,255,0.32) | --he-color-border-inverse |
color.border.focus | semantic/atlantic | color | {color.palette.atlantic.700} | --he-color-border-focus |
color.action.primary.background | semantic/atlantic | color | {color.palette.atlantic.300} | --he-color-action-primary-background |
color.action.primary.hover | semantic/atlantic | color | {color.palette.atlantic.400} | --he-color-action-primary-hover |
color.action.primary.pressed | semantic/atlantic | color | {color.palette.atlantic.500} | --he-color-action-primary-pressed |
color.action.primary.text | semantic/atlantic | color | {color.palette.neutral.950} | --he-color-action-primary-text |
color.action.secondary.background | semantic/atlantic | color | transparent | --he-color-action-secondary-background |
color.action.secondary.hover | semantic/atlantic | color | {color.palette.atlantic.100} | --he-color-action-secondary-hover |
color.action.secondary.pressed | semantic/atlantic | color | {color.palette.atlantic.200} | --he-color-action-secondary-pressed |
color.action.secondary.text | semantic/atlantic | color | {color.palette.neutral.900} | --he-color-action-secondary-text |
color.action.danger.background | semantic/atlantic | color | {color.palette.red.700} | --he-color-action-danger-background |
color.action.danger.hover | semantic/atlantic | color | {color.palette.red.900} | --he-color-action-danger-hover |
color.action.danger.text | semantic/atlantic | color | {color.palette.neutral.0} | --he-color-action-danger-text |
color.status.healthy.background | semantic/atlantic | color | {color.palette.green.100} | --he-color-status-healthy-background |
color.status.healthy.text | semantic/atlantic | color | {color.palette.green.900} | --he-color-status-healthy-text |
color.status.healthy.border | semantic/atlantic | color | {color.palette.green.500} | --he-color-status-healthy-border |
color.status.review.background | semantic/atlantic | color | {color.palette.amber.100} | --he-color-status-review-background |
color.status.review.text | semantic/atlantic | color | {color.palette.amber.900} | --he-color-status-review-text |
color.status.review.border | semantic/atlantic | color | {color.palette.amber.400} | --he-color-status-review-border |
color.status.critical.background | semantic/atlantic | color | {color.palette.red.100} | --he-color-status-critical-background |
color.status.critical.text | semantic/atlantic | color | {color.palette.red.900} | --he-color-status-critical-text |
color.status.critical.border | semantic/atlantic | color | {color.palette.red.500} | --he-color-status-critical-border |
color.status.info.background | semantic/atlantic | color | {color.palette.atlantic.100} | --he-color-status-info-background |
color.status.info.text | semantic/atlantic | color | {color.palette.atlantic.900} | --he-color-status-info-text |
color.status.info.border | semantic/atlantic | color | {color.palette.atlantic.500} | --he-color-status-info-border |
color.status.offline.background | semantic/atlantic | color | {color.palette.neutral.100} | --he-color-status-offline-background |
color.status.offline.text | semantic/atlantic | color | {color.palette.neutral.800} | --he-color-status-offline-text |
color.status.offline.border | semantic/atlantic | color | {color.palette.neutral.400} | --he-color-status-offline-border |
color.dataState.synchronized.background | semantic/atlantic | color | {color.status.healthy.background} | --he-color-data-state-synchronized-background |
color.dataState.synchronized.text | semantic/atlantic | color | {color.status.healthy.text} | --he-color-data-state-synchronized-text |
color.dataState.synchronized.border | semantic/atlantic | color | {color.status.healthy.border} | --he-color-data-state-synchronized-border |
color.dataState.delayed.background | semantic/atlantic | color | {color.status.review.background} | --he-color-data-state-delayed-background |
color.dataState.delayed.text | semantic/atlantic | color | {color.status.review.text} | --he-color-data-state-delayed-text |
color.dataState.delayed.border | semantic/atlantic | color | {color.status.review.border} | --he-color-data-state-delayed-border |
color.dataState.stale.background | semantic/atlantic | color | {color.palette.amber.50} | --he-color-data-state-stale-background |
color.dataState.stale.text | semantic/atlantic | color | {color.palette.amber.900} | --he-color-data-state-stale-text |
color.dataState.stale.border | semantic/atlantic | color | {color.palette.amber.400} | --he-color-data-state-stale-border |
color.dataState.offline.background | semantic/atlantic | color | {color.status.offline.background} | --he-color-data-state-offline-background |
color.dataState.offline.text | semantic/atlantic | color | {color.status.offline.text} | --he-color-data-state-offline-text |
color.dataState.offline.border | semantic/atlantic | color | {color.status.offline.border} | --he-color-data-state-offline-border |
color.dataState.unknown.background | semantic/atlantic | color | {color.palette.neutral.50} | --he-color-data-state-unknown-background |
color.dataState.unknown.text | semantic/atlantic | color | {color.palette.neutral.800} | --he-color-data-state-unknown-text |
color.dataState.unknown.border | semantic/atlantic | color | {color.palette.neutral.300} | --he-color-data-state-unknown-border |
color.evidence.confidenceTrack | semantic/atlantic | color | {color.palette.violet.50} | --he-color-evidence-confidence-track |
color.evidence.confidenceIndicator | semantic/atlantic | color | {color.palette.violet.600} | --he-color-evidence-confidence-indicator |
color.evidence.confidenceText | semantic/atlantic | color | {color.palette.neutral.800} | --he-color-evidence-confidence-text |
color.evidence.unavailable | semantic/atlantic | color | {color.palette.neutral.400} | --he-color-evidence-unavailable |
color.data.categorical.1 | semantic/atlantic | color | {color.palette.atlantic.600} | --he-color-data-categorical-1 |
color.data.categorical.2 | semantic/atlantic | color | {color.palette.pasture.600} | --he-color-data-categorical-2 |
color.data.categorical.3 | semantic/atlantic | color | {color.palette.violet.600} | --he-color-data-categorical-3 |
color.data.categorical.4 | semantic/atlantic | color | {color.palette.coral.500} | --he-color-data-categorical-4 |
color.data.categorical.5 | semantic/atlantic | color | {color.palette.amber.400} | --he-color-data-categorical-5 |
color.data.categorical.6 | semantic/atlantic | color | {color.palette.green.500} | --he-color-data-categorical-6 |
color.data.categorical.7 | semantic/atlantic | color | {color.palette.atlantic.300} | --he-color-data-categorical-7 |
color.data.categorical.8 | semantic/atlantic | color | {color.palette.neutral.600} | --he-color-data-categorical-8 |
color.data.grid | semantic/atlantic | color | rgba(16,42,67,0.14) | --he-color-data-grid |
color.data.axis | semantic/atlantic | color | {color.palette.atlantic.800} | --he-color-data-axis |
color.data.baseline | semantic/atlantic | color | {color.palette.green.500} | --he-color-data-baseline |
color.data.anomaly | semantic/atlantic | color | {color.palette.red.500} | --he-color-data-anomaly |
color.focus.ring | semantic/atlantic | color | {color.palette.atlantic.700} | --he-color-focus-ring |
color.focus.ringInverse | semantic/atlantic | color | {color.palette.atlantic.300} | --he-color-focus-ring-inverse |
color.brand.primary | semantic/pasture | color | {color.palette.pasture.signal} | --he-color-brand-primary |
color.brand.strong | semantic/pasture | color | {color.palette.pasture.600} | --he-color-brand-strong |
color.brand.subtle | semantic/pasture | color | {color.palette.pasture.100} | --he-color-brand-subtle |
color.background.canvas | semantic/pasture | color | #F3F0E6 | --he-color-background-canvas |
color.background.subtle | semantic/pasture | color | #E8EADD | --he-color-background-subtle |
color.background.inverted | semantic/pasture | color | #11251E | --he-color-background-inverted |
color.background.scrim | semantic/pasture | color | rgba(7,27,20,0.68) | --he-color-background-scrim |
color.surface.primary | semantic/pasture | color | #FFFDF5 | --he-color-surface-primary |
color.surface.secondary | semantic/pasture | color | #E3EADC | --he-color-surface-secondary |
color.surface.raised | semantic/pasture | color | {color.palette.neutral.0} | --he-color-surface-raised |
color.surface.inverted | semantic/pasture | color | #11251E | --he-color-surface-inverted |
color.surface.brand | semantic/pasture | color | {color.palette.pasture.signal} | --he-color-surface-brand |
color.text.primary | semantic/pasture | color | #11251E | --he-color-text-primary |
color.text.secondary | semantic/pasture | color | #1C352C | --he-color-text-secondary |
color.text.tertiary | semantic/pasture | color | #50745D | --he-color-text-tertiary |
color.text.inverse | semantic/pasture | color | #FFFDF5 | --he-color-text-inverse |
color.text.disabled | semantic/pasture | color | {color.palette.neutral.500} | --he-color-text-disabled |
color.text.link | semantic/pasture | color | {color.palette.pasture.700} | --he-color-text-link |
color.icon.primary | semantic/pasture | color | #11251E | --he-color-icon-primary |
color.icon.secondary | semantic/pasture | color | #50745D | --he-color-icon-secondary |
color.icon.inverse | semantic/pasture | color | #FFFDF5 | --he-color-icon-inverse |
color.icon.brand | semantic/pasture | color | {color.palette.pasture.600} | --he-color-icon-brand |
color.border.subtle | semantic/pasture | color | rgba(17,37,30,0.12) | --he-color-border-subtle |
color.border.default | semantic/pasture | color | rgba(17,37,30,0.20) | --he-color-border-default |
color.border.strong | semantic/pasture | color | #11251E | --he-color-border-strong |
color.border.inverse | semantic/pasture | color | rgba(255,253,245,0.32) | --he-color-border-inverse |
color.border.focus | semantic/pasture | color | {color.palette.pasture.700} | --he-color-border-focus |
color.action.primary.background | semantic/pasture | color | {color.palette.pasture.signal} | --he-color-action-primary-background |
color.action.primary.hover | semantic/pasture | color | #C9F05E | --he-color-action-primary-hover |
color.action.primary.pressed | semantic/pasture | color | #B9DF4D | --he-color-action-primary-pressed |
color.action.primary.text | semantic/pasture | color | #11251E | --he-color-action-primary-text |
color.action.secondary.background | semantic/pasture | color | transparent | --he-color-action-secondary-background |
color.action.secondary.hover | semantic/pasture | color | {color.palette.pasture.100} | --he-color-action-secondary-hover |
color.action.secondary.pressed | semantic/pasture | color | {color.palette.pasture.200} | --he-color-action-secondary-pressed |
color.action.secondary.text | semantic/pasture | color | #11251E | --he-color-action-secondary-text |
color.action.danger.background | semantic/pasture | color | {color.palette.red.700} | --he-color-action-danger-background |
color.action.danger.hover | semantic/pasture | color | {color.palette.red.900} | --he-color-action-danger-hover |
color.action.danger.text | semantic/pasture | color | {color.palette.neutral.0} | --he-color-action-danger-text |
color.status.healthy.background | semantic/pasture | color | {color.palette.green.100} | --he-color-status-healthy-background |
color.status.healthy.text | semantic/pasture | color | {color.palette.green.900} | --he-color-status-healthy-text |
color.status.healthy.border | semantic/pasture | color | {color.palette.green.500} | --he-color-status-healthy-border |
color.status.review.background | semantic/pasture | color | {color.palette.amber.100} | --he-color-status-review-background |
color.status.review.text | semantic/pasture | color | {color.palette.amber.900} | --he-color-status-review-text |
color.status.review.border | semantic/pasture | color | {color.palette.amber.400} | --he-color-status-review-border |
color.status.critical.background | semantic/pasture | color | {color.palette.red.100} | --he-color-status-critical-background |
color.status.critical.text | semantic/pasture | color | {color.palette.red.900} | --he-color-status-critical-text |
color.status.critical.border | semantic/pasture | color | {color.palette.red.500} | --he-color-status-critical-border |
color.status.info.background | semantic/pasture | color | {color.palette.atlantic.100} | --he-color-status-info-background |
color.status.info.text | semantic/pasture | color | {color.palette.atlantic.900} | --he-color-status-info-text |
color.status.info.border | semantic/pasture | color | {color.palette.atlantic.500} | --he-color-status-info-border |
color.status.offline.background | semantic/pasture | color | {color.palette.neutral.100} | --he-color-status-offline-background |
color.status.offline.text | semantic/pasture | color | {color.palette.neutral.800} | --he-color-status-offline-text |
color.status.offline.border | semantic/pasture | color | {color.palette.neutral.400} | --he-color-status-offline-border |
color.dataState.synchronized.background | semantic/pasture | color | {color.status.healthy.background} | --he-color-data-state-synchronized-background |
color.dataState.synchronized.text | semantic/pasture | color | {color.status.healthy.text} | --he-color-data-state-synchronized-text |
color.dataState.synchronized.border | semantic/pasture | color | {color.status.healthy.border} | --he-color-data-state-synchronized-border |
color.dataState.delayed.background | semantic/pasture | color | {color.status.review.background} | --he-color-data-state-delayed-background |
color.dataState.delayed.text | semantic/pasture | color | {color.status.review.text} | --he-color-data-state-delayed-text |
color.dataState.delayed.border | semantic/pasture | color | {color.status.review.border} | --he-color-data-state-delayed-border |
color.dataState.stale.background | semantic/pasture | color | {color.palette.amber.50} | --he-color-data-state-stale-background |
color.dataState.stale.text | semantic/pasture | color | {color.palette.amber.900} | --he-color-data-state-stale-text |
color.dataState.stale.border | semantic/pasture | color | {color.palette.amber.400} | --he-color-data-state-stale-border |
color.dataState.offline.background | semantic/pasture | color | {color.status.offline.background} | --he-color-data-state-offline-background |
color.dataState.offline.text | semantic/pasture | color | {color.status.offline.text} | --he-color-data-state-offline-text |
color.dataState.offline.border | semantic/pasture | color | {color.status.offline.border} | --he-color-data-state-offline-border |
color.dataState.unknown.background | semantic/pasture | color | {color.palette.neutral.50} | --he-color-data-state-unknown-background |
color.dataState.unknown.text | semantic/pasture | color | {color.palette.neutral.800} | --he-color-data-state-unknown-text |
color.dataState.unknown.border | semantic/pasture | color | {color.palette.neutral.300} | --he-color-data-state-unknown-border |
color.evidence.confidenceTrack | semantic/pasture | color | {color.palette.violet.50} | --he-color-evidence-confidence-track |
color.evidence.confidenceIndicator | semantic/pasture | color | {color.palette.violet.600} | --he-color-evidence-confidence-indicator |
color.evidence.confidenceText | semantic/pasture | color | {color.palette.neutral.800} | --he-color-evidence-confidence-text |
color.evidence.unavailable | semantic/pasture | color | {color.palette.neutral.400} | --he-color-evidence-unavailable |
color.data.categorical.1 | semantic/pasture | color | {color.palette.atlantic.600} | --he-color-data-categorical-1 |
color.data.categorical.2 | semantic/pasture | color | {color.palette.pasture.600} | --he-color-data-categorical-2 |
color.data.categorical.3 | semantic/pasture | color | {color.palette.violet.600} | --he-color-data-categorical-3 |
color.data.categorical.4 | semantic/pasture | color | {color.palette.coral.500} | --he-color-data-categorical-4 |
color.data.categorical.5 | semantic/pasture | color | {color.palette.amber.400} | --he-color-data-categorical-5 |
color.data.categorical.6 | semantic/pasture | color | {color.palette.green.500} | --he-color-data-categorical-6 |
color.data.categorical.7 | semantic/pasture | color | {color.palette.atlantic.300} | --he-color-data-categorical-7 |
color.data.categorical.8 | semantic/pasture | color | {color.palette.neutral.600} | --he-color-data-categorical-8 |
color.data.grid | semantic/pasture | color | rgba(17,37,30,0.14) | --he-color-data-grid |
color.data.axis | semantic/pasture | color | #50745D | --he-color-data-axis |
color.data.baseline | semantic/pasture | color | {color.palette.green.500} | --he-color-data-baseline |
color.data.anomaly | semantic/pasture | color | {color.palette.red.500} | --he-color-data-anomaly |
color.focus.ring | semantic/pasture | color | {color.palette.pasture.700} | --he-color-focus-ring |
color.focus.ringInverse | semantic/pasture | color | {color.palette.pasture.signal} | --he-color-focus-ring-inverse |
component.button.height.sm | components | dimension | {size.control.sm} | --he-component-button-height-sm |
component.button.height.md | components | dimension | {size.control.md} | --he-component-button-height-md |
component.button.height.lg | components | dimension | {size.control.xl} | --he-component-button-height-lg |
component.button.paddingX.sm | components | dimension | {space.4} | --he-component-button-padding-x-sm |
component.button.paddingX.md | components | dimension | {space.5} | --he-component-button-padding-x-md |
component.button.paddingX.lg | components | dimension | {space.6} | --he-component-button-padding-x-lg |
component.button.gap | components | dimension | {space.2} | --he-component-button-gap |
component.button.radius | components | dimension | {radius.pill} | --he-component-button-radius |
component.button.fontSize | components | dimension | {font.size.sm} | --he-component-button-font-size |
component.button.fontWeight | components | fontWeight | {font.weight.bold} | --he-component-button-font-weight |
component.button.target | components | dimension | {size.target.minimum} | --he-component-button-target |
component.input.height | components | dimension | {size.control.md} | --he-component-input-height |
component.input.paddingX | components | dimension | {space.4} | --he-component-input-padding-x |
component.input.gap | components | dimension | {space.2} | --he-component-input-gap |
component.input.radius | components | dimension | {radius.lg} | --he-component-input-radius |
component.input.borderWidth | components | dimension | {border.width.default} | --he-component-input-border-width |
component.input.labelSize | components | dimension | {font.size.sm} | --he-component-input-label-size |
component.input.helperSize | components | dimension | {font.size.xs} | --he-component-input-helper-size |
component.card.padding.compact | components | dimension | {space.4} | --he-component-card-padding-compact |
component.card.padding.default | components | dimension | {space.6} | --he-component-card-padding-default |
component.card.padding.spacious | components | dimension | {space.8} | --he-component-card-padding-spacious |
component.card.gap | components | dimension | {space.4} | --he-component-card-gap |
component.card.radius | components | dimension | {radius.2xl} | --he-component-card-radius |
component.card.borderWidth | components | dimension | {border.width.default} | --he-component-card-border-width |
component.card.shadow | components | string | {shadow.md} | --he-component-card-shadow |
component.card.target | components | dimension | {size.target.minimum} | --he-component-card-target |
component.badge.height | components | dimension | 28px | --he-component-badge-height |
component.badge.paddingX | components | dimension | {space.3} | --he-component-badge-padding-x |
component.badge.gap | components | dimension | {space.1} | --he-component-badge-gap |
component.badge.radius | components | dimension | {radius.pill} | --he-component-badge-radius |
component.badge.fontSize | components | dimension | {font.size.xs} | --he-component-badge-font-size |
component.navigation.topBarHeight | components | dimension | 72px | --he-component-navigation-top-bar-height |
component.navigation.sideRailWidth.collapsed | components | dimension | 72px | --he-component-navigation-side-rail-width-collapsed |
component.navigation.sideRailWidth.expanded | components | dimension | 264px | --he-component-navigation-side-rail-width-expanded |
component.navigation.itemHeight | components | dimension | {size.control.md} | --he-component-navigation-item-height |
component.navigation.itemRadius | components | dimension | {radius.lg} | --he-component-navigation-item-radius |
component.table.headerHeight | components | dimension | 44px | --he-component-table-header-height |
component.table.rowHeight | components | dimension | 52px | --he-component-table-row-height |
component.table.cellPaddingX | components | dimension | {space.4} | --he-component-table-cell-padding-x |
component.table.cellPaddingY | components | dimension | {space.3} | --he-component-table-cell-padding-y |
component.dialog.width.sm | components | dimension | 400px | --he-component-dialog-width-sm |
component.dialog.width.md | components | dimension | 640px | --he-component-dialog-width-md |
component.dialog.width.lg | components | dimension | 880px | --he-component-dialog-width-lg |
component.dialog.padding | components | dimension | {space.8} | --he-component-dialog-padding |
component.dialog.radius | components | dimension | {radius.2xl} | --he-component-dialog-radius |
component.dialog.shadow | components | string | {shadow.xl} | --he-component-dialog-shadow |
component.dialog.target | components | dimension | {size.target.minimum} | --he-component-dialog-target |
component.drawer.width | components | dimension | 400px | --he-component-drawer-width |
component.drawer.padding | components | dimension | {space.6} | --he-component-drawer-padding |
component.drawer.headerHeight | components | dimension | {size.control.xl} | --he-component-drawer-header-height |
component.drawer.target | components | dimension | {size.target.minimum} | --he-component-drawer-target |
component.toast.width | components | dimension | 400px | --he-component-toast-width |
component.toast.padding | components | dimension | {space.4} | --he-component-toast-padding |
component.toast.radius | components | dimension | {radius.xl} | --he-component-toast-radius |
component.toast.shadow | components | string | {shadow.lg} | --he-component-toast-shadow |
component.toast.gap | components | dimension | {space.3} | --he-component-toast-gap |
component.tooltip.maxWidth | components | dimension | 280px | --he-component-tooltip-max-width |
component.tooltip.paddingX | components | dimension | {space.3} | --he-component-tooltip-padding-x |
component.tooltip.paddingY | components | dimension | {space.2} | --he-component-tooltip-padding-y |
component.tooltip.radius | components | dimension | {radius.md} | --he-component-tooltip-radius |
component.tooltip.gap | components | dimension | {space.2} | --he-component-tooltip-gap |
component.metricCard.minHeight | components | dimension | 132px | --he-component-metric-card-min-height |
component.metricCard.valueSize | components | dimension | {font.size.4xl} | --he-component-metric-card-value-size |
component.metricCard.trendGap | components | dimension | {space.2} | --he-component-metric-card-trend-gap |
component.metricCard.gap | components | dimension | {space.4} | --he-component-metric-card-gap |
component.metricCard.minimumHeight | components | dimension | {component.metricCard.minHeight} | --he-component-metric-card-minimum-height |
component.cowAvatar.size.sm | components | dimension | 36px | --he-component-cow-avatar-size-sm |
component.cowAvatar.size.md | components | dimension | 44px | --he-component-cow-avatar-size-md |
component.cowAvatar.size.lg | components | dimension | 56px | --he-component-cow-avatar-size-lg |
component.cowAvatar.radius | components | dimension | {radius.pill} | --he-component-cow-avatar-radius |
component.deviceState.dotSize | components | dimension | 8px | --he-component-device-state-dot-size |
component.deviceState.pulseSize | components | dimension | 16px | --he-component-device-state-pulse-size |
component.cameraView.aspectRatio | components | string | 16 / 9 | --he-component-camera-view-aspect-ratio |
component.cameraView.radius | components | dimension | {radius.xl} | --he-component-camera-view-radius |
component.cameraView.controlHeight | components | dimension | {size.control.md} | --he-component-camera-view-control-height |
component.chart.strokeWidth | components | dimension | 2px | --he-component-chart-stroke-width |
component.chart.focusStrokeWidth | components | dimension | 3px | --he-component-chart-focus-stroke-width |
component.chart.pointSize | components | dimension | 6px | --he-component-chart-point-size |
component.chart.minHeight | components | dimension | 240px | --he-component-chart-min-height |
component.skeleton.height | components | dimension | 16px | --he-component-skeleton-height |
component.skeleton.radius | components | dimension | {radius.md} | --he-component-skeleton-radius |
component.skeleton.minimumHeight | components | dimension | {space.4} | --he-component-skeleton-minimum-height |
component.emptyState.maxWidth | components | dimension | 480px | --he-component-empty-state-max-width |
component.emptyState.iconSize | components | dimension | {size.icon.2xl} | --he-component-empty-state-icon-size |
component.emptyState.gap | components | dimension | {space.4} | --he-component-empty-state-gap |
component.emptyState.padding | components | dimension | {space.12} | --he-component-empty-state-padding |
component.iconButton.size.sm | components | dimension | {size.control.sm} | --he-component-icon-button-size-sm |
component.iconButton.size.md | components | dimension | {size.control.md} | --he-component-icon-button-size-md |
component.iconButton.size.lg | components | dimension | {size.control.xl} | --he-component-icon-button-size-lg |
component.iconButton.radius | components | dimension | {radius.pill} | --he-component-icon-button-radius |
component.iconButton.glyphSize.sm | components | dimension | {size.icon.sm} | --he-component-icon-button-glyph-size-sm |
component.iconButton.glyphSize.md | components | dimension | {size.icon.md} | --he-component-icon-button-glyph-size-md |
component.iconButton.glyphSize.lg | components | dimension | {size.icon.lg} | --he-component-icon-button-glyph-size-lg |
component.splitButton.height | components | dimension | {component.button.height.md} | --he-component-split-button-height |
component.splitButton.dividerWidth | components | dimension | {border.width.default} | --he-component-split-button-divider-width |
component.splitButton.menuWidth | components | dimension | {size.target.minimum} | --he-component-split-button-menu-width |
component.link.gap | components | dimension | {space.1} | --he-component-link-gap |
component.link.underlineOffset | components | dimension | 4px | --he-component-link-underline-offset |
component.textField.height | components | dimension | {component.input.height} | --he-component-text-field-height |
component.textField.gap | components | dimension | {component.input.gap} | --he-component-text-field-gap |
component.textArea.minHeight | components | dimension | 120px | --he-component-text-area-min-height |
component.textArea.paddingY | components | dimension | {space.3} | --he-component-text-area-padding-y |
component.select.height | components | dimension | {component.input.height} | --he-component-select-height |
component.select.indicatorSize | components | dimension | {size.icon.sm} | --he-component-select-indicator-size |
component.multiSelect.minHeight | components | dimension | {component.input.height} | --he-component-multi-select-min-height |
component.multiSelect.tagGap | components | dimension | {space.2} | --he-component-multi-select-tag-gap |
component.checkbox.controlSize | components | dimension | 20px | --he-component-checkbox-control-size |
component.checkbox.target | components | dimension | {size.target.minimum} | --he-component-checkbox-target |
component.radio.controlSize | components | dimension | 20px | --he-component-radio-control-size |
component.radio.target | components | dimension | {size.target.minimum} | --he-component-radio-target |
component.switch.trackWidth | components | dimension | 44px | --he-component-switch-track-width |
component.switch.trackHeight | components | dimension | 24px | --he-component-switch-track-height |
component.switch.thumbSize | components | dimension | 18px | --he-component-switch-thumb-size |
component.slider.trackHeight | components | dimension | 4px | --he-component-slider-track-height |
component.slider.thumbSize | components | dimension | 20px | --he-component-slider-thumb-size |
component.slider.target | components | dimension | {size.target.minimum} | --he-component-slider-target |
component.dateTimeField.height | components | dimension | {component.input.height} | --he-component-date-time-field-height |
component.dateTimeField.timezoneGap | components | dimension | {space.2} | --he-component-date-time-field-timezone-gap |
component.fileUpload.minHeight | components | dimension | 120px | --he-component-file-upload-min-height |
component.fileUpload.padding | components | dimension | {space.6} | --he-component-file-upload-padding |
component.fileUpload.radius | components | dimension | {radius.xl} | --he-component-file-upload-radius |
component.searchField.height | components | dimension | {component.input.height} | --he-component-search-field-height |
component.searchField.maxWidth | components | dimension | 640px | --he-component-search-field-max-width |
component.topBar.height | components | dimension | {component.navigation.topBarHeight} | --he-component-top-bar-height |
component.topBar.paddingX | components | dimension | {space.6} | --he-component-top-bar-padding-x |
component.sideNavigation.widthCollapsed | components | dimension | {component.navigation.sideRailWidth.collapsed} | --he-component-side-navigation-width-collapsed |
component.sideNavigation.widthExpanded | components | dimension | {component.navigation.sideRailWidth.expanded} | --he-component-side-navigation-width-expanded |
component.sideNavigation.itemHeight | components | dimension | {component.navigation.itemHeight} | --he-component-side-navigation-item-height |
component.breadcrumb.gap | components | dimension | {space.2} | --he-component-breadcrumb-gap |
component.breadcrumb.height | components | dimension | {size.target.minimum} | --he-component-breadcrumb-height |
component.tabs.height | components | dimension | {size.target.minimum} | --he-component-tabs-height |
component.tabs.indicatorHeight | components | dimension | {border.width.focus} | --he-component-tabs-indicator-height |
component.pagination.itemSize | components | dimension | {size.target.minimum} | --he-component-pagination-item-size |
component.pagination.gap | components | dimension | {space.1} | --he-component-pagination-gap |
component.stepper.markerSize | components | dimension | 28px | --he-component-stepper-marker-size |
component.stepper.connectorWidth | components | dimension | {border.width.default} | --he-component-stepper-connector-width |
component.commandPalette.width | components | dimension | 640px | --he-component-command-palette-width |
component.commandPalette.maxHeight | components | dimension | 520px | --he-component-command-palette-max-height |
component.commandPalette.radius | components | dimension | {radius.2xl} | --he-component-command-palette-radius |
component.pageHeader.gap | components | dimension | {space.6} | --he-component-page-header-gap |
component.pageHeader.paddingY | components | dimension | {space.8} | --he-component-page-header-padding-y |
component.sectionHeader.gap | components | dimension | {space.4} | --he-component-section-header-gap |
component.sectionHeader.marginBottom | components | dimension | {space.4} | --he-component-section-header-margin-bottom |
component.divider.width | components | dimension | {border.width.default} | --he-component-divider-width |
component.divider.gap | components | dimension | {space.4} | --he-component-divider-gap |
component.accordion.triggerHeight | components | dimension | {size.target.minimum} | --he-component-accordion-trigger-height |
component.accordion.contentGap | components | dimension | {space.4} | --he-component-accordion-content-gap |
component.popover.width | components | dimension | 320px | --he-component-popover-width |
component.popover.padding | components | dimension | {space.4} | --he-component-popover-padding |
component.popover.radius | components | dimension | {radius.xl} | --he-component-popover-radius |
component.alertBanner.gap | components | dimension | {space.3} | --he-component-alert-banner-gap |
component.alertBanner.padding | components | dimension | {space.4} | --he-component-alert-banner-padding |
component.alertBanner.radius | components | dimension | {radius.xl} | --he-component-alert-banner-radius |
component.progress.trackHeight | components | dimension | 8px | --he-component-progress-track-height |
component.progress.gap | components | dimension | {space.2} | --he-component-progress-gap |
component.statusBadge.minimumHeight | components | dimension | {component.badge.height} | --he-component-status-badge-minimum-height |
component.tag.gap | components | dimension | {space.2} | --he-component-tag-gap |
component.tag.minimumHeight | components | dimension | {size.control.xs} | --he-component-tag-minimum-height |
component.avatar.size | components | dimension | {component.cowAvatar.size.md} | --he-component-avatar-size |
component.dataTable.cellGap | components | dimension | {space.3} | --he-component-data-table-cell-gap |
component.dataTable.minimumTarget | components | dimension | {size.target.minimum} | --he-component-data-table-minimum-target |
component.descriptionList.rowGap | components | dimension | {space.3} | --he-component-description-list-row-gap |
component.descriptionList.columnGap | components | dimension | {space.6} | --he-component-description-list-column-gap |
component.timeline.gap | components | dimension | {space.3} | --he-component-timeline-gap |
component.timeline.itemGap | components | dimension | {space.5} | --he-component-timeline-item-gap |
component.chartFrame.gap | components | dimension | {space.4} | --he-component-chart-frame-gap |
component.chartFrame.minimumHeight | components | dimension | {component.chart.minHeight} | --he-component-chart-frame-minimum-height |
component.sparkline.height | components | dimension | 40px | --he-component-sparkline-height |
component.sparkline.strokeWidth | components | dimension | {component.chart.strokeWidth} | --he-component-sparkline-stroke-width |
component.legend.gap | components | dimension | {space.3} | --he-component-legend-gap |
component.legend.swatchSize | components | dimension | 12px | --he-component-legend-swatch-size |
component.fleetHealthSummary.minimumColumnWidth | components | dimension | 160px | --he-component-fleet-health-summary-minimum-column-width |
component.fleetHealthSummary.gap | components | dimension | {space.3} | --he-component-fleet-health-summary-gap |
component.deviceCard.gap | components | dimension | {space.4} | --he-component-device-card-gap |
component.deviceCard.padding | components | dimension | {space.5} | --he-component-device-card-padding |
component.heartbeatIndicator.minimumTarget | components | dimension | {size.target.minimum} | --he-component-heartbeat-indicator-minimum-target |
component.heartbeatIndicator.gap | components | dimension | {space.2} | --he-component-heartbeat-indicator-gap |
component.serviceHealthRow.gap | components | dimension | {space.4} | --he-component-service-health-row-gap |
component.serviceHealthRow.paddingY | components | dimension | {space.3} | --he-component-service-health-row-padding-y |
component.alertCard.gap | components | dimension | {space.4} | --he-component-alert-card-gap |
component.alertCard.accentWidth | components | dimension | 4px | --he-component-alert-card-accent-width |
component.liveSessionControl.gap | components | dimension | {space.4} | --he-component-live-session-control-gap |
component.liveSessionControl.padding | components | dimension | {space.4} | --he-component-live-session-control-padding |
component.telemetryQuality.minimumColumnWidth | components | dimension | 128px | --he-component-telemetry-quality-minimum-column-width |
component.telemetryQuality.gap | components | dimension | {space.3} | --he-component-telemetry-quality-gap |
component.cowCard.gap | components | dimension | {space.4} | --he-component-cow-card-gap |
component.cowCard.padding | components | dimension | {space.5} | --he-component-cow-card-padding |
component.cowProfileHeader.gap | components | dimension | {space.4} | --he-component-cow-profile-header-gap |
component.cowProfileHeader.paddingY | components | dimension | {space.5} | --he-component-cow-profile-header-padding-y |
component.healthSignalRow.gap | components | dimension | {space.4} | --he-component-health-signal-row-gap |
component.healthSignalRow.paddingY | components | dimension | {space.3} | --he-component-health-signal-row-padding-y |
component.herdDistribution.barHeight | components | dimension | 18px | --he-component-herd-distribution-bar-height |
component.herdDistribution.gap | components | dimension | {space.3} | --he-component-herd-distribution-gap |
component.calibrationPanel.gap | components | dimension | {space.5} | --he-component-calibration-panel-gap |
component.calibrationPanel.padding | components | dimension | {space.5} | --he-component-calibration-panel-padding |
component.cameraViewer.minimumHeight | components | dimension | 192px | --he-component-camera-viewer-minimum-height |
component.cameraViewer.radius | components | dimension | {component.cameraView.radius} | --he-component-camera-viewer-radius |
component.poseOverlay.radius | components | dimension | {component.cameraView.radius} | --he-component-pose-overlay-radius |
component.poseOverlay.strokeWidth | components | dimension | 2px | --he-component-pose-overlay-stroke-width |
component.modelInsightCard.gap | components | dimension | {space.4} | --he-component-model-insight-card-gap |
component.modelInsightCard.padding | components | dimension | {space.5} | --he-component-model-insight-card-padding |
component.confidenceIndicator.trackHeight | components | dimension | 8px | --he-component-confidence-indicator-track-height |
component.confidenceIndicator.gap | components | dimension | {space.2} | --he-component-confidence-indicator-gap |
component.dataProvenance.rowGap | components | dimension | {space.2} | --he-component-data-provenance-row-gap |
component.dataProvenance.columnGap | components | dimension | {space.3} | --he-component-data-provenance-column-gap |
component.permissionState.maximumWidth | components | dimension | {layout.content.reading} | --he-component-permission-state-maximum-width |
component.permissionState.padding | components | dimension | {space.6} | --he-component-permission-state-padding |
component.auditEvent.gap | components | dimension | {space.3} | --he-component-audit-event-gap |
component.auditEvent.paddingY | components | dimension | {space.3} | --he-component-audit-event-padding-y |
component.costBudgetMeter.gap | components | dimension | {space.3} | --he-component-cost-budget-meter-gap |
component.costBudgetMeter.padding | components | dimension | {space.4} | --he-component-cost-budget-meter-padding |
component.integrationCard.gap | components | dimension | {space.4} | --he-component-integration-card-gap |
component.integrationCard.padding | components | dimension | {space.4} | --he-component-integration-card-padding |
visualization.plot.minimumHeight | visualization | dimension | 240px | --he-visualization-plot-minimum-height |
visualization.plot.padding | visualization | dimension | 16px | --he-visualization-plot-padding |
visualization.plot.gridWidth | visualization | dimension | 1px | --he-visualization-plot-grid-width |
visualization.axis.labelGap | visualization | dimension | 8px | --he-visualization-axis-label-gap |
visualization.axis.tickSize | visualization | dimension | 4px | --he-visualization-axis-tick-size |
visualization.axis.labelSize | visualization | dimension | 12px | --he-visualization-axis-label-size |
visualization.series.observedWidth | visualization | dimension | 2px | --he-visualization-series-observed-width |
visualization.series.baselineWidth | visualization | dimension | 2px | --he-visualization-series-baseline-width |
visualization.series.predictedWidth | visualization | dimension | 2px | --he-visualization-series-predicted-width |
visualization.series.focusWidth | visualization | dimension | 4px | --he-visualization-series-focus-width |
visualization.series.pointRadius | visualization | dimension | 4px | --he-visualization-series-point-radius |
visualization.annotation.gap | visualization | dimension | 8px | --he-visualization-annotation-gap |
visualization.annotation.lineWidth | visualization | dimension | 1px | --he-visualization-annotation-line-width |
visualization.legend.swatchSize | visualization | dimension | 12px | --he-visualization-legend-swatch-size |
visualization.legend.gap | visualization | dimension | 12px | --he-visualization-legend-gap |
visualization.motion.reveal | visualization | duration | 240ms | --he-visualization-motion-reveal |
visualization.motion.update | visualization | duration | 160ms | --he-visualization-motion-update |
brand.logo.clearSpace | brand | dimension | 16px | --he-brand-logo-clear-space |
brand.logo.markMinimum | brand | dimension | 24px | --he-brand-logo-mark-minimum |
brand.logo.digitalMinimumWidth | brand | dimension | 112px | --he-brand-logo-digital-minimum-width |
brand.logo.printMinimumWidth | brand | dimension | 28mm | --he-brand-logo-print-minimum-width |
brand.logo.lockupGap | brand | dimension | 12px | --he-brand-logo-lockup-gap |
brand.logo.endorsedGap | brand | dimension | 16px | --he-brand-logo-endorsed-gap |
brand.voice.sentenceMaximum | brand | number | 24 | --he-brand-voice-sentence-maximum |
brand.voice.readingGradeMaximum | brand | number | 9 | --he-brand-voice-reading-grade-maximum |
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-color-palette-neutral-0);
// Flutter
final value = HeTokens.colorPaletteNeutralN0;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.