Pular para o conteúdo

Cores e tipos, num só lugar.

Esta página é uma cartela de consulta: nada aqui é novo em relação às seções 03 e 04, está só reunido para facilitar a hora de montar uma peça.

A cartela completa.

Cores de marca
Amarelo Asa#FEC42B
Preto#141517
Vermelho#E80911
Vermelho escuro (hover/ênfase)#C4070E
Cinza mist (fundo claro)#F4F4F3
Branco#FFFFFF
Verde (confirmação)#065F46
Cinza texto#4A4C50

Veja a proporção de uso entre elas e as combinações proibidas em 03 · Cor.

Tipografia
UsoTamanho
Destaque grande (capa, hero)64px
Título de seção32px
Chamada intermediária20px
Texto corrido16px
Legenda / rótulo12px (nunca menor)

A fonte é sempre BR Omny. Veja os dois registros de uso (chamada vs. texto corrido) em 04 · Tipografia.

Poucas regras, sempre as mesmas.

Espaçamento

Uma escala curta, de espaços bem pequenos (4px) a espaços grandes de respiro entre seções (até 90px). Sempre os mesmos valores, nunca números soltos.

Cantos

Só dois valores de arredondamento: 8px para praticamente tudo (botões, cards, campos) e círculo perfeito só para avatar/foto de perfil. Nunca um raio "no meio do caminho".

Sem sombra

A marca é chapada: a elevação de um card se resolve com borda fina e contraste de fundo, nunca com sombra projetada (box-shadow).

Anterior← 09 · Segurança Próxima seção11 · Movimento →