# Assets de marca — Sparta Tecnologia

Logos e ícones extraídos do PDF **"Identidade Visual — Sparta Tecnologia [Studio Pedro Primão]"**
em **PNG** (alta resolução) e **SVG** (vetorizados por tracing), para uso imediato na aplicação.

> ⚠️ **Origem raster.** O PDF é 100% imagem (cada página é um PNG de 4501×4501px), **sem nenhum vetor
> dentro**. Os PNGs foram recortados das imagens; os **SVGs em `logo-svg/` foram gerados por tracing
> (potrace)** dos PNGs. Como as marcas são geométricas e de cor chapada, o traço ficou fiel e escalável.
>
> Ressalvas do SVG traçado: (1) o wordmark virou **contorno**, não fonte editável; (2) podem haver
> micro-imperfeições de borda. Os **arquivos vetoriais oficiais (AI/EPS/SVG)** prometidos para a entrega
> seguinte (~semana de 08/06/2026) continuam sendo a fonte canônica — ao chegarem, conferir/substituir.

## Paleta oficial

| Cor | HEX | RGB | Uso |
|-----|-----|-----|-----|
| **Azul orbital** | `#00303E` | `0, 48, 62` | Primária / texto / ícone |
| **Areia computacional** | `#DAD1C8` | `218, 209, 200` | Fundo neutro |
| **Névoa digital** | `#93A8AD` | `147, 168, 173` | Apoio |
| **Branco singular** | `#FFFFFF` | `255, 255, 255` | Fundo / versão negativa |

> Obs.: os HEX impressos no PDF estão todos como `#19322F` (bug de template do manual). Os valores
> acima foram amostrados dos pixels reais das amostras de cor (p14). Veja `paleta.png`.

## Estrutura

```
assets/
├── logo-svg/                ← VETORES (tracing) — escaláveis, ideais p/ web
├── logo-png-transparente/   ← PNG fundo transparente
├── logo-png/                ← PNG com o fundo original do manual (areia/teal/branco)
├── paginas-fonte/           ← páginas-fonte em 4501px (referência)
├── paleta.png               ← amostra das 4 cores
└── _panorama.png            ← visão geral de todos os assets
```

## logo-svg/ (vetores — recomendado p/ web)

Mesmos 13 nomes da pasta `logo-png-transparente/`, em SVG. Multicor (ícone, selo, lockup teal) têm
camadas de cor separadas; os de cor única são um path só. Escaláveis sem perda.

### Spinner / loading (animação SVG nativa — SMIL, sem JS)

Animação do símbolo "S" para usar como loading. Cada bloco do "S" pulsa (fade + scale) num pulso
que viaja na ordem do traço, + respiração sutil do conjunto. Mesma técnica dos loaders do Vault.

| Arquivo | Uso |
|---------|-----|
| `spinner-S-teal.svg` | "S" solto, teal — fundo claro |
| `spinner-S-branco.svg` | "S" solto, branco — fundo escuro |
| `spinner-S-box-teal.svg` | "S" dentro de quadrado teal (estilo app icon) — fundo claro |
| `spinner-S-box-branco.svg` | "S" dentro de quadrado branco — fundo escuro |
| `spinner-S-draw-{teal,branco}.svg` | "S" se desenha (stroke) e preenche — estilo construção |
| `spinner-S-assemble-{teal,branco}.svg` | os 6 blocos deslizam pra formar o "S" |
| `loadingbar-top-{teal,branco}.svg` | barra fina indeterminada p/ topo de página (`preserveAspectRatio=none`, estica na largura) |

Veja `spinner-demo.html`, `draw-demo.html` (foco no Draw-on, com exemplos de card e botão) e
`extras-demo.html` (panorama geral) — abrir no navegador.

Uso (React / qualquer HTML) — animação roda sozinha, é só dimensionar:
```jsx
<img src="/assets/spinner-S-teal.svg" width={48} height={48} alt="Carregando" />
```
> Acessibilidade: respeitar `prefers-reduced-motion` no app (ex.: trocar por um frame estático).

### Lockup animado (entrada + pulse)

Animações do logo completo (`lockup-horizontal`), também SMIL nativo.

| Arquivo | Uso |
|---------|-----|
| `lockup-intro-teal.svg` / `-branco.svg` | **Entrada** — o ícone "nasce" (pop) e o wordmark é revelado num wipe da esquerda → direita. Toca **uma vez** ao carregar. Ideal p/ splash / topo de página. |
| `lockup-pulse-teal.svg` / `-branco.svg` | **Pulse** — respiração contínua e sutil. Bom p/ estados idle / destaque discreto. |
| `lockup-sheen-teal.svg` / `-branco.svg` | **Sheen** — glint diagonal varre o logo periodicamente (premium, idle/hover). |
| `lockup-intro-rise-teal.svg` / `-branco.svg` | **Intro rise** — sobe + fade (entrada SaaS), alternativa ao wipe. Toca uma vez. |
| `lockup-intro-blocks-teal.svg` / `-branco.svg` | **Intro por blocos** — o ícone se monta bloco a bloco e o wordmark sobe. Toca uma vez. |
| `lockup-loading-teal.svg` / `-branco.svg` | **Loading com a marca** — wordmark estático + o "S" do ícone fazendo a onda (loop). |

Demos: `lockup-anim-demo.html` e `extras-demo.html` (com botão *replay* p/ rever as intros).

### Extras

| Arquivo | Uso |
|---------|-----|
| `og-card.svg` / `og-card.png` (1200×630) | Card social / Open Graph (use o **PNG** em `<meta og:image>` — redes não leem SVG). |
| `logo-svg/bg-gradient.svg` | Fundo animado sutil (gradiente "respirando") p/ hero / seções. `preserveAspectRatio` slice. |

```jsx
<img src="/assets/logo-svg/lockup-intro-teal.svg" alt="Sparta Tecnologia" />
```
> A intro usa `fill="freeze"` (termina e congela no logo final). Para repetir, recarregue o `src`.

## logo-png-transparente/ (recomendado p/ app)

Cada marca vem em **teal `#00303E`** (para fundo claro) e **branco** (para fundo escuro).

| Arquivo | O que é |
|---------|---------|
| `lockup-horizontal-teal.png` / `-branco.png` | **Logo principal**: ícone + "SparTa ™". O `-branco` é a versão negativa (quadrado branco com o "S" vazado), igual à oficial sobre fundo escuro. |
| `wordmark-sparta-teal.png` / `-branco.png` | Só o texto "SparTa ™" (sem "tecnologia"). |
| `wordmark-tecnologia-teal.png` / `-branco.png` | Assinatura completa "SparTa TECNOLOGIA". |
| `icone-app-teal.png` / `-branco.png` | Ícone de app (quadrado arredondado). Bom p/ favicon, avatar, app icon. |
| `icone-S-teal.png` / `-branco.png` | Só o símbolo "S", sem o quadrado. |
| `selo-circular.png` | Selo: "S" dentro de círculo teal. |
| `selo-texto-teal.png` / `-branco.png` | Selo de texto circular "SPARTA TECNOLOGIA". |

## logo-png/ (fundo original do manual)

`lockup-horizontal.png` · `icone-app-claro.png` (S branco no quadrado teal) ·
`icone-app-escuro.png` (S em gradiente no quadrado branco) · `wordmark-tecnologia-areia.png` ·
`selo-circular.png` · `selo-texto.png`

## Páginas-fonte usadas

| Página | Conteúdo |
|--------|----------|
| p33 | Lockup principal (ícone + SparTa) — fonte dos lockups e do "SparTa" isolado |
| p25 | Wordmark "SparTa TECNOLOGIA", selo circular e selo de texto |
| p22 | Ícone de app claro (S branco sobre teal) — fonte do "S" isolado |
| p30 | Ícone de app invertido (S em gradiente) |
| p19 / p20 | Referências do lockup branco e construção |

## Pendências (aguardando vetor oficial)

- Substituir tudo por SVG quando os vetores chegarem.
- A fonte do wordmark é custom (note o "T" com barra estendida e o "r" cortado) — não dá para
  recriar fiel sem o arquivo original.
