|
|
# 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`.
|