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