SOS Design System

O que SOS Design System faz?

Direção de arte

Premium, calmo, cívico, centrado no ser humano. Pense em revista editorial combinada com sala de operações de emergência — confiante, não alarmista.

Faça: headings editoriais de tamanho grande, grande espaço negativo, grade alinhada à esquerda com assimetria deliberada, seções ocasionais em sangria total, iluminação cinematográfica sutil (no máximo um gradiente radial suave por seção), vidro contido apenas em sobreposições, vermelho de emergência usado como um acento preciso.

Não faça: brilho neon, fundos vermelhos saturados, gráficos com emoji, cards genéricos de dashboard em toda parte, cards flutuantes com sombras pesadas, objetos girando continuamente, múltiplos gradientes concorrentes, fundos com partículas.

Regra prática: se o vermelho cobre mais de ~5% de uma viewport, é demais.

Tokens de cor

Defina uma vez em src/app/globals.css sob @theme do Tailwind v4. Os componentes usam apenas utilitários de token (bg-ink, text-paper, text-accent), nunca hex raw.

Token	Valor	Uso
--color-ink	#101318	Fundo escuro primário
--color-ink-raised	#1B2027	Superfícies escuras, molduras de celular, cards em escuro
--color-ink-line	#2A313B	Hairlines/divisores em escuro
--color-paper	#F5F6F7	Fundo de seção claro
--color-paper-line	#E1E4E8	Hairlines em claro
--color-accent	#D93642	Acento: CTAs, marcas-chave, pontos de status
--color-accent-strong	#B8232F	Texto de acento em fundos claros (AA em #F5F6F7)
--color-accent-soft	#F6E8EA	Fundos tintados, badges em claro
--color-text-dark	#171A20	Texto do corpo em fundo claro
--color-text-light	#F7F8FA	Texto do corpo em fundo escuro
--color-muted-dark	#9AA2AD	Texto suave em escuro (≥ 4,5:1 em #101318)
--color-muted-light	#5E6672	Texto suave em claro (≥ 4,5:1 em #F5F6F7)

Notas de contraste:

• #858D98 (suave fornecido) passa em escuro apenas para texto grande; use --color-muted-dark para corpo.
• Texto branco em botões #D93642 é ~4,6:1 — OK para rótulos de botão ≥ 16px semibold. Verifique após qualquer alteração.
• Texto vermelho em fundos claros deve usar --color-accent-strong.
• Nunca transmita status apenas por cor — acompanhe com rótulo ou ícone.

Cores de status (apenas seção de rastreamento): Pendente = âmbar #C98A1B + ícone de relógio, Em andamento = vermelho acento + ponto sem pulsar, Limpo = verde #2F8F5B + ícone de check. Sempre rotulado.

Tipografia

• Fonte: uma variável sans via next/font/google (preferido: Inter Tight para exibição + Inter para corpo, ou Geist sozinho). display: "swap", subset latin, max 2 famílias.
• Headings: peso 600–700, tracking apertado (-0.03em a -0.045em), line-height 0,95–1,05.
• Corpo: peso 400, line-height 1.6, largura máxima ~65ch.
• Eyebrows: 12–13px, maiúsculas, tracking-[0.18em], peso 500, cor suave, frequentemente com uma regra vermelha curta antes.

Escala fluida (coloque em @theme como --text-*):

--text-display: clamp(3rem, 1.2rem + 7.5vw, 9rem);    /* hero h1 */
--text-h2:      clamp(2.25rem, 1.2rem + 4.2vw, 5.5rem);
--text-h3:      clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
--text-lead:    clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
--text-body:    1rem;  /* 1.0625rem em ≥ md */
--text-small:   0.875rem;
--text-eyebrow: 0.8125rem;

Em 320px o headline hero deve caber sem transbordamento — teste especificamente "Every Second Matters."

Layout e espaçamento

• Container: max-w-[1440px], padding lateral clamp(1.25rem, 4vw, 4rem).
• Grade de 12 colunas em ≥ lg; vãos assimétricos (ex.: 7/5, 5/7, offset-1).
• Ritmo vertical das seções: clamp(5rem, 10vw, 10rem) superior/inferior.
• Escala de espaçamento: base 4px (padrão Tailwind). Prefira passos de 6, 8, 12, 16, 24, 32.
• Raio: 6px controles pequenos, 14px cards, moldura de celular ~2,6rem externo.

Superfícies e ritmo de seções

Alterne escuro e claro para criar capítulos: Hero (escuro) → Sobre (claro) → Como funciona (escuro) → Categorias (claro) → Vitrine (escuro, sangria total) → Cadastro (claro) → Rastreamento (escuro) → Coordenação (claro) → FAQ (claro) → CTA final (escuro, cinematográfico) → Footer (escuro).

Iluminação: no máximo um radial-gradient por seção escura, baixa opacidade (≤ 0,18), tom vermelho ou cinza frio. Estático — nunca animado.

Vidro: bg-white/5 + backdrop-blur-md + borda de 1px ink-line, apenas em navegação e pequenas sobreposições. Sem painéis grandes desfocados (desempenho).

Componentes

• Botão primário: bg acento, texto claro, altura mínima 48px, padding horizontal 20–28px, ícone de seta sutil que desloca 2px ao passar o mouse.
• Botão secundário: transparente, borda 1px (ink-line em escuro / paper-line em claro), mesmo tamanho.
• Sem botão de loja/download — esta página não tem CTAs de instalação, veja CLAUDE.md "Escopo: vitrine, não funil de instalação".
• Eyebrow: regra vermelha de 24px + rótulo maiúsculo.
• DraftBadge: pílula pequena com contorno âmbar "Rascunho — aguardando confirmação"; apenas em seções com conteúdo de rascunho.
• Tile de categoria: ícone (lucide 24px, stroke 1.5) + título + descrição de uma linha; borda hairline, sem sombra pesada; hover = mudança na cor da borda + elevação de 2px.
• Moldura de celular: veja skill app-screenshot-showcase.

Iconografia

apenas lucide-react, stroke 1.5, tamanhos 20/24/32. Um ícone por conceito; ícones apoiam o texto, nunca o substituem.

Checklist antes de finalizar o trabalho visual

• Apenas tokens usados; nenhum hex raw em componentes
• Uso de vermelho contido; status não apenas por cor
• Hierarquia de headings lida de relance; um elemento dominante por viewport
• Ritmo claro/escuro intacto
• Contraste verificado para qualquer nova combinação de cores
• Parece intencional em 320px, não apenas encolhido