[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"general-list":3,"footer-feature-tags":4,"slate-glossary-term-style-guide":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":145},{"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":142,"helpful_yes_count":115,"helpful_no_count":115,"created_at":143,"updated_at":144,"published_at":17},333,"style-guide",{"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},"Стайл-гайд","Документ с правилами визуального языка продукта: палитра, типографика, иконки, использование логотипа, голос бренда.","Стайл-гайд — это «правила правописания» для дизайна продукта. В нём описаны палитра цветов, типографика, иконки, отступы, использование логотипа, иногда — тон голоса и принципы общения с пользователем. От дизайн-системы отличается тем, что фокусируется на визуальном языке, а не на компонентах. Часто стайл-гайд — первый шаг к полноценной дизайн-системе.","\u003Cp>Стайл-гайд — компактный документ, который помогает всем участникам продукта говорить на одном визуальном языке. У маленькой команды его может вообще не быть на бумаге — стиль живёт в головах. С ростом — без него стиль начинает «плыть».\u003C\u002Fp>\u003Ch3>Что обычно входит\u003C\u002Fh3>\u003Cul>\u003Cli>Палитра цветов и правила их использования.\u003C\u002Fli>\u003Cli>Типографическая шкала и иерархия заголовков.\u003C\u002Fli>\u003Cli>Сетка и базовые отступы.\u003C\u002Fli>\u003Cli>Иконки и иллюстрации, стиль фотографий.\u003C\u002Fli>\u003Cli>Логотип: правильное и неправильное использование.\u003C\u002Fli>\u003Cli>Голос бренда и тон общения.\u003C\u002Fli>\u003C\u002Ful>\u003Ch3>Что НЕ входит\u003C\u002Fh3>\u003Cul>\u003Cli>Конкретные компоненты — это уже дизайн-система.\u003C\u002Fli>\u003Cli>Код — это уровень библиотеки компонентов.\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>Маленькая команда выпустила первую версию продукта, и каждая новая посадочная страница получалась немного по-своему. Через месяц собрали короткий стайл-гайд на 10 страницах: палитра, типографика, как использовать логотип, голос бренда. После этого новые маркетинговые страницы стали выглядеть как часть одного продукта, и согласование с дизайнером уходило не на цвет шрифта, а на смысловые вещи.\u003C\u002Fp>","\u003Cp>Не пытайтесь сразу делать «брендбук на 100 страниц». Стайл-гайд работает, когда им реально пользуются. Лучше короткий понятный документ на 10–15 страниц, который читают все новые сотрудники, чем красивый файл, который лежит в архиве. Держите его в базе знаний рядом с остальными рабочими материалами — тогда его найдут, а не будут искать по переписке.\u003C\u002Fp>","стайл-гайд, руководство по стилю, гайд по стилю, Style Guide, brand guidelines","Style Guide","Стайл-гайд: что это и отличия от дизайн-системы | 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},1436,0,{"ru":117},{"question":118,"answer":119},"Чем отличается от брендбука?","\u003Cp>Брендбук — обычно более широкий документ про бренд: миссия, ценности, тон общения, фирменный стиль во всём. Стайл-гайд — практическая часть брендбука, посвящённая визуальному языку. В жизни границы между ними размыты, и в маленькой компании это часто один и тот же документ.\u003C\u002Fp>",{"id":121,"order":61,"translations":122},1437,{"ru":123},{"question":124,"answer":125},"Нужен ли стайл-гайд, если есть дизайн-система?","\u003Cp>Да, как часть дизайн-системы. Конкретные компоненты сами по себе не объясняют принципы их применения. Стайл-гайд — это «почему» и «как», дизайн-система — «что». В зрелых компаниях они живут вместе как единая внутренняя система правил.\u003C\u002Fp>",{"related":127},[128,135],{"id":129,"slug":130,"translations":131},331,"design-tokens",{"ru":132},{"title":133,"short_definition":134},"Дизайн-токены","Именованные переменные дизайна (цвета, размеры, шрифты), которые единообразно используются и в макетах, и в коде.",{"id":136,"slug":137,"translations":138},330,"design-system",{"ru":139},{"title":140,"short_definition":141},"Дизайн-система","Единый набор переиспользуемых компонентов, правил и токенов, который обеспечивает единообразие интерфейса продукта.",106,"2026-05-11T20:33:06.250450+03:00","2026-05-11T20:33:06.250466+03:00",[146,169,193],{"id":147,"slug":148,"translations":149,"category":154,"tags":157,"letter":167,"cover":17,"updated_at":168,"published_at":17},332,"atomic-design",{"ru":150},{"title":151,"short_definition":152,"translation_en":153},"Atomic Design (атомарный дизайн)","Подход Брэда Фроста, в котором интерфейс собирается из иерархии «атомов», «молекул», «организмов», «шаблонов» и «страниц».","Atomic Design",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":155},{"ru":156},{"title":90,"description":91},[158,164],{"id":61,"slug":159,"kind":159,"hex":160,"order":61,"translations":161},"methodology","#5e79ec",{"ru":162},{"title":163},"Методология",{"id":103,"slug":104,"kind":105,"hex":106,"order":107,"translations":165},{"ru":166},{"title":110},"A","2026-05-11T20:33:05.908305+03:00",{"id":170,"slug":171,"translations":172,"category":177,"tags":180,"letter":191,"cover":17,"updated_at":192,"published_at":17},335,"mobile-first",{"ru":173},{"title":174,"short_definition":175,"translation_en":176},"Mobile-first (сначала мобильная версия)","Подход к проектированию, при котором сначала продумывают мобильную версию, а уже потом расширяют её до десктопа.","Mobile-first",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":178},{"ru":179},{"title":90,"description":91},[181,184],{"id":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":182},{"ru":183},{"title":101},{"id":185,"slug":186,"kind":159,"hex":160,"order":187,"translations":188},49,"design-process",112,{"ru":189},{"title":190},"Процесс дизайна","M","2026-05-11T20:33:07.021925+03:00",{"id":194,"slug":195,"translations":196,"category":201,"tags":204,"letter":222,"cover":17,"updated_at":223,"published_at":17},319,"ux-vs-ui",{"ru":197},{"title":198,"short_definition":199,"translation_en":200},"UX и UI: в чём разница","UX — про общий опыт взаимодействия с продуктом, UI — про внешний вид и поведение конкретного интерфейса.","UX vs UI",{"id":85,"slug":86,"hex":87,"icon":17,"order":85,"translations":202},{"ru":203},{"title":90,"description":91},[205,212,219],{"id":6,"slug":206,"kind":207,"hex":208,"order":6,"translations":209},"concept","other","#4b5370",{"ru":210},{"title":211},"Концепция",{"id":213,"slug":214,"kind":96,"hex":87,"order":215,"translations":216},47,"ux-research",110,{"ru":217},{"title":218},"Исследования UX",{"id":94,"slug":95,"kind":96,"hex":97,"order":98,"translations":220},{"ru":221},{"title":101},"U","2026-05-11T20:33:01.213551+03:00"]