Design System
Fundação

Cores do Sistema

Paleta de cores estruturada em superfícies, acentos, texto e estruturais.

--color-page
#0A0A0A
--color-section-alt
#141414
--color-card
#1A1A1A
--color-accent
#FFCC00
--color-accent-hover
#FFD633
--color-accent-alt
#C8FF3D
--color-text-primary
#FFFFFF
--color-text-muted
#A0A0A0
--color-text-faint
#5F5F5F
--color-border
#2A2A2A
Semântica de cores: Use aliases semânticas (--accent, --bg-page, --text-primary) nas suas implementações, nunca os nomes brutos (--color-yellow, --color-black).
Fundação

Tipografia Escalas

Dois tipos: Barlow Condensed para headings e labels; Inter para corpo.

Barlow Condensed

Display Large --fs-display-lg
Display Med --fs-display-md
Heading 3 --fs-3xl

Inter

Body text — 16px --fs-lg
Body medium — 15px --fs-md
Body small — 13px --fs-sm

Letter Spacing

tracking-tight
The Quick Brown Fox
-0.02em
tracking-normal
The Quick Brown Fox
0
tracking-wide
The Quick Brown Fox
0.1em
tracking-wider
The Quick Brown Fox
0.15em
tracking-widest
The Quick Brown Fox
0.2em

Line Height

leading-tight (1)
The quick brown fox jumps over the lazy dog. Typography establishes hierarchy and readability in the design system.
leading-snug (1.2)
The quick brown fox jumps over the lazy dog. Typography establishes hierarchy and readability in the design system.
leading-normal (1.5)
The quick brown fox jumps over the lazy dog. Typography establishes hierarchy and readability in the design system.
leading-relaxed (1.6)
The quick brown fox jumps over the lazy dog. Typography establishes hierarchy and readability in the design system.
Fundação

Escala de Espaçamento

17 tokens de espaçamento, 4px base unit.

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
20px
--space-6
24px
--space-8
32px
--space-10
40px
--space-12
48px
--space-16
64px
--space-20
80px
--space-24
100px
--space-30
120px
Componentes

Botões

Duas variantes: primária (preenchida) e outline (secundária).

Regra: Máximo 1 botão preenchido por viewport. Usar .btn para CTA primária, .btn--outline para secundária.
Componentes

Badges Status

Indicadores de estado: ok (verde) e warning (amarelo).

Meta atingidaAtenção requerida
Componentes

Cards Variantes

Padrão

Card Base

Contêiner reutilizável com borda e padding padrão.

Interativo

Card Hover

Lifta -4px e borda fica amarela ao passar o mouse.

Destaque

Card Recomendado

Borda amarela superior indica primária.

Investimento mensal
R$ 4.800/mês
Sem taxa de setup
Componentes

Listas Customizadas

Check List

  • Gestão de tráfego pago
  • Otimização de landing page
  • Análise de conversão
  • Relatório mensal

Exclude List

  • Gestão de redes sociais
  • Criação de conteúdo
  • Produção de vídeo
  • Design gráfico
Componentes

Callouts

Atenção

Callout com borda amarela — para informações críticas.

Callout com borda verde — para informações secundárias.

Layout

Grid System

Três variantes de grid auto-fit com minmax responsivo.

--xs: 280px min

1
2
3
4

--sm: 300px min

1
2
3

--md: 320px min

1
2
3
Layout

Fundos de Seção

Três variantes de fundo para ritmo visual.

Default
#0A0A0A
section--alt
#141414
section--accent
#FFCC00
Padrões

Diagnóstico Grid

Métrica 1
87
Taxa de conversão (%)
Métrica 2
4.2
Custo por lead
Métrica 3
€12.5k
ROI mensal
Métrica 4
3.2
Ok
Padrões

Timeline

01
Semana 1

Fase 1

Atividades e deliverables desta etapa do projeto.

02
Semana 2

Fase 2

Atividades e deliverables desta etapa do projeto.

03
Semana 3

Fase 3

Atividades e deliverables desta etapa do projeto.

Padrões

Âncora de Preço

Investimento
Cenário base
Estratégia completa incluindo setup.
  • Gestão de campanha
    R$ 2.000
    mês
  • Otimização landing
    R$ 1.500
    único
  • Relatório customizado
    R$ 500
    mês
Subtotal
R$ 4.000
Taxa setup
+ R$ 800
Desconto volume
- R$ 300
Padrões

CLT Card

Cenário alternativo
Contratação em regime CLT com benefícios.
  • Salário mensal
    R$ 8.500
  • Vale refeição
    R$ 400
  • Custo total mês
    R$ 10.500
  • Vigência
    12 meses
Riscos: Custo fixo mensal, demissão requer aviso prévio, menos flexibilidade operacional.
Padrões

Data Table

CanalImpressõesCliquesConversõesCTR
Google Ads125.4803.2402872.58%
Facebook Ads89.2001.8501422.08%
LinkedIn Ads45.600920982.02%
Total260.2806.0105272.31%
Efeitos

Transições Timing

Três velocidades: fast (0.2s), base (0.3s), slow (0.8s).

Fast (0.2s)
Base (0.3s)
Slow (0.8s)
Hover sobre os blocos para ver a animação. Use transições para criar feedback visual sem parecer artificial.