> For the complete documentation index, see [llms.txt](https://kb.stoque.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kb.stoque.com.br/migre-para-zeev/mudancas-visuais.md).
# 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="" %}