A base que mantém cada página consistente e inconfundível
Um sistema completo o suficiente para criar novas páginas com liberdade, sem nunca perder a identidade. Tokens, tipografia, componentes e movimento, todos falando a mesma língua. Inspirado na disciplina do Carbon e do Fluent, com a alma da Engel.
O azul institucional é a assinatura. Neutros quentes dão respiro, e as profundezas sustentam a versão imersiva.
Marca · Brand
Neutros
Profundezas
Acentos
Dosis para títulos com personalidade. Atkinson Hyperlegible para leitura acessível. League Spartan para rótulos.
Cantos totalmente arredondados, elevação sutil no hover e a seta que avança um passo a cada interação.
Blocos reutilizáveis que compõem qualquer página, sempre com o mesmo ritmo de sombra e espaçamento.
Card padrão
A unidade base de conteúdo, com borda suave e sombra leve.
Card com ícone
Usado em benefícios e diferenciais, com sombra mais presente.
Card imersivo
Vidro sobre fundo escuro para a experiência cinematográfica.
Estatística com número em gradiente e contagem animada.
Ritmo em múltiplos de 8, cantos generosos e sombras com leve tinta azul para dar profundidade sem peso.
Raios
Elevação
Escala de espaço
Toda animação serve à narrativa. Entradas suaves com leve desfoque, curvas expo e física de mola nas microinterações.
Reveal
Blur para nítido, subindo 26px ao entrar na viewport.
expo out · 0.75sScroll scrub
O tempo do vídeo segue o scroll, com suavização por interpolação.
lerp 0.12Hover
Elevação de 2px e seta que avança. Toque com escala 0.97.
springVeja o sistema em ação
O mesmo DNA gera duas experiências completamente diferentes.