UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Design Systems Page Patterns

Token Editor Pattern

Token Editor Pattern turns a frequent interface judgment into an executable constraint before generation.

tokenseditordesign-system

Design Principle

Token editors need to make design decisions, references, and impact scope visible.

Principle Token editors need to make design decisions, references, and impact scope visible.

Design action Group by color, type, spacing, radius, and shadow; show alias/semantic relationships, preview, diff, and affected components.

Examples Positive example: Design system admin, theme editors, multi-brand systems, and component library management. Counterexample: Only hex inputs exist with no semantic name or preview.

Apply when Design system admin, theme editors, multi-brand systems, and component library management. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from GOV.UK, Carbon, Polaris, Atlassian, Design.Systems, Design Systems Repo, and product-pattern libraries.

Agent Directive

Group by color, type, spacing, radius, and shadow; show alias/semantic relationships, preview, diff, and affected components.

Apply When

  • Design system admin, theme editors, multi-brand systems, and component library management.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • Only hex inputs exist with no semantic name or preview.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Design Systems Page Patterns
Quality
87%
Version
v1
Published
6/6/2026