Cores da marca
Extraídas diretamente do logo.
Tipografia
Baloo 2 (display) + Nunito (texto) — substitutas Google Fonts; sem fonte oficial da marca fornecida.
A SOMAR acredita que solidariedade, organização, multiplicação, amor e responsabilidade transformam comunidades inteiras — um passo de cada vez.
Texto secundário / legendas — Nunito 500.
Espaçamento, raio & elevação
Escala base 4px. Cantos bem arredondados. Sombras suaves em 3 níveis. Escala de z-index para empilhamento previsível (dropdown → modal → tooltip → toast).
Acessibilidade
Todo componente interativo segue as mesmas regras — auditado e corrigido nesta versão.
--focus-ring) aparece só via teclado (Tab), nunca no clique do mouse — reduz ruído visual sem sacrificar WCAG 2.4.7.--color-bg/--color-surface passam 4.5:1 (AA). Botões usam branco sobre azul/verde/vermelho saturados (>4.5:1).aria-invalid, aria-busy, aria-checked, role="alert"/status em campos, botões de carregamento, switches e alertas.prefers-reduced-motion encurta todas as transições e animações automaticamente.Ícones
Set Lucide curado, inline (sem CDN). Traço arredondado, herda a cor do texto via currentColor. Nunca misturar com emoji ou outros sets.
Botões
Pílula sempre. 5 variantes, 3 tamanhos, estados de hover/press/foco/loading/disabled, versão ícone-only. Mesma altura dos Inputs (--control-height-*).
Código
<Button variant="urgent" size="lg">Doar agora</Button>
<Button variant="primary" loading>Enviando</Button>
<Button variant="outline" iconOnly aria-label="Curtir" icon={<Icon name="heart" />} />Badges & Tags
Badge é somente leitura; Tag é removível.
Cards
Padrão, com tint, e interativo (clicável, com elevação e anel de foco).
Formulários
Input, Textarea, Select, Checkbox, Radio, Switch — todos com os mesmos estados: padrão, foco, erro, sucesso, desabilitado.
Código
<FormField label="E-mail" htmlFor="email" error={emailError}>
<Input id="email" type="email" error={!!emailError} icon={<Icon name="mail" size={16} />} />
</FormField>
<Switch id="news" checked={on} onChange={e => setOn(e.target.checked)} label="Receber novidades" />Feedback
Alert (persistente), Toast (transitório), ProgressBar e Spinner.
Dados & Navegação
Avatar, Divider, Tooltip, Tabs, Breadcrumb, Pagination.
Estados de dados
Skeleton (carregando), EmptyState (vazio), Table (dados) e Kbd (atalhos).
Código
<Skeleton width={220} height={16} />
<EmptyState icon="inbox" title="Nenhuma doação ainda" action={<Button size="sm">Compartilhar</Button>} />
<Table columns={[{key:'name', label:'Doador'}]} rows={[{name:'Maria'}]} />Overlay
Modal (scrim sólido, fecha com Esc/clique fora) e DropdownMenu (menu de ações).
Código
<DropdownMenu align="right"
trigger={<Button variant="ghost" iconOnly aria-label="Mais ações" icon={<Icon name="more-horizontal" />} />}
items={[
{ label: 'Editar', icon: 'edit' },
{ divider: true },
{ label: 'Excluir', icon: 'trash', danger: true },
]} />Exemplo real — doação
Componentes combinados como numa página de produto: é isto que se copia como ponto de partida.