Design System
Laboratório Óptico Industrial

A referência oficial de identidade visual Vixlens. Cores, tipografia, tokens e voz — tudo que define como a marca aparece em qualquer ponto de contato, do site aos documentos internos.

01 — Fundamentos

Cores

A paleta Vixlens é intencionalmente restrita. Quatro cores primárias, usadas com rigor. Preto lidera — é a cor de maior presença no site e na comunicação. Amarelo e Azul são de impacto. Branco é estrutural.

Paleta primária
Preto
HEX #1D1D1F
RGB 29 · 29 · 31
CMYK C6 M6 Y0 K88
Texto, botões, nav. Cor dominante da identidade.
Amarelo
HEX #FAC617
RGB 250 · 198 · 23
CMYK C0 M21 Y91 K2
Destaque, CTAs, faixas de impacto. Texto: #1D1D1F.
Azul
HEX #0439D9
RGB 4 · 57 · 217
CMYK C98 M74 Y0 K15
Badges, callouts, headers de documentos. Texto: #FFFFFF.
Branco
HEX #FFFFFF
RGB 255 · 255 · 255
CMYK C0 M0 Y0 K0
Fundo de página, texto sobre escuro, fundos de card.
Paleta neutra — extraída do Figma Vixlens 3.0
BG Cinza
HEX #F5F5F7
RGB 245 · 245 · 247
CMYK C0 M0 Y0 K3
Fundo de cards, seções de conteúdo e containers. Nunca como cor dominante de página.
Cinza
HEX #606F7F
RGB 96 · 111 · 127
CMYK C25 M13 Y0 K50
Bordas de input, texto placeholder, elementos secundários de UI.
Paleta secundária — Linha Reflecta

Cores de produto exclusivas da linha Reflecta. Cada cor representa o residual de cor do respectivo tratamento antirreflexo — a tonalidade percebida em reflexo na lente quando exposta à luz. Usadas apenas nos materiais e interfaces da linha Reflecta — não intercambiáveis com a paleta primária Vixlens.

BlueProtect SH
HEX #134B97
RGB 19 · 75 · 151
Residual azul do tratamento BlueProtect SH — a tonalidade refletida pela lente com esse AR. Usado em header e badge do produto. Identifica visualmente a proteção contra luz azul.
Reflecta Guard
HEX #00782D
RGB 0 · 120 · 45
Residual verde do tratamento Reflecta Guard — tonalidade característica do AR de média performance. Usado em header e badge do produto. Verde escuro comunica equilíbrio e durabilidade.
Reflecta Express
HEX #92BB36
RGB 146 · 187 · 54
Residual verde-limão do tratamento Reflecta Express — tonalidade mais vibrante do AR de entrada. Usado em header e badge do produto. Texto sempre em Preto #1D1D1F.
Badges no site →
Reflecta BlueProtect SH
Reflecta Guard
Reflecta Express
Combinações aprovadas
Preto / Branco
Botões · Nav
Seções hero
Amarelo / Preto
Faixas de destaque
Labels
Azul / Branco
Docs · Badges
Headers
Branco / Preto
Corpo de texto
Fundo padrão
Cores de suporte — callouts (documentos)
⚡ Destaque
Use para informações comerciais, promoções e pontos de atenção positivos.
Fundo #FFFBEB · Barra #FCD341
ℹ Informativo
Use para dados técnicos, instruções de uso e contexto necessário.
Fundo #EFEFFF · Barra #615FFF
⚠ Crítico
Use para alertas obrigatórios, erros e informações que exigem ação imediata.
Fundo #FFF0F0 · Barra #FF6566
✓ Sucesso
Use para confirmações, aprovações e resultados positivos de processo.
Fundo #EDFBF4 · Barra #30D389

* Cores alinhadas ao sistema de dashboard Vixlens: Destaque #FCD341 · Informativo #615FFF · Crítico #FF6566 · Sucesso #30D389. Sistema de feedback unificado entre documentos e plataformas digitais.

Regras de uso
✓
Amarelo exige texto Preto (#1D1D1F) — nunca Branco ou Azul sobre Amarelo.
✓
#F5F5F7 (BG Cinza) e os fundos de callout (#FFFBEB · #EFEFFF · #FFF0F0 · #EDFBF4) são permitidos como fundos de card ou callout — nunca como cor dominante de página.
✗
Não substituir #1D1D1F por #000000 puro nos digitais. O Preto Vixlens é #1D1D1F.
✗
Não adicionar cores fora desta paleta. As únicas exceções são as três cores de produto da linha Reflecta (#134B97 · #00782D · #92BB36) — cada uma representa o residual visual do respectivo tratamento AR. Restritas exclusivamente aos materiais dessa linha.
✗
Não combinar Azul e Preto como fundos simultâneos no mesmo documento — dilui o impacto de ambos.
02 — Fundamentos

Tipografia

Duas famílias, dois contextos. Host Grotesk para tudo digital — site, plataformas, materiais em tela. Mont para documentos impressos — propostas, manuais, apresentações em PDF.

Web · Digital
Host Grotesk
Site · Plataformas · UI
Disponível via Google Fonts.
Pesos: 300 · 400 · 500 · 600 · 700 · 800
Pesos web disponíveis
Regular Aa Bb Cc 400
SemiBold Aa Bb Cc 600
Bold Aa Bb Cc 700
ExtraBold Aa Bb Cc 800
Print · Documentos
Mont
Propostas · Manuais · PDFs
Licença comercial requerida.
Substituta web: Montserrat (Google Fonts).
Thin Aa Bb Cc 100
Light Aa Bb Cc 300
Regular Aa Bb Cc 400
SemiBold Aa Bb Cc 600
Bold Aa Bb Cc 700
ExtraBold Aa Bb Cc 800
Heavy ★ Aa Bb Cc 900
Escala tipográfica — Host Grotesk (versão final)
Pesos por grupo: Display (700) · Section (600/500) · Body (400) · UI (500/400)  ·   Valores em Mobile = responsivos (valores alterados em relação ao desktop)
Token Exemplo ao vivo Peso Desktop Mobile Line-height Tracking
Display
H1
Vixlens
 700 96px 48px 100% −1px
H2
Freevix
 700 64px 36px 100% −0.5px
H3
Sua ótica cresce.
 700 48px 28px 100% −0.3px
Section
H4
Lentes avançadas
 600 32px 24px 100% 0
H5
Suporte especializado
 600 24px 20px 120% → 29px 0
H6
Vantagens exclusivas
 500 20px 18px 100% 0
Body
Body
Portfólio completo, precisão na produção e soluções pensadas para aumentar o valor percebido.
 400 18px 16px 150% 0
Body bold
A Matriz Marca Própria espelha o portfólio campeão Vixlens.
 600 18px 16px 150% 0
UI
Label ✦
Freevix Reflecta
500 14px 14px 130% +0.1px
Caption
© 2025 Vixlens. CNPJ 24.441.884/0001-88
 400 12px 12px 150% +0.2px
Overline ✦
LABORATÓRIO ÓPTICO
 500 11px 11px 120% +1px
Escala print — Mont (propostas, manuais, documentos)
Nível Exemplo ao vivo Especificação
Display / Logo
Heavy · 900 48pt CAIXA ALTA
Palavra-marca na capa de documentos
VIXLENS
H1 documento
Bold · 700 20pt
Seções principais
Matriz Marca Própria
H2 documento
SemiBold · 600 15pt
Subseções
Como funciona o espelho da tabela
Corpo
Regular · 400 11pt lh: 1.4
Parágrafos, listas, FAQ
Material, índice e desenho da lente espelhados automaticamente da Matriz, eliminando erro de cadastro.
Caption
Light · 300 9pt
Rodapé, legendas
Vixlens Laboratório Óptico · Vila Velha, ES · Mai/2026
Regras de uso
✓ Permitido
  • Host Grotesk para todos os contextos digitais (site, UI, plataformas)
  • Mont/Montserrat para documentos e materiais impressos
  • Heavy/900 (Mont) exclusivo para logo e display em documentos
  • Caixa alta apenas em logo, tagline e labels de callout
  • Frases curtas. Voz ativa. Pontuação intencional.
✗ Proibido
  • Itálico em qualquer elemento — não faz parte da identidade
  • Thin/100 ou ExtraLight/200 em corpo de texto impresso
  • Caixa alta em parágrafos corridos
  • Mais de dois pesos num mesmo bloco de texto
  • Sublinhado como ênfase (somente em links quando necessário)
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0 1 2 3 4 5 6 7 8 9
Host Grotesk Bold · 34px · Branco e Amarelo sobre Preto
03 — Fundamentos

Tokens de forma

Border radius extraídos diretamente do Figma Vixlens 3.0. Cada valor tem um papel específico — não usar livremente entre contextos.

Card Large
57px
Cards de conteúdo, seções em destaque
CTA →
Button
30px
Todos os botões (pill)
Input
12px
Campos de formulário
LABEL
Chip / Badge
6px
Tags, badges, chips de categoria
04 — Componentes

Botões

Dois tipos: Primário (ação principal da página) e Secundário (ação alternativa). Border-radius sempre 30px — pill. Fonte Host Grotesk Bold 18px. Nunca usar mais de um Primário por seção.

Primário & Secundário
Primário
Background#1D1D1F
Texto#F5F5F7
Border-radius30px
Padding14px 32px
FonteHost Grotesk Bold 18px
Secundário
BackgroundTransparente
Texto#1D1D1F
Border2px solid #1D1D1F
Padding12px 30px
FonteHost Grotesk Bold 18px
Variação sobre fundo escuro
Primário sobre escuro
Background #FAC617 · Texto #1D1D1F
Secundário sobre escuro
Background transparente · Border + Texto #FFFFFF
Estados
Primário — Preto
Default
#1D1D1F
texto #FFF
Hover
#333333
+ shadow
Focus
ring #FAC617
3px offset 3px
Disabled
#E5E7EB
texto #9CA3AF
Primário — Amarelo
Default
#FAC617
texto #1D1D1F
Hover
#E5A800
+ shadow
Focus
ring #1D1D1F
3px offset 3px
Disabled
#E5E7EB
texto #9CA3AF
Estados — Botão Secundário

Hover do outline preenche com a cor da borda (fill-in) — padrão consolidado em Material Design, Primer e Carbon. Cria feedback visual claro sem introduzir nova cor.

Secundário — fundo claro
Default
transp.
border #1D1D1F
Hover
fill #1D1D1F
+ shadow
Focus
ring #FAC617
3px offset 3px
Disabled
border #E5E7EB
texto #9CA3AF
Secundário — fundo escuro
Default
transp.
border #FFF
Hover
fill #FFF
texto #1D1D1F
Focus
ring #FAC617
3px offset 3px
Disabled
rgba(255,255,255
.20 / .25)
Tamanhos
SM · 14px · 10/22px
MD · 18px · 14/32px
LG · 20px · 18/40px
Regras de uso
✓
Máximo de um Primário por seção. Múltiplos CTAs primários numa mesma área diluem o foco.
✓
Sobre fundos escuros: Primário usa Amarelo (#FAC617) com texto Preto. Secundário usa borda e texto Branco.
✓
Hover do Primário: sempre BG Amarelo (#FAC617) com texto Preto (#1D1D1F) — consistente com a identidade.
✗
Não usar Azul (#0439D9) como cor de botão no site — Azul é reservado para documentos e badges internos.
✗
Não usar border-radius menor que 30px em botões. O pill é parte da identidade visual do site.
✗
Não alterar o peso da fonte. Labels de botão são sempre Host Grotesk Bold (700).
05 — Voz

Voz & Tom

Institucional, mas direto. Anti-corporativo-vazio. Cada frase serve um propósito. Nenhuma palavra desperdiçada. A Vixlens tem cinco vozes — cada uma com contexto de uso definido.

As 5 referências de voz
V1 Autoridade técnica Roosevelt (Hub Rio) · Luciano mentor (Vix Academy)
Quando usar
Conteúdo educacional, comparativos técnicos, qualidade
Tom
Preciso, referenciado, sem arrogância
✓ Certo
"Material, índice e desenho da lente espelhados automaticamente. Sem renegociação, sem aditivo."
✗ Errado
"Somos referência em qualidade no setor óptico."
V2 Consultoria de balcão Fabrício Amorim · Guilherme · Carlos Coan
Quando usar
Dicas práticas, visita a cliente, conversas do dia a dia
Tom
Próximo, direto, útil imediatamente
✓ Certo
"Sua marca própria continua cadastrada normalmente. O que muda é o caminho até ela."
✗ Errado
"Estamos comprometidos em oferecer a melhor experiência ao cliente."
V3 Bastidor industrial Luciano coord. produção · Diego Freitas
Quando usar
Processo fabril, escala, estrutura operacional
Tom
Concreto, números em faixa, bastidor real
✓ Certo
"Centenas de jobs por dia, cada um rastreado. Quando a escala dobrar, o processo já está pronto."
✗ Errado
"Nossa fábrica opera com excelência em todos os processos."
V4 Cliente falando Fabrício · Guilherme — com autorização prévia
Quando usar
Cases, depoimentos, Vix na Estrada
Tom
Cliente é protagonista. Vixlens é ferramenta, não herói.
✓ Certo
"Reduzi erro de cadastro na minha ótica depois que mudei pro fluxo Matriz."
✗ Errado
"A Vixlens transformou o negócio do cliente."
V5 Visão estratégica Otávio (pontual) · Diego Freitas
Quando usar
Missões internacionais, parcerias-âncora, decisões estruturais
Tom
Dono que pensa em escala, sem floreio, sem motivacional
✓ Certo
"Toda nova tecnologia incorporada ao portfólio campeão Vixlens entra automaticamente na sua tabela de marca própria."
✗ Errado
"Acreditamos no futuro da óptica brasileira e seguimos inovando."
Nunca usar
✗ Travessão (—) em qualquer copy, briefing, hook ou CTA
✗ "importância de", "no mundo atual", "cada vez mais"
✗ "acredite em você", "o segredo é", "mindset de sucesso"
✗ "solução completa", "excelência em", "comprometidos com"
✗ Crescimento em % — "crescemos X% ao ano"
✗ Comparação direta com concorrentes (Orgalent, Hoya, Zeiss)
✗ "Essilor" isolado — sempre EssilorLuxottica
✗ Valores exatos: faturamento, margem, EBITDA, jobs/dia, CAPEX
✗ Qualquer referência a M&A, exit, venda, valuation, aquisição futura
Sempre usar
✓ Frases curtas. Comando claro.
✓ Faixas em vez de números exatos: "centenas de jobs", "perto de mil"
✓ Voz ativa
✓ Dados quando disponíveis — nunca inventar
✓ Termos canônicos conforme Vocabulário Canônico
Checklist antes de publicar
Frases-âncora — calibração de tom
01 "1 lente Matriz = 1 lente Vixlens equivalente. Material, índice e desenho da lente espelhados automaticamente."
02 "Toda nova tecnologia incorporada ao portfólio campeão Vixlens fica disponível na sua tabela no mesmo momento em que entra na tabela Vixlens."
03 "Sem atualização de cadastro, sem renegociação. O estado da arte chega por padrão."
04 "Material, índice e desenho da lente espelhados automaticamente da Matriz, eliminando erro de cadastro."
05 "O tratamento permanece sendo selecionado pelo cliente, sem interferência do sistema."
06 — Voz

Vocabulário Canônico

Termos que devem aparecer sempre com esta grafia exata. Nunca abreviar, nunca parafrasear. Qualquer desvio cria inconsistência de marca e confunde o cliente.

Termos obrigatórios
Termo canônico Nunca usar
Matriz Marca Própria "matriz", "MP", "produto marca própria"
espelho da tabela Vixlens "cópia da tabela", "equivalente à tabela"
material, índice e desenho da lente "especificações técnicas", "dados da lente"
1 lente Matriz = 1 lente Vixlens equivalente Usar exatamente assim como slogan/síntese
portfólio campeão Vixlens "catálogo Vixlens", "linha Vixlens"
EssilorLuxottica "Essilor", "Luxottica", "o grupo"
Vix na Prática "eventos práticos", "treinamentos"
Vix na Estrada "visitas comerciais", "ida ao cliente"
Vix Academy "academia", "escola Vixlens"
Vix Innovation "evento de inovação"
Hub Rio "filial RJ", "escritório Rio"
Freevix "freevix", "FREEVIX" — manter capitalização exata
Astera "astera" — manter A maiúsculo
Portfólio de produtos — nomes canônicos
Linha Freevix 10 SKUs
Produto Categoria Diferencial
Freevix ONE Multifocal Entrada de linha
Freevix PREMIUM Multifocal
Freevix FREEDOM Multifocal Liberdade de armações
Freevix IA TECH Multifocal Tecnologia IA
Freevix VS Visão simples Uso constante de telas
Freevix VS HD Visão simples Campo de visão até 30% mais amplo
Freevix VS RELAX Visão simples Até 80% de redução na fadiga ocular
Freevix OFFICE ATÉ 4M Ocupacional Visão intermediária ampla (até 4m)
Freevix DESKVIEW ATÉ 2M Ocupacional Conforto em perto e médias distâncias (até 2m)
Freevix DESKVIEW ATÉ 1,3M Ocupacional Foco em trabalho de perto (até 1,3m)
Outros produtos
Astera
Lente para controle de miopia infantil
VIX Total
Produto âncora da linha
Tecnologia Vix Slim
Lentes até 30% mais finas e leves para altas dioptrias
Linha Reflecta — AR
Reflecta BlueProtect SH
Premium Shield · 24 camadas · Ion
24 meses
Reflecta Guard
Premium Shield · 18 camadas · Ion
12 meses
Reflecta Express
Standard Shield · 10 camadas
3 meses
Regras de nomenclatura
✓
Nomes de produto sempre em caixa alta conforme padrão: "Freevix IA TECH", não "freevix ia tech".
✓
"Freevix" com F maiúsculo + resto conforme produto. "Astera" com A maiúsculo apenas. "Reflecta" com R maiúsculo apenas.
✗
Nunca abreviar na primeira menção: "FIA TECH" ou "VS HD" sem o "Freevix" à frente.
✗
Nunca escrever "freevix", "FREEVIX" ou "astera" — a capitalização é parte do nome oficial.
Contato oficial Vixlens
Site: www.vixlens.com.br
Telefone: 27 3061-2626
Instagram: @vixlens
07 — Componentes

Inputs

Campos de texto extraídos diretamente do formulário de cadastro de parceiros no Figma Vixlens 3.0. Borda sutil, raio contido, placeholder no tom Cinza.

Input texto — padrão
Nome da Ótica
Nome completo
CNPJ
contato@suaotica.com.br
Padrão / Preenchido
Altura56px
Padding14px 20px
Border-radius12px
Border (default)1px solid #606F7F
Border (focus)1px solid #1D1D1F
Fonte placeholderHost Grotesk Regular 18px #606F7F
E-mail
Default border #606F7F · placeholder #606F7F
contato@
Focus border 2px #1D1D1F · ring rgba(29,29,31,.08)
contato@suaotica.com.br
Filled border #1D1D1F · texto #1D1D1F
Campo desabilitado
Disabled bg #F9FAFB · border #E5E7EB · texto #D1D5DB
Formulário completo — exato do Figma
Seja uma ótica
parceira da Vixlens
Preencha o formulário e nosso time entra em contato.
Nome da Ótica
Nome completo
CNPJ
E-mail
Telefone
Ser parceiro →
Regras de uso
✓
Inputs sempre com border-radius 12px — nunca quadrado, nunca pill (30px é exclusivo de botões).
✓
Placeholder na cor Cinza (#606F7F). Texto preenchido em Preto (#1D1D1F).
✓
Largura máxima de 400px para inputs em formulários centralizados. Em layouts full-width, pode-se usar 100%.
✗
Não usar fundo colorido em inputs. Background sempre #FFFFFF.
✗
Não reduzir a altura abaixo de 56px — área de toque mínima para acessibilidade.
08 — Componentes

Cards

Três tipos de card, todos com border-radius 57px — token exclusivo da Vixlens. Extraídos diretamente das seções EssilorLuxottica, VixClub e Vantagens do Figma 3.0.

Padrão base — anatomia do card

Um único template de container para todos os tipos de card. As variações existem no conteúdo interno — nunca na estrutura do frame.

380 × 280px
CTA →
680px
430px
Card container
Width
430px
Height
680px
Padding
24px 20px
Gap
20px
Border-radius
57px
Background
#FFFFFF
Flex direction
column
Align items
center
Imagem principal
Width
380px
Height
280px
Card Feature — branco sobre BG Cinza
Lentes avançadas
Free-Form, tratamentos premium e linha completa para todos os perfis.
→
Suporte especializado
Treinamentos técnicos, apoio comercial e consultoria personalizada.
→
Logística eficiente
Entrega rápida, operação estruturada e atendimento ágil.
→
Background
#FFFFFF sobre #F5F5F7
Border-radius
57–59px
Título
H5 Bold 24px · lh 24px · center
Corpo
Regular 18px · lh 1.5 · center
Padding
20px
Ação
Chevron → no canto inferior direito
Card Conteúdo — texto + imagem (57px radius)
Sua ótica cresce.
Seus benefícios acompanham.
O VixClub transforma volume em vantagem comercial. À medida que sua ótica evolui, você acumula benefícios que fortalecem margem e previsibilidade.
Entender o VixClub →
📷
Imagem ocupa 100%
do card
Border-radius
57px
Padding (texto)
60px vertical · 83px lateral
Título
H3 Bold 48px · lh 1
Grid
2 colunas · gap 40px
Card Lista — vantagens (texto estruturado)
Vantagens exclusivas da parceria
Uma parceria pensada para acompanhar o crescimento da sua ótica no longo prazo.
Atendimento humano e próximo
Suporte real, rápido e acessível.
Produção precisa e confiável
Tecnologia avançada para máxima consistência.
Flexibilidade comercial
Planos inteligentes para diferentes perfis de óticas.
📷
Imagem ocupa
100% do card
Card Produto — carrossel de linha (Freevix)

Usado no carrossel de produtos Freevix. Estrutura fixa: badge de categoria, imagem de produto, título, tagline e descrição. Background #F5F5F7 no container, cards internos brancos.

Multifocal
📷
Imagem produto
Vix Total
Conforto
sem esforço.
Multifocal clássica e estável, com transições naturais em todas as distâncias.
Multifocal
📷
Imagem produto
Freevix One
Alta performance
em cada detalhe.
Multifocal avançada com personalização digital e campos amplos.
Ocupacional
📷
Imagem produto
Freevix Deskview
Foco absoluto
no curto alcance.
Design ergonômico para leitura, telas e tarefas de precisão.
←
→
Tamanho
430px × 680px
Radius
57px (card) · 57px (img) · 30px (badge)
Badge
Bold 16px · BG #1D1D1F · Branco
Carrossel
Nav com chevrons pretos · gap 30px
Card Hero — linha de produto (foto + overlay)

Usado na seção "Tudo que sua ótica precisa". Foto em full bleed, overlay escuro ou colorido, ícone com frosted glass 58×58px e CTA em texto simples com seta.

Freevix
Lentes próprias com tecnologia digital para diferentes perfis
Saiba →
AR Reflecta
Mais valor percebido, mais confiança e menos retrabalho
Conhecer →
Essilor
Tecnologias líderes integradas à operação Vixlens
Ver soluções →
Vix Academy
Conteúdo e treinamentos para elevar o nível da sua equipe
Acessar →
Tamanho
315×400px · radius 59px
Ícone badge
58×58px · radius 14px · frosted glass
Overlay
rgba(0,0,0,0.2–0.3) ou cor de produto
Título
Bold 24px · lh 24px · Branco
CTA
ExtraBold 18px · Branco · sem botão
Padding
40px H · 60px V · gap interno 21px
Regras de uso
✓
Border-radius 57px em todos os cards — é a assinatura visual do site Vixlens. Não reduzir.
✓
Cards Feature sempre brancos sobre fundo #F5F5F7. Cards Conteúdo: #F5F5F7 ou imagem plena. Cards Produto: brancos em container #F5F5F7. Cards Hero: foto com overlay escuro, texto sempre branco.
✓
Badge de categoria sempre em #1D1D1F com texto branco, radius 30px. Posicionado no topo ou na base do card conforme a variante.
✓
Grid de cards: 2 colunas com gap 40px no desktop. Carrossel de produto: gap 30px com nav arrows.
✗
Não usar border visível nos cards — o contraste de cor (branco/cinza) já delimita o componente.
✗
Não misturar border-radius menor no mesmo layout — todos os cards de uma seção devem usar o mesmo token (57px).
09 — Componentes

Callouts

Componentes de destaque em documentos e comunicações internas. Quatro tipos — Destaque (Amarelo), Informativo (Roxo), Crítico (Coral) e Sucesso (Verde) — com barra lateral 4px e label em caixa alta. Cores alinhadas ao sistema de dashboard Vixlens.

Os três tipos
Destaque
Toda nova tecnologia incorporada ao portfólio campeão Vixlens fica disponível na sua tabela no mesmo momento em que entra na tabela Vixlens.
Informativo
Material, índice e desenho da lente são espelhados automaticamente da Matriz Marca Própria. Tratamentos são selecionados pelo cliente separadamente.
⚠ Crítico
Nunca usar "Essilor" isolado. A referência correta é sempre EssilorLuxottica. Qualquer variação fora do padrão deve ser corrigida antes da publicação.
✓ Sucesso
Pedido aprovado e liberado para produção. Prazo de entrega confirmado para 2 dias úteis.
Especificações
Tipo Fundo Barra lateral Label Texto
Destaque #FFFBEB 4px #FCD341 SemiBold 9pt · caixa alta · #92730A Regular 11pt · #1D1D1F · lh 1.6
Informativo #EFEFFF 4px #615FFF SemiBold 9pt · caixa alta · #615FFF Regular 11pt · #1D1D1F · lh 1.6
Crítico #FFF0F0 4px #FF6566 SemiBold 9pt · caixa alta · #E03535 Regular 11pt · #1D1D1F · lh 1.6
Sucesso #EDFBF4 4px #30D389 SemiBold 9pt · caixa alta · #1A9960 Regular 11pt · #1D1D1F · lh 1.6
Caixa "EM UMA FRASE" — elemento de capa de documentos
EM UMA FRASE
1 lente Matriz = 1 lente Vixlens equivalente. Material, índice e desenho da lente espelhados automaticamente.
Uso exclusivo em capas de documentos. Fundo Preto (#1D1D1F) · Label Amarelo Mont SemiBold 9pt · Texto Branco Mont Regular 12pt.
Regras de uso
✓
Label sempre em caixa alta, SemiBold, na cor da barra lateral. Nunca omitir o label — ele identifica o tipo do callout.
✓
Callouts de destaque (Amarelo #FCD341) para informações positivas ou comerciais. Informativo (Roxo #615FFF) para dados técnicos e instrucionais. Crítico (Coral #FF6566) para alertas obrigatórios. Sucesso (Verde #30D389) para confirmações e aprovações.
✗
Nunca usar dois callouts do mesmo tipo consecutivamente — use um único callout com mais conteúdo se necessário.
✗
Não usar callouts em contexto web/digital — são componentes de documentos. No site, usar cards com BG #F5F5F7.
10 — Fundamentos

Iconografia

Dois sistemas de ícones convivem no ecossistema Vixlens: os ícones de linha de produto (SVG customizados do Figma, exclusivos para Cards Hero) e os ícones de UI da biblioteca Phosphor Icons — usados em interfaces, documentos e comunicações.

Badge de ícone — anatomia
Badge padrão
58 × 58px
radius 14px · frosted glass
Tamanho 58 × 58 px
Border-radius 14 px
Background rgba(255,255,255, 0.28)
Border 1px rgba(255,255,255, 0.46)
Backdrop-filter blur(8px)
Ícone interno ~30px · branco · SVG
Contexto de uso Cards Hero apenas
Ícones de linha — os 4 produtos estratégicos
Fundo escuro — contexto hero card
Fundo claro — uso standalone
Freevix
Lentes próprias — linha principal
icon-freevix.svg
AR Reflecta
Tratamentos antirreflexo
icon-reflecta.svg
Essilor
Tecnologias EssilorLuxottica
icon-essilor.svg
Vix Academy
Treinamento e conteúdo
icon-vixacademy.svg
Regras de uso
✓
Ícones sempre brancos (#FFFFFF), aplicados sobre o badge frosted glass — nunca em cores diferentes.
✓
Badge frosted glass exclusivo para Cards Hero com fundo fotográfico. Não usar em cards brancos ou fundo claro — perde o efeito de profundidade.
✓
Cada ícone é fixo à sua linha de produto. Não trocar ou reusar ícones entre linhas.
✗
Não usar esses ícones fora dos Cards Hero — eles são o identificador visual da linha no contexto de navegação de produto.
✗
Não escalar o badge acima de 58×58px. Para contextos maiores, redesenhar o ícone no tamanho correto — não upscalar.
!
Atenção: Os SVGs originais estão no Figma (node 4003:799). Exportar como SVG sem rasterizar. As URLs de asset Figma expiram em 7 dias — exportar e hospedar os arquivos SVG no repositório do site.
Ícones de UI — Phosphor Icons

Biblioteca padrão para todos os ícones de interface — botões, navegação, status, formulários e comunicações. Open-source, 1.200+ ícones em 6 pesos, disponível via CDN ou npm.
phosphoricons.com ↗

Pesos disponíveis
Thin
ph-thin
Light
ph-light
Regular ★
ph
Bold
ph-bold
Fill
ph-fill
Duotone
ph-duotone
Tamanhos padrão
16px
inline · labels
20px
botões · nav
24px ★
padrão UI
32px
destaque · vazio
48px
hero · ilustrativo
Ícones frequentes — universo Vixlens
eye
sun
shield-check
star
sparkle
factory
package
truck
check-circle
warning
info
clock
x-circle
chart-line-up
receipt
user
Implementação
CDN (HTML)
<script src="https://unpkg.com/@phosphor-icons/web@2.1.1/src/index.js"></script>

<!-- Regular -->
<i class="ph ph-eye"></i>

<!-- Bold -->
<i class="ph-bold ph-eye"></i>

<!-- Fill -->
<i class="ph-fill ph-eye"></i>

<!-- Tamanho via CSS -->
<i class="ph ph-eye" style="font-size:24px"></i>
React / npm
npm install @phosphor-icons/react

import { Eye, ShieldCheck, Star }
  from "@phosphor-icons/react";

<Eye size=24 />
<Eye size=24 weight="bold" />
<Eye size=24 weight="fill" />
<Eye size=24 color="#FAC617" />
Regras de uso — Phosphor Icons
✓
Peso padrão: Regular para UI geral. Bold para ícones dentro de botões ou junto a texto pequeno. Fill para estado ativo/selecionado.
✓
Tamanho padrão: 24px para ícones de UI. 20px em botões compactos. 16px inline com texto. 32–48px para estados vazios ou ilustrativos.
✓
Ícones de status usam as cores do sistema de dashboard: check-circle → #30D389 · warning → #FF6566 · info → #615FFF · clock → #FCD341.
✓
Em contexto escuro (#1D1D1F), ícones em branco (#FFFFFF) ou cor de destaque (#FAC617). Em contexto claro, ícones em Preto (#1D1D1F) ou #606F7F.
✗
Não misturar pesos diferentes na mesma tela. Escolher um peso e manter consistência por contexto/componente.
✗
Phosphor Icons são para UI — não substituem os ícones de linha de produto (Freevix, Reflecta, Essilor, Vix Academy), que são SVG customizados do Figma.
11 — Fundamentos

Espaçamento

Sistema derivado dos valores extraídos do Figma Vixlens 3.0. Base 8px com escala multiplicada. Usado consistentemente em gaps entre elementos, padding de componentes e margens de seção.

Escala de tokens
space-1
4px
Micro — gap interno de ícone, separador
space-2
8px
XS — gap ícone + texto, itens de lista
space-3
12px
SM — padding badge, gap form elements
space-4
16px
MD-SM — gap entre seções pequenas, caption
space-5
20px
MD — padding card, gap interno de componentes
space-6
24px
MD-LG — gap de seção interna, card padding vertical
space-7
30px
LG — gap entre cards em carrossel, button padding
space-8
40px
XL — gap seção, card padding horizontal ← TOKEN ÂNCORA
space-9
48px
2XL — margem entre subsections, section header margin
space-10
60px
3XL — card padding vertical (hero cards)
space-11
64px
4XL — padding lateral de sections principais
space-12
80px
5XL — padding vertical de seções de página
Aplicação em componentes
Botões
Padding: 14px 32px
Height: 48–56px
Gap ícone: 8px
Inputs
Height: 56px
Padding: 14px 20px
Gap entre fields: 14px
Cards (conteúdo)
Padding: 60px 83px
Gap interno: 30px
Grid gap: 40px
Sections de página
Padding lateral: 64px
Padding vertical: 72–80px
Max width: 1422px
Hero cards (linha)
Padding: 40px H · 60px V
Gap interno: 21px
Gap entre cards: 30px
Navbar / Header
Padding lateral: 8.33% + 9px
Gap itens nav: 20px
Height: ~60px
✓
40px é o token âncora — gap entre cards, padding horizontal de seções. Sempre que em dúvida sobre espaçamento de componentes, 40px é o ponto de partida.
✓
Gaps internos de componentes usam a sub-escala (8, 12, 20, 24px). Margens externas entre componentes usam a escala maior (40, 60, 80px).
✗
Não inventar valores intermediários como 35px ou 45px. Usar sempre os tokens definidos.
12 — Marca

Logotipo & Clearance

Três versões oficiais do logotipo Vixlens. O logotipo nunca deve ser recolorido, distorcido ou recriado. Use sempre os arquivos SVG originais.

Versões oficiais
Principal
Branco + Amarelo
Uso em fundos escuros — versão preferencial
Fundo
Preto #1D1D1F · Fotos escuras · Azul #0439D9
Arquivo
Camada_1.svg
Secundária
Branco monocromático
Para fundos coloridos onde o amarelo conflita
Fundo
Cinza escuro · Azul · Qualquer fundo médio
Arquivo
Camada_1-1.svg
Terciária
Preto monocromático
Uso em fundos claros — documentos, impressão
Fundo
Branco #FFFFFF · Cinza #F5F5F7 · Papel
Arquivo
Camada_1-2.svg
Quaternária
Preto + Amarelo
Fundo claro com identidade completa de marca
Fundo
Branco #FFFFFF · Cinza #F5F5F7
Arquivo
Camada_1-2.svg + fill #FAC617
Regras de uso
✓
Sempre usar o arquivo SVG original. Nunca recriar o logotipo manualmente ou em texto.
✓
Versão Branco + Amarelo é a preferencial. Use monocromático apenas quando o contexto não permitir duas cores.
✓
Versão Preta apenas em fundos claros (#FFFFFF, #F5F5F7) ou impressão sem cor.
✗
Não alterar proporções, cores ou opacidade do logotipo. Não aplicar sombras, contornos ou efeitos.
✗
Não usar sobre fundos que gerem baixo contraste. O mínimo de contraste é 4.5:1 (WCAG AA).
13 — Marca

Fotografia

A fotografia Vixlens mostra pessoas reais usando óculos em contextos cotidianos. Tom natural, luz ambiente, rostos com expressão genuína. O produto aparece como parte da vida — não como objeto de catálogo. Lentes com mínimo de reflexo: transparência é sinal de qualidade de tratamento.

Direção de cena
Retrato próximo
Enquadramento busto a rosto. Foco nos olhos — lente visível e transparente. Luz suave lateral ou difusa. Expressão natural, não posada.
Lente transparente, olhos visíveis
Fundo neutro ou desfocado
Reflexo opaco bloqueando os olhos
Lifestyle / ambiente
Pessoa em contexto real — trabalho, leitura, rua. Óculos integrado ao momento, não protagonista. Luz natural preferencial.
Contexto legível e coerente
Pele com textura natural
Plástico/AI — pele lisa demais
Detalhe de produto
Close na armação ou na lente — detalhe de material, acabamento ou tratamento AR. Fundo clean, profundidade de campo rasa.
Foco nítido no detalhe relevante
Reflexo AR visível e controlado
Fundo carregado ou sem foco
Galeria — fotos aprovadas
Retrato — mulher com óculos, luz natural
Retrato
Luz natural · lente transparente · expressão genuína
Retrato — homem com óculos, fundo neutro
Retrato
Armação destacada · olhos visíveis · sem reflexo
Lifestyle — pessoa com óculos em ambiente
Lifestyle
Contexto real · luz ambiente · natural
Retrato feminino com óculos
Retrato
Pele natural · textura real · sem filtro excessivo
Lifestyle — óculos em uso cotidiano
Lifestyle
Produto integrado ao momento · não protagonista
Detalhe — armação e lente
Detalhe
Close armação · acabamento · tratamento visível
Comparativo de tratamento AR

O reflexo residual do AR é uma qualidade técnica — não um defeito visual. A diferença entre lente sem tratamento e com Reflecta é imediatamente visível. Use este comparativo em materiais de venda e treinamento.

Comparativo: sem AR vs Reflecta
✗ Sem AR
Reflexo opaco · olhos encobertos
✓ Reflecta AR
Residual mínimo · olhos visíveis
Diferença visual do tratamento AR
✗ Sem tratamento AR
Reflexo difuso · luz espalhada · olhos visualmente bloqueados · lente parece opaca
✓ Reflecta AR
Reflexo residual mínimo · lente transparente · olhos legíveis · imagem clara e premium
Banco de imagens — seleção completa
Frame 32
Frame 32-1
Frame 32-2
Frame 32-4
Frame 48095592
O que evitar
Evitar: reflexo opaco total
Reflexo cobre toda a lente
Lente completamente tomada por reflexo. Os olhos ficam invisíveis — o tratamento AR parece não existir. Passa mensagem oposta ao produto.
Evitar: estética AI/plástica
Pele plástica, luz artificial
Imagens geradas por IA ou com filtros excessivos. Pele sem poros, iluminação perfeita demais, poses que não parecem reais. Destoa da proposta de autenticidade.
Evitar: produto sem pessoa
Armação isolada no fundo branco
Foto de produto estilo e-commerce — armação flutuando em fundo branco sem contexto humano. Reservado para fichas técnicas, nunca para comunicação de marca.
Evitar: fundo carregado
Ambiente desfoca a leitura
Fundo com muito movimento, cores fortes ou elementos que competem com o rosto. A atenção deve ir para os olhos e a lente — não para o cenário.
Especificações técnicas
Resolução mínima
2000 × 3000 px
300 dpi para impressão · 72 dpi para digital
Formato de entrega
JPG · PNG · TIFF
TIFF sem compressão para arquivos master
Proporções comuns
3:4 · 1:1 · 16:9
3:4 para retratos · 16:9 para hero banners
Tom de cor
Neutro / Quente
Sem filtro frio ou azulado. Temperaturas 5.000–6.500K
Iluminação
Natural / Difusa
Evitar luz direta no rosto. Softbox ou janela larga
Reflexo AR máx.
< 20% da lente
Residual visível é aceitável — opaco total é rejeitado
Regras de uso
✓
Pessoas reais, expressões naturais. Luz ambiente ou difusa. Óculos integrado ao rosto — não centralizado artificialmente.
✓
Lente transparente é o padrão visual de qualidade Vixlens. Priorizar ângulos e condições de luz que minimizem reflexo opaco.
✓
Residual de AR (reflexo suave e colorido) é aceitável e tecnicamente correto — comunica que a lente tem tratamento. Opaco e difuso, não.
✓
Diversidade de perfil, faixa etária e contexto de uso. O portfólio fotográfico deve representar o espectro real de clientes Vixlens.
✗
Não usar imagens geradas por IA como material de marca. Pele, olhos e armação com tratamento excessivo são descartados automaticamente.
✗
Não usar fotos de stock sem curadoria. Toda imagem no banco Vixlens deve ter sido aprovada pelo responsável de marca.
✗
Não aplicar filtros de cor globais na imagem — edições são permitidas apenas em exposição, contraste e balanço de branco.