Design system - ENPASA

Cores

Blocos com fundo branco ou claro levam data-theme="light"; qualquer outro, data-theme="dark". O logo e o botão do menu trocam de cor por esse atributo.

Azul primário--c-primary · #1F76DDDestaques em fundo escuro, cards de serviço, linhas, botões.

Azul escuro--c-primary-dark · #063D88Texto em fundo claro; fundo da Liderança.

Dourado--c-gold · #9E7B3ETags, números de indicadores, títulos de clientes.

Cinza--c-gray · #808285Textos secundários.

Fundo escuro--c-bg-dark · #0A1628Fundo escuro principal.

Card escuro--c-card-dark · #111D33Cards sobre escuro; seção Cases.

Claro--c-light · #F5F7FAFundo claro; texto sobre escuro.

Branco--c-white · #FFFFFFFundo branco puro.

Tipografia

Michroma (títulos) e Roboto (corpo), servidas pelo próprio site. A Michroma é muito larga: confira a quebra de linha em telas pequenas. No celular nenhum texto fica abaixo de 12 px.

Hero

--fs-hero72 · 56 · 30 px · MichromaHero da Home

Título de seção

--fs-h244 · 36 · 24 px · Michroma

Título de seção

--fs-h340 · 32 · 22 px · Michroma

Menu, galeria, clientes

--fs-h432 · 28 · 24 px · Michroma

+ 550.000m

--fs-stat38 · 32 · 28 px · Michroma

Texto pequeno acima

--fs-kicker24 · 20 · 14 px · Michroma, caixa alta

Título de card de case

--fs-h620 · 20 · 18 px · Michroma

Subtítulo e corpo primário, em Roboto 500.

--fs-lead18 · 18 · 16 px · Roboto

Corpo de texto corrido, em Roboto 400.

--fs-body16 px · Roboto

Texto de card, link e botão.

--fs-small14 px · Roboto

Tag e rótulo

--fs-label12 px · Roboto 700, caixa alta

Valores na ordem: computador (a partir de 1280) · tablet (768 a 1279) · celular (até 767 e celular deitado).

Espaços, grade e raios

Largura máxima 1440 (conteúdo útil 1312). Acima disso a página não cresce: os fundos vão de ponta a ponta e o conteúdo fica centralizado.

8 --s-8

16 --s-16

24 --s-24

32 --s-32

48 --s-48

64 --s-64

96 --s-96

--gap-page 64 · 40 · 20 | --gap-section 96 · 80 · 56 | --gap-grid 24 · 20 · 16

5
botão do menu

10
botão cheio

12
logo

16
card

20
CTA, foto

999
tag

Botões, links e tags

O hover é sempre em expo-out: a barra azul do botão-link cresce e o sublinhado do menu estica.

Botão-link Saiba mais Saneamento Tag pequena Tag grande

Cards

Em blocos claros. Os blocos completos, com repetidores, ficam na lista de blocos.

Serviço

Título e card têm a mesma cor; a sobreposição de 5 px é intencional.

Saiba mais

Solução

Ícone em caixa, título e texto.

Diferencial

Título e texto, sem ícone.

Cultura

Ícone grande, título e texto.

Canal

Link de contato

Local

Endereço em duas linhas

Ver mapa

Ícones e padrões de fundo

Os padrões de linhas aparecem no máximo a cada 2 ou 3 blocos, de preferência depois do Hero e perto da primeira introdução.

Curva

Laço

Onda

Linhas altas

Movimento

Curva única: expo-out, cubic-bezier(0.16, 1, 0.3, 1), em --ease. Transição de página só na saída. Quem pede menos movimento no sistema vê tudo sem animação, sem zoom e sem rolagem automática.

Passe o mouse sobre a faixa. Entradas: .reveal, com data-reveal (scale, fade, left, right) e data-reveal-delay de 1 a 8, 90 ms cada.

Blocos

Os blocos disponíveis no editor, na categoria Enpasa. Um bloco é uma seção inteira: itens repetidos são repetidores e as variações são listas fechadas.