# Переход на обновлённый дизайн V2

> [HTML Version](design-update.html)

С версии 2026.7 в ELMA365 применяется по умолчанию новый дизайн **V2**, в котором внешний вид компонентов улучшен и приведён к единообразию. 

## Этапы перехода на дизайн V2

Чтобы вы могли адаптировать пользовательские интерфейсы к дизайну **V2**, предусмотрено несколько этапов его внедрения:

- **с релиза 2026.4** — дизайн **V2** доступен для выбора вручную;

- **с релиза 2026.7** — дизайн **V2** применяется по умолчанию, но можно включить версию **V1**;

- **с релиза 2026.11** — доступен только дизайн **V2**.  

### Адаптировать интерфейсы к дизайну V2

Поскольку в дизайне **V2** изменены отступы, размеры и цвета компонентов, элементы пользовательских интерфейсов могут отображаться некорректно. Рекомендуем проверить конфигурацию и адаптировать её до выхода версии системы 2026.11. 

Для адаптации компонентов используйте: 

- [редактор стилей](style-editor.md) — специализированный инструмент для настройки внешнего вида виджетов с помощью языка CSS;

- [дизайн-токены](design-tokens.md) — особые переменные, которые определяют визуальный стиль системы. Их применение позволяет сохранять единообразие дизайна и брендирования на системных и пользовательских страницах.

Чтобы компонент правильно отображался в дизайне **V2**, откройте его в [дизайнере интерфейсов](interface_designer.md) и исправьте CSS‑стили виджетов, внешний вид которых отличается от ожидаемого. Для этого примените редактор стилей и дизайн-токены. 

### Протестировать дизайн V2

Если вы используете версию дизайна **V1**, примените дизайн **V2** в тестовом режиме. Это позволит оценить корректность отображения пользовательского интерфейса для дальнейшего перехода на дизайн **V2**.

Для этого используйте инструменты разработчика в браузере:

1. Откройте компонент, например форму просмотра приложения.

2. Перейдите к инструментам разработчика, например, в браузере Google Chrome нажмите клавишу **F12**.

3. На вкладке **Элементы** (**Elements**) включите опцию **.cls**, которая отображает классы элементов.

4. Отключите класс **old-theme**. К странице в вашем браузере применится дизайн **V2**. 

**(design-update-1.png)**

5. Визуально проверьте расположение и соразмерность элементов интерфейса, единообразие оформления и т. д. в дизайне **V2**. 

Если пользовательский компонент отображается некорректно, адаптируйте его к дизайну **V2**.