Primary 500
--color-primary-500
- #1fa9bc
- rgb(31, 169, 188)
- CTA principal, links, destaques
Brandbook
Manual visual para páginas que vendem com clareza, sem ruido.
A proposta junta estrutura editorial limpa, ritmo modular e destaque teal para CTA e pontos de valor. O objetivo é parecer premium, prático e credível.
- 10+ blocos base para construir páginas
- 3 níveis de destaque visual (base, apoio, premium)
- 1 direção cromática consistente para todo o site
UI Cores
Cores do projeto
Primary
Base de marca para CTA, links e destaques de interface.
Primary 300
--color-primary-300
- #82deea
- rgb(130, 222, 234)
- Fundos suaves, estados hover leves
Primary 700
--color-primary-700
- #177f8d
- rgb(23, 127, 141)
- Hover do CTA, contraste em blocos
Neutros
Escala para tipografia, fundos e hierarquia editorial.
Dark 900
--color-dark-900
- #212121
- rgb(33, 33, 33)
- Títulos e fundos escuros
Neutro 800
--color-neutral-800
- #424242
- rgb(66, 66, 66)
- Texto forte secundário
Neutro 700
--color-neutral-700
- #5a5a5a
- rgb(90, 90, 90)
- Texto de apoio
Neutro 500
--color-neutral-500
- #717171
- rgb(113, 113, 113)
- Labels e legendas
Neutro 300
--color-neutral-300
- #a1a1a1
- rgb(161, 161, 161)
- Bordas e divisores
Neutro 200
--color-neutral-200
- #f0f4f7
- rgb(240, 244, 247)
- Surface principal do site
Neutro 100
--color-neutral-100
- #c8d7e2
- rgb(200, 215, 226)
- Tonalidade de fundo técnico
Background Gradients
Sistema de gradientes
Hero Aurora
--gradient-hero-aurora
Hero principal / CTA de autoridade / blocos de entrada
linear-gradient(135deg, #1fa9bc 0%, #177f8d 52%, #212121 100%)
Teal Band
--gradient-teal-band
Separadores de secção, headings decorativos, barras de progresso
linear-gradient(90deg, #82deea 0%, #1fa9bc 46%, #177f8d 100%)
Soft Canvas
--gradient-soft-canvas
Fundos de blocos longos e áreas com muito texto
linear-gradient(180deg, #ffffff 0%, #f0f4f7 100%)
Aqua Glass
--gradient-aqua-glass
Cards premium, highlights e overlays subtis
linear-gradient(150deg, rgba(130,222,234,.38) 0%, rgba(255,255,255,.92) 56%, rgba(31,169,188,.14) 100%)
Neutral Depth
--gradient-neutral-depth
Blocos de contraste em tons neutros (sem teal), secção premium e dark surfaces.
linear-gradient(165deg, #171717 0%, #212121 38%, #2f2f2f 68%, #424242 100%)
Deep Ocean
--gradient-deep-ocean
Secções de contraste, rodapé, banners de prova social
radial-gradient(circle at 14% 18%, rgba(130,222,234,.24), transparent 44%), linear-gradient(160deg, #212121 0%, #177f8d 55%, #0f5660 100%)
Footer Night
--gradient-footer-night
Rodapé e blocos institucionais com assinatura mais densa
linear-gradient(135deg, #0d1e2a 0%, #12394a 48%, #177f8d 100%)
Grid Background
.bg-grid-neutral
Fundo técnico/editorial com grelha subtil para brandbook, wireframes e secções de sistema.
background-image: linear-gradient(...), linear-gradient(...), linear-gradient(...)
Logos
Logos fundos claros e escuros
Logo Principal
Completo / Light
Uso padrão em header, brandbook, páginas institucionais e documentos com fundo claro.
https://jcol.planetadigital.pt/wp-content/uploads/2026/02/jcol-logo.svg
Logo Simple
Marca compacta / Light
Avatar de marca, favicon expandido, selo, cards compactos e zonas com pouco espaço.
https://jcol.planetadigital.pt/wp-content/uploads/2026/02/jcol-logo-simple.svg
Logo White
Completo / Dark
Rodapé, hero escuro, banners com gradiente denso e secções de contraste.
https://jcol.planetadigital.pt/wp-content/uploads/2026/02/jcol-logo-white.svg
Botoes
Componente de ações (CTA) para o site
Card de Blog
Componente editorial para artigos e listagens
VEP-VENCER
14 Dez 2026
5 Erros diários que separam vendedores médios dos Top-Performers
Vendedores top performers não têm meses melhores por sorte. Têm processos diários que garantem um ritmo consistente de execução, foco e melhoria....
Ler maisForm Inputs
Sistema de campos para formulários de lead e diagnóstico
Formulário principal
Agendar diagnóstico comercial
Exemplo de formulário para páginas de captação
Lead Capture
B2B
High Intent
Estados de Input
Preview de validacao e feedback
Estado ativo para orientar preenchimento.
Variante Dark
Para hero escuro ou secção premium
Tipografia
Sistema tipografico
Poppins
Fonte principal para interface, títulos funcionais e body copy.
Poppins Light
abcdefghijklmno pqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Poppins Regular
abcdefghijklmno pqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Poppins SemiBold
abcdefghijklmno pqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Poppins Bold
abcdefghijklmno pqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Sedan
Fonte editorial/acento para headings premium e frases de autoridade.
Sedan Regular
abcdefghijklmno pqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Prova Social
Estilo de testemunhos
"Confesso que no início da nossa relação comercial não era das pessoas que mais me atraíam ao negócio, mas hoje considero-o um dos meus fornecedores preferidos."
