---
name: design-tokens
description: "Create a semantic token system or extract one from an existing interface. Use for CSS variables, themes, tokens."
---

# Дизайн-токены

Create a semantic token system or extract one from an existing interface.

## Implementation decisions

1. Separate reference colors from surface, text, border, action and feedback aliases.
2. Alias component values instead of duplicating raw values.
3. Define complete foreground/background pairs for every theme.
4. Keep business state out of design tokens.

## Working source

Read [components/style-preview.tsx](../webcraft-shared/source/components/style-preview.tsx) when implementing this capability. The example belongs to the WEBCRAFT React/Three.js playground except the Python commerce starter, which runs without third-party dependencies. Use [shared catalog](../webcraft-shared/source/lib/catalog.ts) only to resolve related examples. Adapt the source to the target framework and preserve existing project conventions.

## Verify observable behavior

- Regular text contrast meets 4.5:1.
- Focus is visible on every interactive control.
- Loading and disabled states mean different things.

## Scope

Use only the parts relevant to the requested task. This skill does not grant permission to publish, spend money, change account access or expose secrets. The original brief and environment rules remain authoritative.

Live example: https://webcraft-skill-library.undrgrnd.chatgpt.site/demos/typography

Version 2.0.0 · Original WEBCRAFT content · MIT