Development
Token Architecture
Creatorgokbeyinac
FormatTEXT
Words251
Characters1913
#coding#text
prompt.txt
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 HierarchyDesign 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-1` through `space-N`- Font sizes: `font-size-xs` through `font-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-900`- `color-bg-surface` → `color-white`- `color-border-default` → `color-gray-200`- `spacing-section` → `space-16`- `font-heading` → `font-size-2xl` + `font-weight-bold` + `line-height-tight`### Tier 3 — Component Tokens (scoped to components)- `button-padding-x` → `spacing-4`- `button-bg-primary` → `color-brand-500`- `card-radius` → `radius-lg`- `input-border-color` → `color-border-default`## Consolidation Rules1. Merge values within 2px of each other (e.g., 14px and 15px → pick one, note which)2. Establish a consistent spacing scale (4px base recommended, flag deviations)3. Reduce color palette to ≤60 total tokens (flag what to deprecate)4. Normalize font size scale to a logical progression5. Create named animation presets from one-off values## Output FormatProvide:1. **Complete token map** in JSON — all three tiers with references2. **Migration table** — current value → new token name → which files use it3. **Deprecation list** — values to remove with suggested replacements4. **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 consolidationchoices, so transparency matters more than confidence.
Pro Tips
- Click the arrow next to the Copy button to directly launch and auto-fill ChatGPT or Claude.
- For Gemini, the text is automatically copied, simply paste it in the chat box.
- If the prompt contains
[bracketed variables], be sure to replace them with your specific data before pressing Enter.
