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