Style Guide

Guia de referência visual com paleta de cores, tipografia, componentes e exemplos de conteúdo para manter a consistência do design.

Paleta de Cores

Sistema de cores baseado em #00DD7D (verde vibrante) sobre fundo escuro, criando contraste forte e visual moderno.

Primary
#00DD7D

Cor principal da marca - verde vibrante

Uso:

CTAs, links, destaques, ícones importantes

CSS Variable:

--primary
Background
#0A0A0B

Fundo principal - preto profundo

Uso:

Fundo de páginas e seções principais

CSS Variable:

--background
Card
#1A1A1A

Fundo de cards - cinza escuro

Uso:

Cards, modais, popovers, elementos elevados

CSS Variable:

--card
Border
#333333

Bordas e divisores

Uso:

Bordas de cards, separadores, inputs

CSS Variable:

--border
Foreground
#FFFFFF

Texto principal - branco

Uso:

Texto principal, títulos, conteúdo importante

CSS Variable:

--foreground
Muted Foreground
#6B7280

Texto secundário - cinza médio

Uso:

Texto secundário, descrições, labels

CSS Variable:

--muted-foreground

Tipografia

Duas famílias tipográficas: Inter para UI e JetBrains Mono para conteúdo técnico.

Inter - UI
Fonte principal para interface e conteúdo geral

Heading 1 (H1)

Conectividade que não falha

text-4xl font-bold

Heading 2 (H2)

Por que escolher a Rocket Network?

text-3xl font-bold

Heading 3 (H3)

Redundância Total

text-xl font-semibold

Body Text

IP Trânsito e Transporte com engenharia de rota e monitoramento 24x7. Rede protegida e resiliente.

text-base

Small Text

Texto secundário para descrições e informações complementares.

text-sm text-muted-foreground
JetBrains Mono - Técnico
Fonte monoespaçada para conteúdo técnico

ASN

AS65000

font-mono text-lg text-primary

BGP Community

65000:100

font-mono text-sm text-primary

Capacidades

1G • 10G • 40G • 100G

font-mono text-sm text-muted-foreground

Código de Configuração

ip community-list standard BLACKHOLE permit 65000:100
route-map PREPEND-1X permit 10
  match community PREPEND-1X
  set as-path prepend 65000
font-mono text-xs in pre tag

Componentes

Biblioteca de componentes reutilizáveis baseada em shadcn/ui.

Buttons
Variações de botões para diferentes contextos
Badges
Etiquetas para destacar informações
Default BadgeOutline BadgeSecondary BadgeDestructive BadgeSLA 99,99%
Cards
Containers para agrupar conteúdo relacionado
Card com Ícone

Exemplo de card com ícone e conteúdo.

Card Destacado

Card com borda colorida para destaque.

Card com Background

Card com fundo colorido sutil.

Form Elements
Inputs e elementos de formulário
Icons
Ícones do Lucide React
Network
Shield
Zap

Espaçamentos

Sistema de espaçamento consistente usando classes Tailwind.

Valores de Espaçamento
Classes Tailwind mais utilizadas no projeto
gap-4

Espaçamento padrão entre elementos

1rem (16px)
gap-6

Espaçamento médio entre cards

1.5rem (24px)
gap-8

Espaçamento grande entre seções

2rem (32px)
py-20

Padding vertical de seções

5rem (80px)
px-4

Padding horizontal do container

1rem (16px)
rounded-lg

Border radius padrão

0.5rem (8px)
rounded-2xl

Border radius de cards

1rem (16px)

Exemplos de Conteúdo

Textos e frases prontas para manter consistência na comunicação.

Headlines
Exemplos de textos para headlines
  • • Conectividade que não falha
  • • IP Trânsito e Transporte de Alto Desempenho
  • • Rede protegida e resiliente
  • • Por que escolher a Rocket Network?
CTAs
Exemplos de textos para ctas
  • • Falar com um especialista
  • • Solicitar proposta
  • • Iniciar processo de interconexão
  • • Consultar disponibilidade
Bullets - IP Trânsito
Exemplos de textos para bullets - ip trânsito
  • • BGP IPv4/IPv6
  • • Communities para controle de rotas
  • • Rotas otimizadas
  • • Uptime 99,99%
  • • Suporte a multihoming
Bullets - Transporte
Exemplos de textos para bullets - transporte
  • • Waves 10/100G
  • • EPL/EVPL
  • • Metro Ethernet
  • • Proteção óptica 1+1
  • • QoS configurável