[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"general-list":3,"footer-feature-tags":4,"slate-glossary-term-design-tokens":66},true,[5,14,20,29,34,40,46,52,56,62],{"id":6,"name":7,"hex":8,"translations":9,"count_pages":13},8,"Компания","#f40925",{"ru":10,"en":11},{"name":7},{"name":12},"Company",9,{"id":15,"name":16,"hex":17,"translations":18,"count_pages":6},26,"Главная страница",null,{"ru":19},{"name":16},{"id":21,"name":22,"hex":23,"translations":24,"count_pages":28},2,"Проекты","#3027ff",{"ru":25,"en":26},{"name":22},{"name":27},"Project",15,{"id":30,"name":31,"hex":17,"translations":32,"count_pages":21},33,"ИИ",{"ru":33},{"name":31},{"id":35,"name":36,"hex":17,"translations":37,"count_pages":39},34,"Комментарии",{"ru":38},{"name":36},4,{"id":41,"name":42,"hex":17,"translations":43,"count_pages":45},25,"Задачи",{"ru":44},{"name":42},24,{"id":47,"name":48,"hex":17,"translations":49,"count_pages":51},27,"Рабочие пространства",{"ru":50},{"name":48},3,{"id":45,"name":53,"hex":17,"translations":54,"count_pages":6},"Kanban-доска",{"ru":55},{"name":53},{"id":57,"name":58,"hex":17,"translations":59,"count_pages":61},23,"Диаграмма Ганта",{"ru":60},{"name":58},1,{"id":28,"name":63,"hex":17,"translations":64,"count_pages":61},"Календарь",{"ru":65},{"name":63},{"detail":67,"more":146},{"id":68,"slug":69,"translations":70,"category":84,"tags":92,"letter":111,"og_image":17,"cover":17,"author_name":17,"author_position":17,"author_avatar":17,"faqs":112,"related":126,"views_count":143,"helpful_yes_count":115,"helpful_no_count":115,"created_at":144,"updated_at":145,"published_at":17},331,"design-tokens",{"ru":71},{"title":72,"short_definition":73,"tldr":74,"full_explanation":75,"when_to_apply":76,"when_not_to_apply":77,"examples":78,"tips":79,"synonyms":80,"translation_en":81,"seo_title":82,"seo_description":83},"Дизайн-токены","Именованные переменные дизайна (цвета, размеры, шрифты), которые единообразно используются и в макетах, и в коде.","Дизайн-токены — это переменные дизайна с именами вместо конкретных значений: не «#1A73E8», а «основной цвет», не «16 пикселей», а «средний отступ». Когда дизайн-система меняется, правят токены, и продукт перекрашивается сам, без правки сотен файлов. Токены — общий язык макетов и кода: одно имя и одно значение и в макете, и во фронтенде.","\u003Cp>Без токенов дизайн-система быстро рассыпается: один дизайнер взял цвет «такой» из палитры, второй — «такой же, но чуть синее», третий вообще завёл свой. С токенами так сделать структурно нельзя.\u003C\u002Fp>\u003Ch3>Какие бывают\u003C\u002Fh3>\u003Cul>\u003Cli>\u003Cstrong>Цветовые\u003C\u002Fstrong> — основные цвета, состояния, тёмная тема.\u003C\u002Fli>\u003Cli>\u003Cstrong>Размерные\u003C\u002Fstrong> — отступы, радиусы скругления, высоты компонентов.\u003C\u002Fli>\u003Cli>\u003Cstrong>Шрифтовые\u003C\u002Fstrong> — кегли, межстрочные интервалы, начертания.\u003C\u002Fli>\u003Cli>\u003Cstrong>Тени и границы\u003C\u002Fstrong> — фиксированные значения для всей системы.\u003C\u002Fli>\u003Cli>\u003Cstrong>Анимационные\u003C\u002Fstrong> — длительности и кривые ускорения.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>Уровни\u003C\u002Fh3>\u003Cul>\u003Cli>Базовые токены — конкретные значения (например, \u003Ccode>blue\u002F500\u003C\u002Fcode> = #1A73E8).\u003C\u002Fli>\u003Cli>Семантические токены — описание роли (\u003Ccode>color\u002Ftext\u002Fprimary\u003C\u002Fcode> = \u003Ccode>blue\u002F900\u003C\u002Fcode>).\u003C\u002Fli>\u003Cli>Тематические токены — наборы под разные темы: светлую, тёмную, отдельные бренды.\u003C\u002Fli>\u003C\u002Ful>","\u003Cul>\u003Cli>В любой дизайн-системе среднего размера\u003C\u002Fli>\u003Cli>При поддержке тёмной темы и нескольких брендов\u003C\u002Fli>\u003Cli>Когда планируете несколько платформ с общим стилем\u003C\u002Fli>\u003C\u002Ful>","\u003Cul>\u003Cli>На совсем небольшом проекте — там хватит обычных переменных стилей без отдельной системы токенов\u003C\u002Fli>\u003C\u002Ful>","\u003Cp>До токенов команда переходила на тёмную тему два месяца: каждый разработчик руками искал по коду все случаи белого фона и заменял их. После внедрения семантических токенов вроде \u003Ccode>color\u002Fbackground\u002Fsurface\u003C\u002Fcode> запуск тёмной темы свёлся к смене значений в одном месте — за пару дней.\u003C\u002Fp>","\u003Cp>Самая частая ошибка — называть токены по внешнему виду, а не по роли: \u003Ccode>color\u002Fred\u003C\u002Fcode> вместо \u003Ccode>color\u002Fdanger\u003C\u002Fcode>. Сначала всё выглядит нормально, но как только красный нужно заменить на оранжевый, начинается цепочка переименований, в которой путается вся команда. Имена по роли живут заметно дольше.\u003C\u002Fp>","дизайн-токены, токены дизайна, Design Tokens","Design Tokens","Дизайн-токены: что это и зачем нужны | Глоссарий Shtab","Дизайн-токены — именованные переменные дизайна: цвета, отступы, шрифты. Какие бывают виды и уровни, как связать макеты с кодом и не ошибиться в именах.",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":88},12,"ux-design","#ec4899",{"ru":89},{"title":90,"description":91},"UX и дизайн","Понятия дизайна пользовательских интерфейсов и пользовательского опыта: исследования, юзабилити, доступность, IA, прототипы, дизайн-системы, методологии и тёмные паттерны.",[93,102],{"id":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":99},48,"ui-design","tool","#7c5ce6",111,{"ru":100},{"title":101},"UI-дизайн",{"id":103,"slug":104,"kind":105,"hex":106,"order":107,"translations":108},50,"design-system-tag","framework","#14b8a6",113,{"ru":109},{"title":110},"Дизайн-системы","Д",[113,120],{"id":114,"order":115,"translations":116},1641,0,{"ru":117},{"question":118,"answer":119},"Это новый стандарт?","\u003Cp>В каком-то виде токены существовали давно — обычные переменные стилей. Нового здесь другое: открытый формат W3C Design Tokens, который позволяет описывать их одинаково и в макетах, и в коде, и в инструментах синхронизации. В крупных компаниях это уже фактический стандарт, а не эксперимент отдельных команд.\u003C\u002Fp>",{"id":121,"order":61,"translations":122},1642,{"ru":123},{"question":124,"answer":125},"Чем семантические токены лучше базовых?","\u003Cp>Семантические токены описывают роль, а не значение: \u003Ccode>color\u002Ftext\u002Fprimary\u003C\u002Fcode> вместо \u003Ccode>blue\u002F900\u003C\u002Fcode>. Когда меняется тема или брендинг, достаточно поменять значение под этим именем — и цвет обновится везде. С базовыми пришлось бы искать по всему коду каждое использование конкретного оттенка и править вручную, а часть мест почти наверняка забыли бы.\u003C\u002Fp>",{"parent":127,"related":135},[128],{"id":129,"slug":130,"translations":131},330,"design-system",{"ru":132},{"title":133,"short_definition":134},"Дизайн-система","Единый набор переиспользуемых компонентов, правил и токенов, который обеспечивает единообразие интерфейса продукта.",[136],{"id":137,"slug":138,"translations":139},333,"style-guide",{"ru":140},{"title":141,"short_definition":142},"Стайл-гайд","Документ с правилами визуального языка продукта: палитра, типографика, иконки, использование логотипа, голос бренда.",108,"2026-05-11T20:33:05.539716+03:00","2026-05-11T20:33:05.539733+03:00",[147,170,194],{"id":148,"slug":149,"translations":150,"category":155,"tags":158,"letter":168,"cover":17,"updated_at":169,"published_at":17},332,"atomic-design",{"ru":151},{"title":152,"short_definition":153,"translation_en":154},"Atomic Design (атомарный дизайн)","Подход Брэда Фроста, в котором интерфейс собирается из иерархии «атомов», «молекул», «организмов», «шаблонов» и «страниц».","Atomic Design",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":156},{"ru":157},{"title":90,"description":91},[159,165],{"id":61,"slug":160,"kind":160,"hex":161,"order":61,"translations":162},"methodology","#5e79ec",{"ru":163},{"title":164},"Методология",{"id":103,"slug":104,"kind":105,"hex":106,"order":107,"translations":166},{"ru":167},{"title":110},"A","2026-05-11T20:33:05.908305+03:00",{"id":171,"slug":172,"translations":173,"category":178,"tags":181,"letter":192,"cover":17,"updated_at":193,"published_at":17},335,"mobile-first",{"ru":174},{"title":175,"short_definition":176,"translation_en":177},"Mobile-first (сначала мобильная версия)","Подход к проектированию, при котором сначала продумывают мобильную версию, а уже потом расширяют её до десктопа.","Mobile-first",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":179},{"ru":180},{"title":90,"description":91},[182,185],{"id":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":183},{"ru":184},{"title":101},{"id":186,"slug":187,"kind":160,"hex":161,"order":188,"translations":189},49,"design-process",112,{"ru":190},{"title":191},"Процесс дизайна","M","2026-05-11T20:33:07.021925+03:00",{"id":195,"slug":196,"translations":197,"category":202,"tags":205,"letter":223,"cover":17,"updated_at":224,"published_at":17},319,"ux-vs-ui",{"ru":198},{"title":199,"short_definition":200,"translation_en":201},"UX и UI: в чём разница","UX — про общий опыт взаимодействия с продуктом, UI — про внешний вид и поведение конкретного интерфейса.","UX vs UI",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":203},{"ru":204},{"title":90,"description":91},[206,213,220],{"id":6,"slug":207,"kind":208,"hex":209,"order":6,"translations":210},"concept","other","#4b5370",{"ru":211},{"title":212},"Концепция",{"id":214,"slug":215,"kind":96,"hex":87,"order":216,"translations":217},47,"ux-research",110,{"ru":218},{"title":219},"Исследования UX",{"id":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":221},{"ru":222},{"title":101},"U","2026-05-11T20:33:01.213551+03:00"]