Fundamentos — 05

Sombras & Efeitos

O princípio do design system: sombras offset sem blur. Profundidade honesta — sem ilusionismo. O objeto existe no plano, a sombra mostra onde.

Princípio — Neo-Brutalismo

box-shadow: Xpx Xpx 0 color — blur sempre zero. O offset cria ilusão de elevação sem fingimento. Quanto maior o offset, mais elevado o elemento parece. No hover, o offset colapsa e o elemento translada — simulando pressão física.

05.1

Escala de Sombras

Quatro tokens. Use --shadow-md para 90% dos casos.

Shadow SM--shadow-sm2px 2px 0 var(--ink)

Botões secundários, badges, elementos sutis

Shadow MD--shadow-md4px 4px 0 var(--ink)

Botões primários, cards padrão — o mais usado

Shadow LG--shadow-lg6px 6px 0 var(--ink)

Cards de destaque, modais, elementos hero

Shadow Brand--shadow-brand4px 4px 0 var(--accent)

CTAs de alta prioridade, elementos de marca

05.2

Hover — Efeito de Pressão

Passe o mouse para ver o collapse da sombra. Comportamento padrão de todos os elementos clicáveis.

SM
--shadow-sm
MD
--shadow-md
LG
--shadow-lg
Brand
--shadow-brand
05.3

Border Radius

Mínimo. O arredondamento excessivo contradiz o estilo neo-brutalista.

SM — 2px--radius-sm

Padrão para botões e badges

MD — 4px--radius-md

Cards e inputs

LG — 8px--radius-lg

Componentes maiores — usar com moderação

Full — pill--radius-full

Tags e avatares circulares

05.4

Efeitos Especiais

Highlight, tape e rule — metáfora de material impresso aplicada ao digital.

--highlight — rgba(255, 220, 80, 0.42)

O EuMilitar forma candidatos aprovados nas principais escolas militares do Brasil com método comprovado e disciplina.

--tape · --tape-edge · --rule
conteúdo

--rule — linha divisória em bege médio





--rule--rule 2px--border-default--border-strong