Google - Material 3 Expressive
Usar em dashboards, tabelas, filas, acoes e componentes repetidos.
Guia visual Aguara Delivery.
Duas direcoes convivem no front: Google para produtividade expressiva e Apple para camadas de acesso com vidro funcional.
Apple - Liquid Glass
Usar em portal, barras, controles de acesso e elementos temporarios.
Rotas criadas
- `/institucional` - site publico.
- `/portal` - entrada e escolha de acesso.
- `/guia-visual` - referencia viva.
- `/me` - cliente logado via cookie.
Material 3 Expressive no operacional.
O objetivo nao e decorar o sistema. E destacar o que precisa de acao rapida sem sacrificar densidade e consistencia.
Cor e hierarquia
Paletas podem variar, mas o significado precisa ser semantico.
Componentes
- Acoes primarias maiores e mais evidentes.
- Shape variado para criar hierarquia sem perder leitura.
- Material Symbols como linguagem padrao de icones.
- Tonal surfaces para agrupar informacao operacional.
Exemplo de toolbar
Liquid Glass no acesso.
No Aguara Delivery, vidro e camada funcional. Ele nao compete com tabela, mapa ou fila; ele ajuda a separar navegacao, contexto e decisao.
Cliente resolvido
A sessao e validada no servidor. A UI so mostra metadados seguros, sem expor token ou cookie.
Regras Liquid Glass
- Glass apenas em navegacao, controles e acessos flutuantes.
- Conteudo operacional continua legivel em superficies solidas.
- Backdrops com blur, saturacao e borda luminosa.
- Movimento e interacao devem parecer fluidos, mas discretos.