# Vivo · Sistema de Design (nG Solutions)

Sistema de design da marca **Vivo** (Telefónica Brasil), organizado e estendido pela **nG Solutions** para a construção de ferramentas web, apps mobile e apresentações. Esta pasta contém os fundamentos de marca (cor, tipografia, Vivinho, ícones), tokens em CSS, componentes React reutilizáveis e UI kits de produtos.

> A identidade visual, marcas e ativos pertencem à Vivo / Grupo Telefónica. Arquivos oficiais de produção ficam no portal de marca: https://brandfactory.telefonica.com/

## Fontes deste sistema
- **`uploads/Vivo-Design-System_2.html`** — guia de identidade visual Vivo (pt-BR, "Sistema de Design Vivo", v1.0, base Abril/2020) preparado pela nG Solutions. Foi a única fonte fornecida; todos os tokens, regras de marca, paleta, tipografia, regras do Vivinho, ícones, botões e componentes derivam dele.
- **Portal de marca (referência, sem acesso aqui):** https://brandfactory.telefonica.com/ — origem dos logotipos vetoriais e versões oficiais do Vivinho (Shape e Ilustrada).

Não houve codebase, Figma ou deck adicional. As telas dos UI kits (Minha Vivo web / Meu Vivo mobile) e os slides de exemplo são **demonstrações montadas pela nG Solutions** sobre os componentes deste sistema — não são telas oficiais da Vivo.

---

## CONTENT FUNDAMENTALS — como escrevemos

**Idioma:** Português do Brasil (pt-BR), sempre.

**Tom:** otimista, caloroso, humano e próximo. A marca acredita que "a revolução tecnológica deve ser parte da vida de todas e todos, e não um privilégio de poucos". O lema interno é **"Digitalizar para aproximar"**.

**Pessoa:** fale com a pessoa, foco nela ("Acompanhe seu plano", "Você tem 2.480 pontos"). Use "você"/"sua". Convide à ação sem ser corporativo ou frio.

**Diversidade e inclusão:** "**Tem todxs na Vivo**" — represente a diversidade brasileira, gente de verdade, sem estereótipos nem conceitos pré-estabelecidos. O "x" inclusivo (todxs) é uma marca consciente da voz.

**Casing:**
- **Botões e títulos em sentença** — só a 1ª letra maiúscula: "Veja os planos", "Recarregue agora", "Pagar agora". **Nunca** botões inteiros em CAIXA ALTA.
- **Micro-rótulos** (labels de campo, eyebrows, categorias) em **CAIXA ALTA** com leve tracking (~0.05em): "ENDEREÇO", "AGENDA".

**Exemplos de copy real do guia:**
- Eyebrow: "GUIA DE IDENTIDADE VISUAL · ABRIL 2020"
- CTAs: "Cadastre-se", "Recarregue agora", "Veja os planos", "Confira", "Contrate"
- Feedback: "Tudo certo! Cadastro confirmado com sucesso." / "Atenção — Verifique os dados informados." / "Dica — Você pode retomar depois, o progresso é salvo."
- Marca: "Digitalizar para Aproximar", "Tem todxs na Vivo", "Conexões humanas".

**Emoji:** uso muito pontual e quente (ex.: "Olá, Maria 👋" numa saudação de produto). Não é um pilar da marca — prefira o Vivinho e a cor para dar calor. Evite emoji em contextos formais ou em apresentações executivas.

---

## VISUAL FOUNDATIONS — fundamentos visuais

**Cor — a marca é multicolorida, mas o púrpura manda.**
- **Púrpura `#660099` (Pantone 2603) está SEMPRE presente** e nunca é substituído, independente da mídia. Regra de ouro: **púrpura + apenas UMA cor secundária** por composição.
- Secundárias: Rosa `#eb3c7d`, Laranja `#ff9900`, Verde `#99cc33`, Azul `#0066cc`.
- Cores de **apoio** (versões mais escuras, para contraste e estados no digital): púrpura-apoio `#461e5f`, rosa-apoio `#cd1e5a` (erro/atenção), laranja-apoio `#fa6423` (alerta), verde-apoio `#32a04b` (sucesso), azul-apoio `#0055a0` (links/info).
- Cinzas com papéis fixos: `#000` texto de contraste, `#666` texto secundário, `#ccc`/`#ddd` divisórias e ícones, `#eee` desabilitado, `#f7f7f7` hover de listas, `#f9f9f9` fundo entre cards, `#fff` cards/página.

**Degradês — movimento e modernidade. Apenas UM degradê por peça.**
- Uma cor: do tom principal ao tom de apoio (ex.: `#660099 → #461e5f`).
- Duas cores: púrpura 30% + cor 70% (exceto verde) — `--grad-pr` (rosa), `--grad-pl` (laranja), `--grad-pa` (azul).
- Assinatura de marca: `--grad-marca` (`#8e2de2 → #660099 → #eb3c7d`), usada em heros e capas.

**Tipografia.**
- **Roboto** — fonte oficial Vivo no digital (sites, botões, apps). Pesos Light 300 / Regular 400 / Medium 500 / Bold 700. Tracking em zero; entrelinha ≥ corpo.
- **Roboto Slab** — display/títulos. É o **substituto web da ITC Officina Serif** (comercial, sem licença web) — ver Caveats. Títulos com leve tracking negativo (-0.02em) e line-height ~1.15.
- Escala: display 56 → H1 40 → H2 32 → H3 24 → corpo 16 → rótulo 12.

**Vivinho — o símbolo da marca.** Humaniza o serviço; sem gênero nem idade, representa diversidade e inclusão. Recebe qualquer cor da paleta ou degradê. Vertical ou inclinação de **no máximo ±22°**. Preserve o contorno, não humanize com acessórios, evite mais de um Vivinho por peça. Sempre a partir do arquivo oficial, sem alterar a proporção. (Versão Shape/sólida incluída em `assets/vivinho.svg`; versão Ilustrada fica no portal de marca.)

**Espaço & grade.** Grade base de **4px**. Escala: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 56 · 72.

**Raios de canto.** Botões **4px**; pequenos 8px; **cards 12px**; modais 16px; chips/cápsulas pill (999px). A marca fala de "cantos arredondados, tom caloroso" — o arredondamento é parte da proximidade.

**Elevação (sombras).** Sistema de sombra externa, suave e fria: `sm 0 1px 2px`, `md 0 2px 8px`, `lg 0 8px 24px`, `xl 0 16px 40px` (todas em preto translúcido 6–14%). Sombra de marca `--sh-purpura` (`0 12px 32px rgba(102,0,153,.28)`) para realces púrpura. Sem sombras internas/neumorfismo.

**Cards.** Fundo branco, cantos 12px, sombra `md`, sem borda. Podem ter uma faixa de mídia no topo (cor sólida ou degradê). Hover de cards/itens: elevação leve e/ou fundo `#f7f7f7`.

**Botões.** Flat, cantos 4px, texto Roboto centralizado, 1ª letra maiúscula, **sem ícones nem ilustrações**. Altura mínima ~44px. Estados: **hover/press escurece a cor de apoio em 40% de preto** (`filter: brightness`); **desabilitado clareia em 40% de branco**. Variante de contorno (outline) com borda de 2px.

**Foco.** Borda púrpura + halo `0 0 0 3px rgba(102,0,153,.14)` em campos.

**Movimento.** Transições curtas e funcionais com easing `cubic-bezier(.4,0,.2,1)` (~.15–.25s). Sem bounce exagerado; respeita `prefers-reduced-motion`. Hover de Vivinho decorativo pode usar leve `translateY`/`scale`.

**Fundos & textura.** Predominam **superfícies chapadas** (branco `#fff`, fundo `#f9f9f9`) e **degradês de marca** em heros/capas. Sem texturas, ruído ou padrões repetidos. O Vivinho aparece como ornamento translúcido (~16% de opacidade) em cantos de heros. Imagens, quando houver, devem ser de gente real, calorosas e otimistas (sem b&w nem grão).

**Transparência & blur.** Usada com parcimônia: chips/eyebrows sobre degradê usam `rgba(255,255,255,.12–.22)` com borda clara; overlays do Vivinho em baixa opacidade. Blur não é um motivo recorrente.

**Layout.** Sidebar fixa púrpura-apoio (`#461e5f`) em produtos web; conteúdo em coluna central (~980–1080px). Topbar com busca em cápsula. Mobile com navegação inferior e header em degradê.

**O que evitar:** gradientes azul-arroxeados genéricos fora da paleta; cards com cantos arredondados e só borda colorida à esquerda; excesso de cores numa mesma peça; botões em caixa alta; frieza ou linguagem distante; mais de um Vivinho por peça.

---

## ICONOGRAPHY — ícones

**Estilo da marca:** traços simples, **terminações redondas** (round caps/joins), encaixados numa retícula de módulos 20×20px. Dois pesos no guia: Light (1 módulo, para >60px) e Regular (2 módulos, para >140px). Permitidos em qualquer cor da paleta ou degradê.

**Implementação neste sistema:** o guia original desenha ícones como **SVG de linha inline** (sem icon-font nem sprite). Para web/marketing com controle de pixel, a nG recomenda um set de linha consistente de mesma espessura e terminações redondas — **Lucide** é o casamento mais próximo (stroke ~1.6–2, round caps).

**Neste repositório:** os UI kits usam um pequeno set inline próprio em `ui_kits/web/Icons.jsx` (`window.VIcon`) desenhado no estilo Vivo (round caps, stroke ~1.7) — home, fatura, plano, pontos, suporte, sino, busca, wifi, telefone, TV, etc. **Substituição sinalizada:** caso o projeto precise de um set completo, adote **Lucide** (CDN `https://unpkg.com/lucide@latest`) mantendo a mesma espessura e cor da paleta — combina visualmente com o set inline.

**Emoji como ícone:** não. Use o set de linha ou o Vivinho. (Emoji só em copy calorosa pontual — ver Content Fundamentals.)

**Unicode como ícone:** evite, exceto setas/chevrons simples já cobertos pelo set.

---

## ÍNDICE — manifesto da pasta

**Raiz**
- `styles.css` — **entrada global** (apenas `@import`). Importe só este arquivo.
- `readme.md` — este guia.
- `SKILL.md` — wrapper de Agent Skill (uso no Claude Code).

**`tokens/`** (todos `@import`ados por `styles.css`)
- `fonts.css` — `@font-face` Roboto + Roboto Slab (auto-hospedados em `assets/fonts/`).
- `colors.css` — paleta + aliases semânticos.
- `gradients.css` — degradês de marca, uma cor e duas cores.
- `typography.css` — famílias, pesos, escala, entrelinha, tracking.
- `spacing.css` — espaçamento, raios, sombras, movimento.
- `base.css` — reset leve + defaults de marca.

**`assets/`**
- `logo-purpura.png`, `logo-branco-roxo.png` — logotipos Vivo (cor / branco).
- `vivinho.svg` — símbolo Vivinho (versão Shape, púrpura).
- `fonts/` — woff2 (Roboto 300/400/500/700, Roboto Slab 400/500/700).

**`components/`** (React; importe via `window.VivoNGDesignSystem_b36d4c`)
- `buttons/` — **Button** (solid/outline, cores, tamanhos, disabled).
- `forms/` — **Input** (rótulo, foco, erro), **Switch**.
- `feedback/` — **Alert** (success/error/info/warning), **Badge** (pill).
- `surfaces/` — **Card**, **List** / **ListItem**, **Avatar**.
- `brand/` — **Vivinho** (recolorível, inclinação ≤ ±22°).

**`ui_kits/`**
- `web/` — **Minha Vivo** (autoatendimento web): login, início, faturas, plano, Vivo Valoriza, suporte.
- `mobile/` — **Meu Vivo** (app mobile): home, consumo, Valoriza, conta.

**`guidelines/`** — specimen cards das fundações (Cores, Type, Spacing, Brand) exibidos na aba Design System.

**`slides/`** — 6 slides de exemplo (1280×720) para apresentações: capa, divisor, agenda, grande número, comparativo, encerramento.

---

## CAVEATS (ler antes de usar em produção)
1. **Tipografia de display é uma substituição.** O guia Vivo usa **ITC Officina Serif** (comercial, sem licença web); aqui usamos **Roboto Slab** como substituto, conforme o próprio guia. Para produção licenciada, troque a `--font-display` pela Officina oficial. A **Vivo Regular** (proprietária) é restrita a nomes de produto/logo — não usada em UI.
2. **Logos e Vivinho** foram extraídos do guia (PNG / SVG Shape). Para produção, baixe os **vetores oficiais** no portal de marca e **não reconstrua** o logotipo nem altere proporções.
3. **Ícones** são um set inline de aproximação no estilo Vivo; para um set completo, adote **Lucide** (sinalizado acima).
4. **UI kits e slides** são demonstrações montadas pela nG Solutions, não telas/peças oficiais da Vivo.
