kb-design-tokens

What problem does it solve?

It prevents UI drift and fragile styling by eliminating hardcoded visual values so your design system stays auditable and themeable.

Core Features & Use Cases

• Portable token system patterns: Defines a two-layer model (primitive vs semantic) so components consume intent-based tokens rather than raw values.
• Anti-tokens enforcement: Establishes clear rules to reject hex/rgb/px/shadow/radius/typography literals and arbitrary utilities outside the token definitions.
• Discrete scale discipline: Standardizes radius, spacing, elevation, and typography into tiered scales to keep visuals coherent across the product.

Use case example: During a UI audit, review a feature branch for inline hex colors, pixel paddings, and custom shadow recipes, then remap them to the nearest semantic tokens (or propose missing ones) to ensure the component works across all declared themes.

Quick Start

Ask an AI to audit your component code for hardcoded hex/px/shadows and refactor every styling decision to use semantic design tokens mapped to the nearest primitives, extending the token scale only with explicit, approved proposals.