DESIGN SYSTEM

Componentes reutilizáveis.

Catálogo vivo dos padrões de seção, tipografia, cor e componentes. Use essa página como referência quando pedir algo novo — aponte pro nome da classe que quer reaproveitar.

Tokens de cor

Paleta oficial.

Sempre use os tokens (via Tailwind, ex. bg-brand-ink) ou as CSS vars. Nunca hex literal.

--color-brand-ink

#0a0a0a

preto editorial — texto, headers escuros

--color-brand-ink-2

#1a1a1a

variante levemente mais clara

--color-brand-ink-3

#2a2a2a

hover em dark

--color-brand-paper

#f2f4f6

cinza frio — background padrão

--color-brand-paper-2

#e6e9ec

cinza frio mais profundo — seções alternadas

--color-brand-paper-3

#ffffff

branco — cards dentro de paper

--color-brand-rebel

#f71963

rosa VTEX (Rebel Pink) — único rosa da paleta

--color-brand-muted

#6b6b6b

cinza — texto auxiliar, legendas

--color-brand-green

#006b3c

verde reservado — sucesso/valid

Tipografia

Escala editorial.

Fraunces para títulos, Inter para corpo, JetBrains Mono pra números/labels. Tamanhos fluidos com clamp().

.display-xl

Display XL — hero principal.

.display-lg

Display LG — seção grande.

.display-md

Display MD — subtítulo forte.

.display-sm

Display SM — título de card.

.lead

Lead — parágrafo de abertura com corpo maior. Cor mais suave, max-width confortável pra leitura.

texto padrão

Parágrafo corrido em Inter, 17px, line-height 1.55. É o default do body pra blocos de texto longos.

em / .italic

Itálico Fraunces com SOFT alto — usar pra ênfase editorial em títulos.

Botões

Variantes.

Todas começam com .btn. Adicione uma variante (-primary, -dark, -ghost) e opcional -large.

.btn.btn-primary

CTA principal — rosa. Usar no closer / conversão final.

Agendar demo Agendar conversa de 30 min →

.btn.btn-dark

CTA secundário — preto. Padrão em hero e seções claras.

Ver plataforma Quero ver como funciona

.btn.btn-ghost

Outline — pra CTA terciário.

Ver mais cases

.btn-link

Link tipo "ler mais", com sublinhado e seta animada.

Ver resultados reais →

Eyebrow & accent

Detalhes editoriais.

Pequenos recursos que assinam a identidade "rebelde estratégica".

.eyebrow

Traço + texto mono pequeno. Abre toda seção.

Nossa proposta

.accent (dentro de heading)

Destaca palavra no título — italic + sublinhado em curva rosa. Cor do texto permanece preta. Use com moderação.

CNPJs não batem metas. Pessoas sim.

Announce bar

.announce

Barra preta no topo da página com aviso breve + link rosa.

"85% das campanhas ainda rodam em Excel." Saiba como →

Hero principal

.hero · .hero-backdrop · .hero-sub · .hero-trust

Hero da home. Tem um backdrop italic gigantesco no fundo, título enorme e CTA duplo.

Exemplo

Título do hero. Com ênfase.

Uma frase de apoio que explica o que vai acontecer e convida pra ação.

CTA primário CTA secundário →

Linha de prova social mono · maiúsculas · discreta

PageHero

components/PageHero.astro

Hero compacto usado em páginas internas (plataforma, resultados, sobre…). Props: eyebrow, title, lede, cta.

EXEMPLO

Título da página interna.

Subtítulo explicativo da página. Curto e direto.

Call to action →

Logos bar

.logos-bar · .logos-grid · .logo-item (.sans)

Prova social — linha com logos de clientes. Mistura display italic e sans caps.

Marcas que operam com a Incentive.me

AMBEV Natura UNILEVER Bayer NESTLÉ Heineken

Stats band

.stats-band · .stats-grid · .stat

Banda preta com 4 números grandes. Use .accent dentro de .stat-num pra destacar em rosa.

10.000+

campanhas analisadas

8 anos

de dados reais

500+

empresas atendidas

+R$1 bi

gerenciados

"Legenda opcional em itálico."

Problem list

.problem-list · .num

Lista numerada editorial pra dor/fricção. Títulos grandes em Fraunces, número mono rosa.

01
Primeiro problema — uma frase curta e impactante.
02
Segundo problema — sempre forte, direto, sem marketing vazio.
03
Terceiro problema — use no máximo 5 itens, senão vira lista.

Marquee

.marquee · .marquee-track · .dot

Faixa preta com texto rolando em loop. Repete duas vezes pra continuidade.

Me mostre o incentivo e te mostrarei o resultado Me mostre o incentivo e te mostrarei o resultado Me mostre o incentivo e te mostrarei o resultado Me mostre o incentivo e te mostrarei o resultado

Motores grid

.motores-grid · .motor · .motor-num

Grid 2×2 com bordas finas. Cada card tem label numerado em mono rosa + título Fraunces + parágrafo.

01 / EIXO

Título do motor.

Descrição curta do que esse motor faz. Máximo 2 linhas.

02 / EIXO

Título do motor.

Descrição curta do que esse motor faz. Máximo 2 linhas.

03 / EIXO

Título do motor.

Descrição curta do que esse motor faz. Máximo 2 linhas.

04 / EIXO

Título do motor.

Descrição curta do que esse motor faz. Máximo 2 linhas.

Audience cards

.audience-grid · .audience-card · .payoff

Dois cards lado a lado. Hover revela barra rosa no topo + eleva. Usar quando houver dois públicos/caminhos.

Para um público

Benefício com palavra rosa.

Parágrafo explicando a proposta pra esse público em 2–3 linhas.

Frase-resumo em itálico — o que fica de valor.

Ver solução →

Para outro público

Benefício em destaque.

Parágrafo explicando a proposta pra esse público em 2–3 linhas.

Frase-resumo em itálico — o que fica de valor.

Ver solução →

Steps (fundo escuro)

.steps · .steps-grid · .step · .step-num

Seção escura com 4 colunas. Números grandes em itálico rosa. Usar pra "Como funciona" ou timeline.

Primeira etapa

Descrição curta do que acontece nessa etapa.

Segunda etapa

Descrição curta do que acontece nessa etapa.

Terceira etapa

Descrição curta do que acontece nessa etapa.

Quarta etapa

Descrição curta do que acontece nessa etapa.

Compare list

.compare-list · li.before · li.after

Lista antes/depois dentro de seção escura. "×" vermelho pra before, "✓" pra after.

Antes

Um problema do jeito antigo
Outro ponto de dor
Mais uma fricção

Depois

Resolução com a plataforma
Benefício claro
Resultado mensurável

Results grid

.results-grid · .result · .result-num

Grid 4×1 com números rosa gigantes + legenda curta. Usar pra métricas de impacto.

+23%

de sell-out médio

−35%

de turnover

91%

taxa de ativação

<30d

ao lançamento

Quotes

.quotes · .quote-grid · .quote

Depoimentos em cards com aspa decorativa rosa. Preferir duas colunas.

Frase de depoimento real, em itálico Fraunces. Curto e direto ao ponto.
Nome Sobrenome Cargo — empresa ou segmento

Outra frase de depoimento, mostrando o formato lado a lado.
Outro Nome Cargo — empresa ou segmento

Why grid

.why-grid · .why-item · .marker

Grid responsivo pra argumentos de diferenciação. Cada item tem pill numerado rosa + título + descrição.

Título curto

Explicação em 2 linhas do porquê isso importa.

Outro título

Explicação em 2 linhas do porquê isso importa.

Mais um título

Explicação em 2 linhas do porquê isso importa.

Module row

.module · .module-label

Linha bipartida (texto + detalhes) separada por bordas. Usar em páginas tipo "Plataforma" pra módulos sequenciais.

Módulo 01

Nome do módulo.

Parágrafo contando o que esse módulo resolve. Pode ter 2 ou 3 linhas.

Capacidade específica 01
Capacidade específica 02
Capacidade específica 03

Módulo 02

Nome do módulo.

Parágrafo contando o que esse módulo resolve.

Capacidade específica 01
Capacidade específica 02

Segment cards

.segment-grid · .segment-card

Cards de segmento com lista de definições (dt/dd). Usar em "Resultados" pra mostrar verticais.

Segmento A

Desafio: Descrição curta do desafio principal.
Resultado: +42% de sell-out em 90 dias.

Segmento B

Desafio: Outro desafio específico.
Resultado: −28% de turnover.

Case cards

.case-grid · .case-card · .segment-tag

Case detalhado em layout 1:2 com header+segmento à esquerda e dl à direita.

INDÚSTRIA

Nome do case

Cliente anonimizado

Contexto: Parágrafo descrevendo o ponto de partida.
Solução: O que a Incentive.me implementou.
Resultado: +38% de engajamento em 60 dias.

Manifesto (exemplo)

Pessoas reagem a incentivos.

Não é preguiça. Não é falta de esforço. É falta de método.

A gente construiu um sistema pra trocar achismo por dado e planilha por plataforma.

Pra quem vende. Pra quem lidera. Pra quem paga a conta.

Classe: .manifesto · use .stacked pro refrão escalonado.

FAQ

.faq-item (details/summary)

Accordion nativo. "+" rosa gira ao abrir. Suporta ul e formula dentro da resposta.

Pergunta frequente em Fraunces?

Resposta direta em 1–2 parágrafos. Pode conter lista:

item um
item dois

Outra pergunta mostrando que empilha?

Resposta com destaque especial:

variável_x = (engajamento × meta) / payout

Explicação depois da fórmula.

Demo form

.demo-grid · .demo-form · .field · .demo-steps-list

Layout de página de conversão — formulário à esquerda, passos à direita.

Primeiro passo

O que acontece depois que a pessoa envia.

Segundo passo

Próxima ação — prazo, contato etc.

Terceiro passo

Fechamento do fluxo.

Próximo passo

Último empurrão editorial.

Frase que reforça o benefício e convida pra ação final.

CTA final →

Classe: .closer · italic backdrop: .closer-marquee

Reveal on scroll

.reveal

Adicione a classe .reveal em qualquer elemento — ele fade-in + sobe 24px ao entrar na viewport. Respeita prefers-reduced-motion.

Elemento que aparece ao rolar.

Outro elemento com .reveal.

Componentes Astro/React

Arquivos reutilizáveis.

Esses vivem em src/components/ e são importados nas páginas.

BaseLayout.astro

Layout base

Envolve toda página: <head>, Header, Footer, SEO, fontes, reveal. Props: title, description, locale, canonical?, ogImage?, type?, jsonLd?, noindex?.

Header.astro · Footer.astro

Header & Footer

Topo e rodapé globais (veja essa própria página). Props: locale.

PageHero.astro

PageHero

Hero compacto pra páginas internas. Props: eyebrow?, title, lede?, cta?. Veja demonstração em #page-hero.

SEO.astro

SEO

Meta tags, Open Graph, Twitter Card, JSON-LD de organização. Chamado automaticamente pelo BaseLayout — não precisa usar direto.

AuthButton.tsx (React island)

AuthButton

Botão inteligente que detecta se o usuário tem sessão em app.incentive.me e troca "Entrar" por "Ir para o app". Props: appMeUrl, labelLogin, labelOpen.

Entrar