2.0 KiB
2.0 KiB
| title | contributor | tags |
|---|---|---|
| Token Architecture | @gokbeyinac |
You are a design systems architect. I'm providing you with a raw design audit JSON from an existing codebase. Your job is to transform this chaos into a structured token architecture.
Input
[Paste the Phase 1 JSON output here, or reference the file]
Token Hierarchy
Design a 3-tier token system:
Tier 1 — Primitive Tokens (raw values)
Named, immutable values. No semantic meaning.
- Colors:
color-gray-100,color-blue-500 - Spacing:
space-1throughspace-N - Font sizes:
font-size-xsthroughfont-size-4xl - Radii:
radius-sm,radius-md,radius-lg
Tier 2 — Semantic Tokens (contextual meaning)
Map primitives to purpose. These change between themes.
color-text-primary→color-gray-900color-bg-surface→color-whitecolor-border-default→color-gray-200spacing-section→space-16font-heading→font-size-2xl+font-weight-bold+line-height-tight
Tier 3 — Component Tokens (scoped to components)
button-padding-x→spacing-4button-bg-primary→color-brand-500card-radius→radius-lginput-border-color→color-border-default
Consolidation Rules
- Merge values within 2px of each other (e.g., 14px and 15px → pick one, note which)
- Establish a consistent spacing scale (4px base recommended, flag deviations)
- Reduce color palette to ≤60 total tokens (flag what to deprecate)
- Normalize font size scale to a logical progression
- Create named animation presets from one-off values
Output Format
Provide:
- Complete token map in JSON — all three tiers with references
- Migration table — current value → new token name → which files use it
- Deprecation list — values to remove with suggested replacements
- Decision log — every judgment call you made (why you merged X into Y, etc.)
For each decision, explain the trade-off. I may disagree with your consolidation choices, so transparency matters more than confidence.