Добавить
Уведомления

TDS 011 — Начинаем использовать токены

Переходим от теории к практике и начинаем «щупать» токены прямо в верстке. Применяем типографический токен (например, Headline) и смотрим, как работают градации Large / Medium / Small и вся раскладка текстовых стилей. Разбираем, почему самое сложное — подобрать правильные соотношения размеров, line-height и letter-spacing так, чтобы типографика ложилась в интерфейс и воспринималась человеком предсказуемо и гармонично. В конце добавляем цветовой токен через CSS-переменные, меняем базовый brand-цвет и фиксируем главный вывод: напрямую так настраивать элементы неудобно — поэтому дальше будем инкапсулировать всю работу с токенами в компонент Text. #дизайнсистема #дизайнтокены #typography #цвета #cssvariables #frontend #webdev #nuxt #ui #uidesign

12+
6 просмотров
9 дней назад
12+
6 просмотров
9 дней назад

Переходим от теории к практике и начинаем «щупать» токены прямо в верстке. Применяем типографический токен (например, Headline) и смотрим, как работают градации Large / Medium / Small и вся раскладка текстовых стилей. Разбираем, почему самое сложное — подобрать правильные соотношения размеров, line-height и letter-spacing так, чтобы типографика ложилась в интерфейс и воспринималась человеком предсказуемо и гармонично. В конце добавляем цветовой токен через CSS-переменные, меняем базовый brand-цвет и фиксируем главный вывод: напрямую так настраивать элементы неудобно — поэтому дальше будем инкапсулировать всю работу с токенами в компонент Text. #дизайнсистема #дизайнтокены #typography #цвета #cssvariables #frontend #webdev #nuxt #ui #uidesign

, чтобы оставлять комментарии