Resilience_microsite/specs/01-design-system.md

01 — Design system

Inspirado no INESCC (institucional, navy, alto contraste, cantos suaves) com camada moderna (espaçamento generoso, micro-animações discretas).

Tipografia

• Família: Outfit (Google Fonts), fallback system-ui, sans-serif.
• Escala (Tailwind): display text-5xl/6xl (Hero), headings text-2xl/3xl, corpo text-base, meta/labels text-sm uppercase tracking-wide.
• Pesos: 300/400/500/600/700.

Paleta (tokens → CSS variables, expostos via Tailwind/shadcn)

Valores iniciais propostos; afináveis após validação contra a marca INESCC.

Token	Uso	HSL / Hex (proposto)
--primary	Navy institucional INESCC	#0B2A4A
--primary-foreground	Texto sobre primary	#FFFFFF
--accent	Azul vivo / interação	#1E6FD9
--secondary	Superfícies suaves	#EEF3F8
--muted	Fundos neutros	#F5F7FA
--muted-foreground	Texto secundário	#5B6B7B
--background	Fundo página	#FFFFFF
--foreground	Texto principal	#0E1A26
--border	Linhas/contornos	#DCE3EB
--energy	Acento "energia/sustentabilidade"	#2BA66B

Modo claro por defeito (institucional). Dark mode fora de âmbito v1.

Forma e elevação

• Border-radius: base 0.625rem (--radius), cartões rounded-xl, botões rounded-lg.
• Sombras: subtis (shadow-sm/shadow-md no hover). Sem neon/exageros.
• Contornos: cartões com border + fundo branco; hover eleva e intensifica accent.

Iconografia

• lucide-react, traço fino, tamanho 20–24px, cor muted-foreground/accent.

Animações (framer-motion)

• Entradas por scroll: fade + translateY(16px), duration 0.4–0.5s, ease-out, whileInView com viewport once.
• Hover de cartões: elevação + leve scale 1.01.
• Stagger discreto em grelhas (delay 0.05–0.08s). Sem parallax agressivo.
• Respeitar prefers-reduced-motion.

Responsividade

• Breakpoints Tailwind (sm/md/lg/xl). Grelhas: 1 col (mobile) → 2–3 (md/lg).
• Header colapsa em menu (sheet/drawer shadcn) < md.