Componentes — 01

Button

Cinco variantes, três tamanhos. Hover com deslocamento de sombra neo-brutalista — a sombra colapsa e o botão translada 2px.

01.1

Variantes

Hierarquia de ação: use Primary para a ação principal, Secondary para ações secundárias, Ghost para ações terciárias.

Primary — ação principal

<Button variant="primary">Inscrever-se</Button>

Secondary — ação secundária

<Button variant="secondary">Saiba mais</Button>

Ghost — ação terciária

<Button variant="ghost">Cancelar</Button>

Danger — ação destrutiva

<Button variant="danger">Excluir conta</Button>

Brand Inverse — ação primária sobre fundo escuro ou verde

<Button variant="brand-inverse">Começar agora</Button>

Ghost Inverse — ação secundária sobre fundo escuro ou verde

<Button variant="ghost-inverse">Saiba mais</Button>

Urgent — CTA de conversão máxima, escassez

<Button variant="urgent">Garantir última vaga →</Button>

Hierarquia — Verde normal × Laranja urgente

Regra de uso:Use primary (verde) para a ação principal da interface. Reserve urgent (laranja) exclusivamente quando há escassez ou prazo real — não como estilo decorativo.

01.2

Tamanhos

SM · MD · LG

<Button size="sm">Pequeno</Button>
<Button size="md">Médio</Button>
<Button size="lg">Grande</Button>

Com ícone — SM · MD · LG

<Button size="sm" icon={<Icon />}>Filtrar</Button>

01.3

Comportamento de Hover

A sombra offset colapsa e o botão se desloca 2px — simulando pressão física. É o padrão neo-brutalista deste design system.

Estado normal: box-shadow: 4px 4px 0 var(--ink)

Estado hover: box-shadow: none; transform: translate(2px, 2px)

Transition: 100ms ease

Passe o mouse para ver o efeito

01.4

Tokens Usados

background (primary)--surface-brand#1f4d2a

color (primary)--text-inverse#f5f0e8

border--border-strong#433c34

box-shadow--shadow-md4px 4px 0 var(--ink)

font-family--font-body'Barlow', sans-serif

border-radius--radius-sm2px

padding (md)--sp-2 / --sp-48px / 16px