Provale Telecom

Marca

Guideline visual

Site atual

Provale

Guideline visual

Tokens lidos do HTML e do CSS publicados em provale.com.br. O que o site não define está marcado como derivado. A copy de campanha entra depois e aparece aqui como [COPY].

02

Cores

AA vale para texto normal (4,5:1). AA grande vale a partir de 3:1, em texto de 24px ou 18,7px em negrito. O chip “Aa” usa o par indicado.

Marca

Primária

Extraído#FE0303

CTA principal, selo e preço em destaque. No CSS do site: .bg-primary / .text-primary.

--brand-primarybg-primary

  • Aa4,02:1 · AA grandeBranco sobre primária, como nos botões
  • Aa4,02:1 · AA grandePrimária sobre branco, como em rótulos text-sm

Secundária

Extraído#01E6F3

Hover do CTA, acento, scrollbar e bullet ativo. Texto ciano sobre navy.

--brand-secondarybg-secondary

  • Aa1,54:1 · FalhaBranco sobre ciano, como no hover do botão do site
  • Aa10,44:1 · AAANavy sobre ciano, texto adotado nos controles
  • Aa10,44:1 · AAACiano sobre navy, links e números de velocidade

Terciária

Extraído#121069

Nav, card de plano, footer e texto de título. Token .bg-third / .text-third.

--brand-thirdbg-third

  • Aa16,11:1 · AAABranco sobre terciária
  • Aa16,11:1 · AAATerciária sobre branco

Superfícies

Navy barra

Extraído#02004B

Barra superior (Central do assinante). Também cor de texto .text-[#02004B].

--brand-navy-barbg-brand-navy-bar

  • Aa19,02:1 · AAABranco sobre a barra

Navy banner

Extraído#020531

Fundo dos banners da home.

--brand-navy-bannerbg-brand-navy-banner

  • Aa19,65:1 · AAABranco sobre o banner

Navy chip

Extraído#080652

Chip de recurso na página de câmeras.

--brand-navy-chipbg-brand-navy-chip

  • Aa18,13:1 · AAABranco sobre o chip

Navy ProFibra

Extraído#0A1E3B

Fundo do banner em /internet.

--brand-navy-fiberbg-brand-navy-fiber

  • Aa16,64:1 · AAABranco sobre o banner

Navy empresarial

Extraído#001D3D

Fundo do banner em /internet-empresarial.

--brand-navy-businessbg-brand-navy-business

  • Aa16,89:1 · AAABranco sobre o banner

Navy telefonia

Extraído#0C153B

Fundo do banner em /telefoniafixa.

--brand-navy-phonebg-brand-navy-phone

  • Aa17,71:1 · AAABranco sobre o banner

Azul rótulo

Extraído#1E3A8A

text-blue-900, rótulos em negrito (cidade no seletor e selos).

--brand-blue-900text-blue-900

  • Aa10,36:1 · AAAAzul 900 sobre branco

Neutros

Corpo

Extraído#111827

Texto de depoimento (text-gray-900).

--brand-bodytext-gray-900

  • Aa17,74:1 · AAACorpo sobre branco

Texto apoio

Extraído#374151

Parágrafo do modal de WhatsApp.

--brand-gray-700text-gray-700

  • Aa10,31:1 · AAAApoio sobre branco

Muted

Extraído#6B7280

text-gray-500 em endereço e ação secundária do modal. Passa AA; por isso virou o muted.

--muted-foregroundtext-muted-foreground

  • Aa4,83:1 · AACinza 500 sobre branco

Cinza legenda

Extraído#BCBCBC

Subtítulo text-[#BCBCBC] na home. Contraste insuficiente sobre branco.

--brand-muted-legendtext-brand-muted-legend

  • Aa1,90:1 · FalhaLegenda sobre branco, como no site
  • Aa8,48:1 · AAAA mesma cor sobre navy

Placeholder

Extraído#71717A

placeholder:text-zinc-500 do seletor de cidade.

--brand-zinc-500text-zinc-500

  • Aa4,83:1 · AAPlaceholder sobre branco

Superfície

Extraído#F3F4F6

hover:bg-gray-100 do fechar do modal.

--brand-gray-100bg-gray-100

  • Aa14,64:1 · AAANavy sobre a superfície

Borda

Extraído#E4E4E7

border-zinc-200 do seletor. Em navy o site usa border-white/20.

--borderborder-zinc-200

  • Aa16,11:1 · AAATexto ao lado da borda

Anel de foco do site

Extraído#09090B

focus-visible:ring-zinc-950, anel de 2px com offset de 2px no seletor e no switch.

--brand-zinc-950ring-zinc-950

  • Aa19,90:1 · AAAAnel sobre branco

Estados e acentos

WhatsApp

Extraído#25D366

Fundo do botão “Fale pelo WhatsApp”. Hover extraído: #1EBE5D.

--brand-whatsappbg-brand-whatsapp

  • Aa1,98:1 · FalhaBranco sobre WhatsApp, como no site
  • Aa8,12:1 · AAANavy sobre WhatsApp, texto dos controles

WhatsApp hover

Extraído#1EBE5D

hover:bg-[#1ebe5d] do botão de WhatsApp.

--brand-whatsapp-hoverbg-brand-whatsapp-hover

  • Aa6,58:1 · AANavy sobre o hover

Verde campanha

Extraído#18B94F

CTA largo da página de câmeras. Hover extraído: #13A846.

--brand-campaignbg-brand-campaign

  • Aa2,60:1 · FalhaBranco sobre o verde, como no site
  • Aa6,21:1 · AANavy sobre o verde, texto dos controles

Verde campanha hover

Extraído#13A846

hover:bg-[#13a846] do CTA de câmeras.

--brand-campaign-hoverbg-brand-campaign-hover

  • Aa3,13:1 · AA grandeBranco sobre o hover, como no site
  • Aa5,15:1 · AANavy sobre o hover

Estrela

Extraído#EFCE4A

Preenchimento de /images/estrela.svg. Tamanho no site: h-4.

--brand-startext-brand-star

  • Aa1,54:1 · FalhaEstrela sobre branco

Erro

Derivado#9F1239

Não há cor de erro no site. Vermelho escuro, distinto da primária, para mensagem de formulário.

--destructivebg-destructive

  • Aa8,02:1 · AAABranco sobre o erro
  • Aa8,02:1 · AAAErro sobre branco

03

Tipografia

font-family: Rubik, Open Sans, sans-serif no body do site. Rubik entra como variável 300–900. Open Sans entra só nos pesos 400, 600 e 700, como fallback.

text-xs0.75rem / 1rem

Aa Provale

Barra superior, meta, endereço

text-sm0.875rem / 1.25rem

Aa Provale

Nav, CTA mobile, benefícios

text-base1rem / 1.5rem

Aa Provale

Corpo do modal e botão desktop

text-lg1.125rem / 1.75rem

Aa Provale

Nome do cliente, preço “+”

text-xl1.25rem / 1.75rem

Aa Provale

Subtítulo e nav em xl

text-2xl1.5rem / 2rem

Aa Provale

Título de bloco no contato

text-3xl1.875rem / 2.25rem

Aa Provale

Títulos de seção

text-4xl2.25rem / 2.5rem

Aa Provale

Título de apoio na home

text-5xl3rem / 1

Aa Provale

Preço no card de plano

text-6xl3.75rem / 1

Aa Provale

Palavra “mega”

text-8xl6rem / 1

Aa Provale

Número da velocidade

Rubik 500font-medium · Pílula da página de câmeras

Rubik 600font-semibold · Chips de recurso

Rubik 700font-bold · Peso dominante de título, nav e CTA

Rubik 800font-extrabold · Título do modal e da página de câmeras

Nav tracking-widestExtraído: 0.1em, uppercase, text-sm

Título tracking-tightExtraído do modal: font-extrabold e −0.025em

Open Sans é o segundo nome da pilha, não um estilo de título. Este parágrafo usa font-alt só para mostrar o fallback.

04

Espaço e raio

A escala é a do Tailwind 3, confirmada no CSS compilado. O container mais largo do site é max-w-[1584px]. Esta página usa max-w-6xl para leitura.

  • 1 · 0.25rem · 4px · gap-1 das estrelas

  • 2 · 0.5rem · 8px · py-2 do CTA mobile, p-2

  • 3 · 0.75rem · 12px · gap-3, py-3, px-3 do seletor

  • 4 · 1rem · 16px · p-4 do plano, gap-4, px-4, py-4

  • 5 · 1.25rem · 20px · gap-5 e p-5 do menu

  • 6 · 1.5rem · 24px · px-6, gap-6, p-6

  • 8 · 2rem · 32px · p-8 do depoimento, py-8, mt-8

  • 10 · 2.5rem · 40px · gap-10

  • 12 · 3rem · 48px · gap-12, py-12, px-12

  • 16 · 4rem · 64px · py-16

  • 20 · 5rem · 80px · px-20 e xl:px-20

Extraídorounded-full9999pxBotões, selos, switch e ícone da central
Extraídorounded-2xl1remCard de plano, depoimento e modal. Token --radius-2xl e --radius-lg.
Extraídorounded-xl0.75remMenu, chip, ícone de app e CTA de câmeras. Token --radius-xl.
Derivadorounded-md0.75remO site usa rounded-md, mas --radius não está definido no CSS publicado. Adotamos o raio de controle.

05

Sombras

sm
Extraídoshadow-sm--shadow-smSeletor e switch0 1px 2px 0 rgb(0 0 0 / 0.05)
lg
Extraídoshadow-lg--shadow-lgMenu, pílula e botão de WhatsApp0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
xl
Extraídoshadow-xl--shadow-xlDepoimento (com shadow-black/10) e hover do WhatsApp0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)
2xl
Extraídoshadow-2xl--shadow-2xlModal e card de câmeras0 25px 50px -12px rgb(0 0 0 / 0.25)
drop 2xl
Extraídodrop-shadow-2xl--drop-shadow-2xlImagem de produto na página de câmerasdrop-shadow(0 25px 25px rgb(0 0 0 / 0.15))

06

Botões

Forma extraída: pílula, negrito, py-3 px-6 ou px-12, cor em 300ms. O hover do primário vai para o ciano. O texto nesse hover passa a navy — no site ele continua branco.

Desktop

size lg · px-12 py-3

Mobile

size sm · px-6 py-2 text-sm

Foco visível

Espécime

2px e offset de 2px vêm do seletor (ring-2 ring-offset-2). O halo ciano é derivado, para o anel não sumir sobre o vermelho. Use Tab nos botões reais.

07

Campos

O site não tem input de texto. O seletor de cidade é h-9, rounded-md, shadow-sm, placeholder zinc-500. O raio aqui é o de controle, 0.75rem, e a altura mínima é 44px.

08

Badges

O selo do plano gamer é pílula, bg-primary, py-1 px-4, negrito, branco. O texto branco sobre o vermelho fica em AA grande.

[COPY] Selo[COPY] Wi-Fi[COPY] Status[COPY] Categoria

09

Cards

[COPY] Selo

000

[COPY]

[COPY] R$ 00,00

  • [COPY] Download
  • [COPY] Upload
  • [COPY] Wi-Fi
  • [COPY] Instalação

Extraído: w-80, rounded-2xl, bg-third, py-12, hover −4px

[COPY] Depoimento curto de um cliente da região.

[COPY] Nome

[COPY] Cidade/SP

[COPY] Categoria

[COPY] Título do post

[COPY] Resumo do artigo em duas linhas, com a promessa clara para quem lê no celular.

[COPY] Ler artigo

Derivado O card de post não existe no site atual. Raio, sombra e tipo são os extraídos.

11

CTAs

[COPY] Ver planos[COPY] WhatsApp

Planos aponta para /internet. WhatsApp usa o número publicado, 12 92004-7987. Consultar cobertura não aparece nas páginas lidas; o botão só mostra o contorno da marca.

12

Motion

Card com levantamento

Extraído: translateY(−0.25rem) em 300ms, curva cubic-bezier(0.4, 0, 0.2, 1). Só com mouse fino, para o toque não deixar o card preso no hover.

Derivado: scale(0.98) em 140ms, curva cubic-bezier(0.23, 1, 0.32, 1). A cor continua nos 300ms do site. Sem transition: all.

  • O modal do site entra com fade e scale 0.95 em 200ms, sobre black/60 e blur de 4px.
  • O menu mobile usa fade de 700ms. É longo para UI; os controles daqui ficam em 300ms ou menos.
  • Com prefers-reduced-motion, some o deslocamento e fica a troca de cor em 200ms.
  • O intro desta página entra uma vez, 8px e opacidade, 220ms. O resto não espera animação.

13

Extraído e derivado

Extraído

  • ExtraídoCores de marca: primária #FE0303, secundária #01E6F3, terciária #121069.
  • ExtraídoSuperfícies: #02004B, #020531, #080652, #0A1E3B, #001D3D, #0C153B, branco e preto.
  • ExtraídoNeutros usados: #111827, #374151, #6B7280, #BCBCBC, #71717A, #F3F4F6, #E4E4E7, #09090B, #1E3A8A.
  • ExtraídoWhatsApp #25D366 com hover #1EBE5D. Campanha #18B94F com hover #13A846. Estrela #EFCE4A.
  • ExtraídoFonte: Rubik (300–900) na frente da pilha; Open Sans 400/600/700 como fallback. Pesos no HTML: 500, 600, 700 e 800.
  • ExtraídoEscala text-xs até text-6xl e text-8xl, com line-heights do CSS compilado. tracking-widest (0.1em) e tracking-tight (−0.025em).
  • ExtraídoRaios que resolvem: 9999px (rounded-full), 1rem (rounded-2xl) e 0.75rem (rounded-xl).
  • ExtraídoSombras sm, lg, xl, 2xl e drop-shadow-2xl com os valores do CSS compilado.
  • ExtraídoBotão primário: rounded-full, font-bold, py-3, px-4 no card, px-6 no mobile, px-12 no desktop. Hover de fundo para a secundária em 300ms.
  • ExtraídoCard de plano: w-80, rounded-2xl, bg-third, p-4, py-12, hover −4px em 300ms. Depoimento: max-w 320px, border-2 border-third, p-8, shadow-xl.
  • ExtraídoSeletor: h-9, shadow-sm, placeholder zinc-500, anel de 2px zinc-950 com offset de 2px. Desabilitado em opacity 50%.
  • ExtraídoNav: uppercase, tracking-widest, text-sm, branco, hover ciano, duration-300. Modal: overlay black/60, blur 4px, painel rounded-2xl shadow-2xl, gradiente third → primary.
  • ExtraídoLogo PNG 226×56 (/images/Logo.png) e favicon 36×42 (/images/Favicon.png). Não há SVG.

Derivado

  • DerivadoTexto navy #121069 sobre ciano, WhatsApp e verde de campanha. O site usa branco, abaixo de AA.
  • DerivadoNo hover do botão primário o texto passa a navy, porque o fundo vira #01E6F3.
  • Derivado--radius 1rem vem do rounded-2xl. O CSS do site usa var(--radius) em rounded-lg, rounded-md e rounded-sm sem definir a variável.
  • Derivadorounded-md do sistema vale 0.75rem, o raio de rounded-xl. O rounded-md publicado não resolve.
  • DerivadoFoco dos controles: 2px e offset de 2px são do site; o par navy + halo ciano é para o anel aparecer sobre vermelho, ciano e navy.
  • DerivadoPressão scale(0.98) em 140ms, curva cubic-bezier(0.23, 1, 0.32, 1). O site não estiliza :active.
  • DerivadoO levantamento do card (−4px, 300ms) fica só em ponteiro fino. O site aplica hover:-translate-y-1 sem essa media query.
  • Derivadoprefers-reduced-motion tira deslocamento e mantém a troca de cor.
  • DerivadoA entrada do intro (opacidade e 8px, 220ms) não existe no site.
  • DerivadoErro #9F1239. O site não tem cor de erro, e a primária não passa AA em texto pequeno.
  • DerivadoTema .dark. O marketing não publica paleta escura. /guideline mantém os tokens claros.
  • DerivadoCampo com min-h-11 (44px). O seletor do site mede h-9 (36px).
  • DerivadoCTA de consultar cobertura. Essa ação não aparece no HTML inspecionado; o botão usa o contorno terciário.
  • DerivadoCard de post. Não há blog no site atual; a peça usa raio, sombra, tipo e cores extraídos.
  • Derivado::selection em navy com texto branco.
  • DerivadoO muted do sistema é #6B7280, que passa AA. #BCBCBC fica só documentado, porque falha sobre branco.
  • DerivadoA coluna desta página usa max-w-6xl. O site chega a max-w-[1584px].