# Mudanças visuais
## Novo design system
No Zeev um novo design system foi implementado, denominado “Zeev Bootstrap”. Esse design system é composto por um conjunto de **fontes, cores, tamanhos, formas, padrões, ícones e formatos** que são uniformes e respeitados ao longo da plataforma, e passam a ser padrão para todos os produtos da Zeev (consequentemente, para os produtos Zeev e Zeev Docs).
Esse design system procura respeitar:
1. A visão de **mobile first**, ou seja, o design system foi criado pensando no uso em dispositivos móveis, e adaptado ao uso em desktops;
2. A visão de **acessibilidade**, com contraste de cores, tamanhos de fontes, legibilidade e espaçamento seguindo normas internacionais da W3C (). Acessibilidade na Web significa que pessoas com deficiência podem igualmente perceber, entender, navegar e interagir com sites e ferramentas;
3. A possibilidade de **customização** do layout do cliente, desde cores, logotipia até componentes mais avançados;
4. A busca pela **simplicidade e auto-explicação**, sem a necessidade de leitura de manuais e afins;
É importante destacar que houve um **aumento geral do tamanho das fontes** do sistema com o novo design system. Esse aumento é **deliberado** e visa adequar a plataforma aos **padrões de acessibilidade** atuais de mercado e aos padrões atuais de resolução de monitores. Entretanto, caso a organização não se sinta confortável com esse novo padrão, pode mudar o tamanho de fontes e espaçamentos (além de cores e demais elementos), usando a **customização de Skins do sistema.**
## Novo formato de skins
Os antigos “skins”, usados para customizar visualmente a interface, desenvolvidos no BPMS3, não funcionarão no Zeev, a não ser em telas de execução de tarefas usando o modo de execução 1.0 (veremos isso em capítulo a frente).
De modo geral toda a estrutura HTML e de CSS da aplicação mudou, o que enseja a criação de novos arquivos de SKIN.
Como facilitador, o novo modelo de SKINS utiliza a tecnologia conhecida como “CSS Variables”, o que facilita em muito a customização. Essas CSS Variables serão brevemente documentadas no .
## Horizontalização da interface
No caso do acesso via computadores Desktop, o **menu e outras funções do sistema**, que antes se encontravam na parte superior da tela do Zeev, agora foram **colocados em um menu lateral**, que antes não existia.
Esse menu lateral é coerente com a mudança geral das resoluções dos monitores de computadores desktop e notebooks nos últimos anos, **que tomaram um formato “wide”**, ou seja, com largura maior porém altura menor.
Como pode ser visto no gráfico abaixo, a resolução de **1366 x 768 é principal usada no Brasil**, seguida da **1920 x 1080**
Ainda assim, **o menu é retrátil**, podendo aumentar ainda mais a área visível de trabalho. A seleção feita pelo usuário é respeitada e lembrada em seus próximos acessos.
## Responsividade
Mesmo sendo uma característica já presente no BPMS3, a **responsividade** ganhou novos contornos com o Zeev e o uso do Zeev Bootstrap. Nas prints abaixo vemos a mesma tela sendo visualizada em **diferentes resoluções, até mesmo em mobile**. Quanto menor a resolução da tela, menos componentes são plotados e a experiência é otimizada para o tamanho usado.
## Nova interface mobile
A interface **mobile também foi reformada**, e herda os mesmos princípios do design system. Ela está mais ágil e mais amigável, e compartilha da mesma nomenclatura e padrões visuais do resto do sistema.
### Demonstração prática
Veja no vídeo abaixo uma demonstração das principais mudanças visuais.
{% embed url="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://kb.stoque.com.br/migre-para-zeev/mudancas-visuais.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.