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

Связанные цвета, отступы, радиусы и состояния.

DesignCSS variablesthemestokens

Когда использовать

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

Решения для реализации

  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.

Как проверить результат

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

Работающий пример

The ObservedSelected work · About
ESSAYS ON CULTURE / ISSUE 08

The art of
paying attention.

FIG. 01 / AN EXERCISE IN SEEING

What happens when we look
a little longer?

DESIGN ANATOMY / Modern editorial

A language of its own.

01

Обложка и последующая журнальная колонка

02

Антиква в заголовках, мелкий служебный гротеск

03

Выносные цитаты, подписи, длинное чтение

Медиа · Архитектура. Это самостоятельный образец направления: адаптируй контент и структуру под задачу, сохрани узнаваемые принципы.

Воздух и типографический контраст.

Файлы

SKILL.mdcomponents/style-preview.tsx
WEBCRAFT © 2026Оригинальные исходники и интерактивные примерыMIT License