Skip to content
Design Token Authority

Structure table

The structure of a token set, as analyzeStructure in @dta/core infers it and dta analyze prints it: one row per collection with its modes, the inferred layer role (primitives, brand, dimension, semantic or unknown) and its confidence, the variable count and the share of aliases. Used by the playground.

When to use

Section titled “When to use”
  • To show what analyzeStructure found, wherever a token set has been read: the playground’s Structure view.
  • Selectable when there is more to see per collection (its tokens); plain in documentation.

Three collections, three roles

Light
Structure
CollectionModesRoleConfidenceVariablesAliases
Brand(Alias)
  • BrandA
  • BrandB
brand0.9411100%
Primitives
  • Value
primitives0.90260%
ScreenType
  • Desktop
  • Mobile
  • Tablet
dimension0.925100%

Brands BrandA, BrandB

Graphite
Structure
CollectionModesRoleConfidenceVariablesAliases
Brand(Alias)
  • BrandA
  • BrandB
brand0.9411100%
Primitives
  • Value
primitives0.90260%
ScreenType
  • Desktop
  • Mobile
  • Tablet
dimension0.925100%

Brands BrandA, BrandB

Story: /stories/structure-table/brand-ab/

Roles to review, with notes

Light
Structure
CollectionModesRoleConfidenceVariablesAliases
Base
  • Value
primitives0.65 review60%
Only 6 variables — consider reviewing manually
Theme
  • Light
  • Dark
unknown0.40 review1811%
Multiple modes with low alias ratio — could be a themed primitives collection
Graphite
Structure
CollectionModesRoleConfidenceVariablesAliases
Base
  • Value
primitives0.65 review60%
Only 6 variables — consider reviewing manually
Theme
  • Light
  • Dark
unknown0.40 review1811%
Multiple modes with low alias ratio — could be a themed primitives collection

Story: /stories/structure-table/review/

Rows that open their details, one open

Light
Structure
CollectionModesRoleConfidenceVariablesAliases
  • BrandA
  • BrandB
brand0.9411100%
  • Value
primitives0.90260%
  • Desktop
  • Mobile
  • Tablet
dimension0.925100%

Brands BrandA, BrandB

Graphite
Structure
CollectionModesRoleConfidenceVariablesAliases
  • BrandA
  • BrandB
brand0.9411100%
  • Value
primitives0.90260%
  • Desktop
  • Mobile
  • Tablet
dimension0.925100%

Brands BrandA, BrandB

Story: /stories/structure-table/selectable/

Guidelines

Section titled “Guidelines”
  • Rules and type on the surface, no card: a 2 px ink rule under the mono header, hairlines between rows.
  • Names, modes and numbers are mono; modes are small bg-subtle labels.
  • A confidence below the review threshold (LOW_CONFIDENCE, the one dta analyze marks with ⚠) gets “⚠ review” in status-warning-text (a caveat, not a change: never signal; Status colours): a word, not colour alone. Notes follow their row in fg-muted.
  • In a container narrower than 640 px each collection becomes a short labelled list; the table keeps explicit roles for screen readers.
  • The brands (the modes of the brand collection) go under the table when there are any.
  • Selectable rows (onSelect): each collection name becomes a button with a ›, and the whole row is its hit area. It opens the collection’s details in the Detail panel; the open row is marked with aria-current and tinted action-subtle (text in action-text), hovered rows bg-subtle. Inside a tab whose label already names the view, hideCaption keeps the caption for screen readers only.
  • Motion: the selected row’s tint comes and goes over motion.duration.fast; instant under reduced motion. See Motion.

Tokens used

Section titled “Tokens used”

Read from the component’s source:

--action-bg--action-subtle--action-text--bg-subtle--bg-surface--border-default--border-strong--fg-default--fg-muted--fg-subtle--font-mono--font-sans--motion-duration-fast--motion-ease-standard--radius-sm--space-1--space-2--space-3--space-4--status-warning-text--stroke-focus--stroke-hairline--stroke-ink--type-body-sm-line-height--type-body-sm-size--type-label-weight--type-meta-line-height--type-meta-size--type-meta-weight--type-title-line-height--type-title-size--type-title-weight