'/%3e%3cpath%20d='M83.8172%20112C100.688%20112%20111.886%2098.2694%20112%2083.8882H44.0245C25.8409%2083.8882%2016.001%2094.3169%2016.001%20112H83.8172Z'%20fill='url(%23paint1_linear_101_577)'/%3e%3cpath%20d='M44.1725%2044.1138H16.0008C15.9465%2051.0963%2018.504%2058.2306%2024.2977%2064.0225L44.1706%2083.8881L52.8986%2075.3569L61.7636%2066.7019C63.2767%2065.2244%2063.2786%2062.7888%2061.7636%2061.3094L44.1725%2044.1138Z'%20fill='%233A5FFF'/%3e%3cpath%20d='M83.8248%2083.8862H111.996C112.051%2076.9037%20109.493%2069.7693%20103.7%2063.9774L83.8267%2044.1118L75.0986%2052.6431L66.2337%2061.2981C64.7206%2062.7756%2064.7187%2065.2112%2066.2337%2066.6906L83.8248%2083.8862Z'%20fill='%233A5FFF'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear_101_577'%20x1='16.001'%20y1='30.055'%20x2='111.998'%20y2='30.055'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%2370ADFE'/%3e%3cstop%20offset='0.62'%20stop-color='%233A5FFF'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear_101_577'%20x1='111.998'%20y1='97.9451'%20x2='16.001'%20y2='97.9451'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%2370ADFE'/%3e%3cstop%20offset='0.62'%20stop-color='%233A5FFF'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
Стайл-гайд
Стайл-гайд — компактный документ, который помогает всем участникам продукта говорить на одном визуальном языке. У маленькой команды его может вообще не быть на бумаге — стиль живёт в головах. С ростом — без него стиль начинает «плыть».
Что обычно входит
- Палитра цветов и правила их использования.
- Типографическая шкала и иерархия заголовков.
- Сетка и базовые отступы.
- Иконки и иллюстрации, стиль фотографий.
- Логотип: правильное и неправильное использование.
- Голос бренда и тон коммуникации.
Что НЕ входит
- Конкретные компоненты — это уже дизайн-система.
- Код — это уровень компонентной библиотеки.
- Детальные правила взаимодействия — это UX-паттерны.
Когда применять и когда нет
Применять
- В маркетинге, на лендингах, в брендовых материалах
- В небольшой компании до запуска полноценной дизайн-системы
- В работе с подрядчиками: фрилансеры и агентства быстро войдут в стиль
Не применять
- В большом продукте без дизайн-системы — стайл-гайд один тут уже не справится
Примеры применения
Маленькая команда выпустила первую версию продукта, и каждый новый лендинг получался немного по-своему. Через месяц собрали короткий стайл-гайд на 10 страницах: палитра, типографика, как использовать логотип, голос бренда. После этого новые маркетинговые страницы стали выглядеть как часть одного продукта, и согласование с дизайнером уходило не на цвет шрифта, а на смысловые вещи.
Часто задаваемые вопросы
Брендбук — обычно более широкий документ про бренд: миссия, ценности, тон коммуникации, фирменный стиль во всём. Стайл-гайд — практическая часть брендбука, посвящённая визуальному языку. В жизни границы между ними размыты, и в маленькой компании это часто один и тот же документ.
Да, как часть дизайн-системы. Конкретные компоненты сами по себе не объясняют принципы их применения. Стайл-гайд — это «почему» и «как», дизайн-система — «что». В зрелых компаниях они живут вместе как единая внутренняя экосистема.