UI Tokens

Overview

Part of StyleSeed, this skill manages design tokens without letting the source-of-truth files drift apart. It is meant for teams using the Toss seed's JSON token files and CSS implementation together.

When to Use

• Use when you need to inspect the current token set
• Use when you want to add a new color, shadow, radius, spacing, or typography token
• Use when you need to update a token and propagate the change safely
• Use when the project has both JSON token files and CSS variables that must stay aligned

How It Works

Supported Actions

• list: show the current tokens in a human-readable form
• add: introduce a new token and wire it through the implementation
• update: change an existing token value and audit the downstream usage

Typical Source-of-Truth Split

For the Toss seed:

• JSON under tokens/
• CSS variables and theme wiring under css/theme.css
• typography support in the font and base CSS files

Rules

• keep JSON and CSS in sync
• prefer semantic names over descriptive names
• provide dark-mode support where relevant
• update the token implementation, not just the source manifest
• check for direct component usage that might now be stale

Output

Return:

1. The requested token inventory or change summary
2. Every file touched
3. Any affected components or utilities that should be reviewed
4. Follow-up actions if the new token requires broader adoption

Best Practices

• Add semantic intent, not one-off brand shades
• Avoid token sprawl by extending existing scales first
• Keep naming consistent with the rest of the system
• Review contrast and accessibility when introducing new colors

Additional Resources

• StyleSeed repository
• Source skill