> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Дизайн квиза: глобальные стили, цвета и пресеты

> Глобальные настройки дизайна квиза: задайте цвета, шрифты и пресеты, чтобы все шаги воронки выглядели в едином стиле вашего бренда.

На вкладке Design вы задаёте **внешний вид всей воронки**. От цветов и типографики до стилей компонентов — всё можно настроить под ваш бренд.

Вместо того чтобы оформлять каждый элемент по отдельности, LanderLab использует **глобальную дизайн-систему**, поэтому изменения автоматически применяются ко всей воронке.

## Как открыть настройки дизайна

Design можно открыть двумя способами:

* Нажмите **значок цветовой палитры** на левой панели — для глобальных стилей
* Нажмите **три точки (•••)** на любом блоке и выберите **Design** — для прямого доступа

По умолчанию все изменения дизайна применяются глобально.

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/43_hzYqVklW9Fu-X/images/image-5-1024x571.png?fit=max&auto=format&n=43_hzYqVklW9Fu-X&q=85&s=c04f4b9ca8b518854114f8aff5254b1f" alt="Панель настроек Design с глобальными стилями квиза" width="1024" height="571" data-path="images/image-5-1024x571.png" />
</Frame>

## Как работает дизайн

Настройки дизайна распространяются на всю воронку по принципу наследования:

* при изменении стилей автоматически обновляются все похожие блоки
* вся воронка выглядит единообразно
* не нужно повторять одни и те же правки

При необходимости стили можно переопределить для отдельных блоков.

## Цвета

Панель Colors определяет визуальную идентичность вашей воронки.

### Основные цвета

* **Primary Color** — используется для кнопок, выбора вариантов и ключевых действий
* **Secondary Color** — используется для акцентов и выделения

### Нейтральные цвета

* чёрный, белый и серые оттенки
* используются для текста, фонов и структуры

### Цвет ошибки

* автоматически применяется к ошибкам валидации и некорректным полям

💡 Совет: сначала задайте основной и дополнительный цвета — так вы создадите единую основу для бренда.

<video src="https://mintcdn.com/landerlab-babdc23f/43_hzYqVklW9Fu-X/videos/change-color.webm?fit=max&auto=format&n=43_hzYqVklW9Fu-X&q=85&s=48d0ac29a81869b1488a33eb8127f3ea" controls={true} data-path="videos/change-color.webm" />

## Шрифты

Воронка автоматически наследует шрифты **лендинга**, на котором она размещена.

* настраивать шрифты внутри воронки не нужно
* всё остаётся визуально единым

💡 Совет: задавайте шрифты на уровне лендинга, чтобы все воронки соответствовали стилю вашего бренда.

## Пресеты

<video src="https://mintcdn.com/landerlab-babdc23f/43_hzYqVklW9Fu-X/videos/presets.webm?fit=max&auto=format&n=43_hzYqVklW9Fu-X&q=85&s=1906a157a2f3a2031e57735d3ca3620a" controls={true} data-path="videos/presets.webm" />

Пресеты — это готовые стили, которые можно мгновенно применить к блокам.

Вместо того чтобы создавать стили с нуля, вы можете:

* применить пресет
* при необходимости скорректировать его

### Пример

Применив пресет к блоку Multiple Choice, вы автоматически зададите:

* цвета
* отступы
* стили кнопок

Благодаря глобальному наследованию:

* обновление стиля одного блока обновляет все похожие блоки

## Зачем использовать пресеты

* быстрее настройка
* единый дизайн
* не нужен опыт в дизайне

💡 Совет: начните со стандартных пресетов и при необходимости донастройте их позже. Так воронка с самого начала выглядит аккуратно и профессионально.

## Рекомендации

* задавайте цвета до того, как начнёте собирать воронку
* сохраняйте единообразие стилей на всех шагах
* не перенастраивайте каждый блок без необходимости
* используйте пресеты, чтобы экономить время


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.