ui-tokens

name	ui-tokens
description	List, add, and update StyleSeed design tokens while keeping JSON sources, CSS variables, and dark-mode values in sync.
type	skill
created	2026-02-27T00:00:00.000Z
domain	design-creative
category	ui-ux
risk	safe
source	community
tags	["skill","design-creative","ui-ux","tokens"]

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

Connections

• Domain: [[Design & Kreativitaet]]
• Kategorie: [[UI & UX Design]]
• [[Skills Uebersicht]], [[Home]]