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

Значения оформления, вынесенные в переменные: цвет акцента, радиус, тень, отступы, кегль. В CSS это пользовательские свойства (--accent, --radius), в графическом редакторе — общие стили. Смысл один: решение принимается в одном месте и повторяется везде, а не переписывается в тридцати правилах.

Как это выглядит: :root { --accent: #1e3a8a; --radius: 6px; --card-pad: 20px; } .button { background: var(--accent); border-radius: var(--radius); } .card { padding: var(--card-pad); border-radius: var(--radius); }

Не путать: Дизайн-токены — не «набор красивых переменных» и не то же самое, что палитра: палитра отвечает, какие цвета есть, а токены — как они применяются (фон, текст, акцент). И это не классы: класс говорит про смысл («кнопка»), токен — про значение («6 px»). Пока значение живёт в тридцати местах, смена стиля — это тридцать правок.

Откуда слово: «Токен» — от староанглийского tacen — «знак, примета»: тот же корень у слова token в смысле жетона или знака на входе. В дизайне слово означает «знак значения»: не сам цвет, а имя, за которым цвет записан. Меняете значение — меняется всё, где на это имя ссылаются.

Где это проходят: урок 13.1 «Стиль — это восемь настроек, а не «красиво»» · Интерфейсы и сайты с нуля

Весь словарь программиста — 135 слов с объяснениями, примерами и ссылками на уроки.