# SOMAR — Design System > Guia de referência completo do sistema de design da SOMAR (ONG). Use este arquivo como contexto para IA (Claude, ChatGPT, Cursor) ou como documentação de onboarding para designers/devs. ## Sobre a marca ONG / projeto social. Público: doadores, famílias, crianças, voluntários. Tom: acolhedor, alegre/lúdico (infantil), inspirador — sem jargão institucional, linguagem em primeira pessoa do plural, voltada à ação ("Doe agora"). Fonte original: apenas o logo em imagem (sem Figma/brandbook) — paleta e tipografia foram derivadas dele; ver "Pendências" no fim. --- ## 1. Cores Todas as cores são hex congelados (não geradas dinamicamente) para renderizar idêntico em qualquer browser/Figma/Illustrator. ### Marca | Token | Hex | Uso | |---|---|---| | `--color-primary` | `#3D3DFA` | Ações principais, links, foco | | `--color-secondary` | `#A6CE39` | Confirmação, sucesso, progresso | | `--color-highlight` | `#FFC000` | Destaque, atenção | | `--color-urgent` | `#FF3B30` | CTAs de doação, erro, urgência | Cada uma tem `-hover` (mais escura) e `-tint` (fundo suave, ~50) e, primária/secundária/urgente, `-press` (ainda mais escura, clique). ### Neutros (cinza levemente frio) `--neutral-0` `#fcfdff` → `--neutral-900` `#0b0d12`, 11 passos. ### Semânticas (sempre usar estas nos componentes, nunca a cor bruta) `--color-bg`, `--color-surface`, `--color-surface-tint`, `--color-surface-subtle`, `--color-surface-muted`, `--color-surface-hover`, `--color-border`, `--color-border-strong`, `--text-primary/secondary/tertiary/placeholder/inverse`, `--color-success/warning/danger/info` (+ `-border`). ### Tema escuro Ativa com `data-theme="dark"` no `` ou subárvore. Só os aliases semânticos mudam — as cores de marca em si não. `--color-primary` clareia para `#3e79ff` (o azul puro falha contraste em fundo escuro); sombras ficam mais "achatadas" (menos profundidade, mais escuridão). ### Foco & estado `--focus-ring` (azul), `--focus-ring-danger`, `--focus-ring-success` — anel de 3px, só aparece via teclado (`:focus-visible`), nunca no clique do mouse. `--opacity-disabled: 0.45`. `--scrim` (fundo de modal, sólido, sem blur). --- ## 2. Tipografia **Display/títulos:** Baloo 2 (peso 500–800) — arredondada, ecoa as letras do logo. **Texto/UI:** Nunito (peso 400–700) — legível, também arredondada. ⚠️ Substitutas do Google Fonts — a marca não forneceu fonte própria. Trocar se houver fonte oficial. Escala (rem): `--text-xs` 13px · `sm` 15px · `base` 17px · `lg` 20px · `xl` 26px · `2xl` 34px · `3xl` 44px · `4xl` 60px. `--leading-tight` 1.15 · `snug` 1.3 · `normal` 1.55 (parágrafos). Tracking: `--tracking-display: -0.015em` (títulos ≥2xl, evita "soltura" em display grande); `--tracking-caps: 0.06em` (labels maiúsculas/eyebrows). Pesos: regular 400, medium 500, semibold 600, bold 700, black 800. --- ## 3. Espaçamento, forma & elevação Escala 4px: `--space-1` 4px → `--space-10` 128px (1,2,3,4,5,6,7,8,9,10 = 4,8,12,16,24,32,48,64,96,128). Raios: `--radius-sm` 10px · `--radius-md` 16px · `--radius-lg` 24px · `--radius-pill` 999px. Cantos sempre bem arredondados (identidade lúdica do logo) — nunca square. Sombras (suaves, quentes, sem sombra dura): `--shadow-sm/md/lg`. Alturas de controle (Button/Input/Select alinham lado a lado): `--control-height-sm` 36px · `md` 44px · `lg` 52px. Motion: `--ease-standard` para transições normais, `--ease-bounce` (`cubic-bezier(.34,1.56,.64,1)`) para press/microinterações. Durações `--duration-fast` 120ms · `base` 200ms · `slow` 360ms. `prefers-reduced-motion` é respeitado globalmente. z-index: `--z-dropdown` 100 · `sticky` 200 · `overlay` 300 · `modal` 400 · `tooltip` 500 · `toast` 600. --- ## 4. Ícones Set **Lucide** curado, inline em `components/core/Icon.jsx` (~20 glifos, sem CDN). Traço arredondado, cor via `currentColor`. Regra: um set só — nunca misturar com emoji, font-icons ou SVG desenhado à mão. --- ## 5. Componentes Cada componente vive em `components//` com `.jsx` (fonte React), `.d.ts` (props) e `.prompt.md` (exemplos de uso). `_ds_bundle.js` espelha tudo em JS puro (`window.SOMAR.*`) para demos HTML sem build step. - **core** — `Icon`, `Button` (variants primary/secondary/urgent/outline/ghost; sizes sm/md/lg; states hover/press/focus/loading/disabled; `iconOnly`), `Spinner`, `Badge`/`Tag`, `Card`/`CardHeader`/`CardFooter` (`tint`, `interactive`) - **forms** — `FormField` (label/helper/error wrapper), `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `Switch` — todos com estados default/foco/erro/sucesso/disabled - **feedback** — `Alert` (persistente), `Toast` (transitório, `aria-live`), `ProgressBar` - **data** — `Avatar` (fallback iniciais), `Divider`, `Tooltip`, `Tabs` (pill), `Skeleton`, `EmptyState`, `Kbd`, `Table` - **overlay** — `Modal` (scrim sólido, Esc/click-outside), `DropdownMenu` (menu de ações, `danger` items) - **navigation** — `Breadcrumb`, `Pagination` Regras de composição: botões sempre pílula; cards nunca com borda visível (branco+sombra OU tint sem sombra); todo elemento interativo tem foco visível por teclado; ícones decorativos são `aria-hidden`. --- ## 6. Acessibilidade - Foco de teclado visível em 100% dos componentes interativos, invisível no clique do mouse. - Contraste AA: texto sobre bg/surface passa 4.5:1; botões usam branco sobre cor saturada. - Estados anunciados: `aria-invalid`, `aria-busy`, `aria-checked`, `role="alert"/"status"`. - `prefers-reduced-motion` encurta toda animação/transição automaticamente. --- ## 7. Arquivos do projeto ``` design-system.html página viva navegável (sidebar responsiva, tema claro/escuro) tokens/ colors.css, typography.css, spacing.css, base.css (reset+a11y) styles.css importa tudo de tokens/ guidelines/ specimens isolados (cor, tipo, espaçamento, logo) components/ ver seção 5 assets/logo-somar.png logo original (PNG, fundo branco) assets/brand/ logo vetorizado em SVG (horizontal, vertical, mono, branco, preto, ícone) _ds_bundle.js espelho JS puro dos componentes (usado pelos demos HTML) ``` ## 8. Pendências - Logo só existe como PNG com fundo branco + SVGs reconstruídos por vetorização (ver `assets/brand/`) — confirme com o criador se há arquivo original vetorial. - Fontes (Baloo 2 / Nunito) são substitutas — trocar se a organização tiver fonte de marca própria. - Kit de site institucional (hero, causas, CTA de doação, rodapé) ainda não construído.