Button

Comando direto. Petróleo conduz, vermelho assina ações decisivas, secundário e ghost recuam quando a hierarquia precisa respirar.

Playground

Variant Size

Estado

Texto

HTML

Variantes

Link →

HTML

<button class="cv-btn">Primary</button>
<button class="cv-btn cv-btn--accent">Accent · CTA</button>
<button class="cv-btn cv-btn--secondary">Secondary</button>
<button class="cv-btn cv-btn--ghost">Ghost</button>
<button class="cv-btn cv-btn--danger">Danger</button>
<a href="#" class="cv-btn cv-btn--link">Link →</a>

Tamanhos

Estados

Regras de uso

✓ Faça

Use 1 botão accent (vermelho) por tela.

A ação principal deve ser óbvia. Petróleo nas demais, ghost para ações secundárias dentro de cards.

✕ Não faça

Não empilhe dois botões vermelhos.

Anula a hierarquia. Se houver duas ações concorrentes, a primária é vermelha, a secundária é petróleo ou ghost.

Color

A paleta nasce de quatro fundos oficiais: vermelho institucional, azul-noite, petróleo e bege. Em produto digital, petróleo lidera e vermelho assina.

Cores essenciais

Clique para copiar o token

Vermelho--cv-vermelho

#9E1327Copiar

Petróleo--cv-petroleo

#004359Copiar

Azul-noite--cv-escuro

#001624Copiar

Bege--cv-bege

#F2EFE3Copiar

Escala vermelha

Tint-tint

#F4DDE1

Soft-soft

#C45266

Base--cv-vermelho

#9E1327

Deep-deep

#7A0E1D

Ink--ink

#4D0812

Escala petróleo

Tint-tint

#D4E1E6

Soft-soft

#2A6679

Base--cv-petroleo

#004359

Deep-deep

#002F3F

Ink--cv-escuro

#001624

Cores semânticas

Sucesso--cv-success

#1F7A4D

Atenção--cv-warning

#B06A00

Erro--cv-danger

#9E1327

Info--cv-info

#004359

Typography

Montserrat. Uma família, sete pesos. Geometria humanista que conversa com o "o" perfeitamente redondo do símbolo da marca.

Escala

Display 2XL800 · clamp 48–88 · -2%

Casa que vive

Display XL700 · clamp 36–64 · -2%

Mais que metros quadrados

H1700 · 32 / 1.25

Encontre a sua próxima casa

H2700 · 26 / 1.25

Imóveis em destaque

H3600 · 20 / 1.25

Apartamento Vila Nova

Body Large400 · 17 / 1.65

Texto corrente para parágrafos introdutórios e descrições longas em páginas de imóvel.

Body400 · 15 / 1.5

Tamanho padrão para conteúdo de interface, tabelas e formulários do dia-a-dia.

Caption400 · 12 / 1.5

Metadados, legendas e ajudas em formulários.

Overline600 · 11 · 14%

Categoria · Imóvel comercial

Pesos

Aa

Light · 300

Aa

Regular · 400

Aa

Semibold · 600

Aa

Extrabold · 800

Spacing & Radius

Base de 4 px, escala geométrica e previsível. Raios padrão de 8 px geram interfaces calorosas sem perder estrutura.

Spacing

Token	Valor	Preview

Radius

--cv-r-sm

4px

--cv-r-md

8px · default

--cv-r-lg

12px

--cv-r-xl

18px

--cv-r-2xl

24px

--cv-r-pill

pill

Sombras

xs

sm

md

lg

Input

Altura confortável de 40 px, foco em petróleo, mensagens de erro em vermelho. Nada de bordas tímidas.

Estados

Default Preenchido Foco ErroDigite um e-mail válido. Disabled Select Textarea

Checkbox & Radio & Switch

Controles binários e múltipla escolha. Petróleo no estado ativo.

Checkbox

Cliente assinou contrato Documentação completa Vistoria prévia agendada

Radio group

Compra Locação Permuta

Switch

Notificações por e-mail Notificações por WhatsApp

Badge

Etiquetas curtas. Use a paleta semântica para comunicar status; reserve a versão sólida vermelha para destaques editoriais.

Variantes

Padrão Ativo Pendente Atrasado Em análise Novo

Avatar

Iniciais em fundo de marca. Use o petróleo como padrão, vermelho para hierarquia e bege para variedade.

Tamanhos

MC

Cores

RP

JS

AL

Empilhado

A

B

C

+4

Card

Contêineres com voz própria. Padrão, accent (faixa vermelha) e interativo para listas clicáveis.

Variantes

Card padrão

Container neutro com borda suave. Para conteúdo geral, settings, listas de informação.

Em destaque

Card accent

Borda esquerda vermelha para chamar atenção sem mudar o tom.

Card interativo

Toda a área é clicável. Sobe sutilmente no hover.

Abrir →

Alert & Toast

Mensagens persistentes (alert) e transitórias (toast). Compartilham a paleta semântica.

Alerts

Atualização disponível — Uma nova versão do app foi publicada.

Contrato assinado — Documento de Maria Silva foi recebido.

Vistoria atrasada — 3 imóveis aguardam vistoria há mais de 5 dias.

Pagamento recusado — Verifique os dados do cartão e tente novamente.

Toast

Imóvel publicado com sucesso.

Tabs

Navegação interna em uma única tela. Indicador petróleo na aba ativa.

Padrão

Conteúdo da aba ativa aparece abaixo da linha indicadora.

Table

Listas com cabeçalho em uppercase, números tabulares e hover sutil.

Imóvel	Corretor	Status	Valor
Apto 304 · Vila Nova	Marina Costa	Disponível	R$ 1.250.000
Casa · Alto de Pinheiros	Rafael Prado	Em proposta	R$ 3.480.000
Cobertura · Itaim	Ana Lima	Reservado	R$ 8.900.000

Property Card

O card mais visto na plataforma. Imagem 16:10, badge de status, preço sobre veil, meta-info no rodapé.

Lançamento

R$ 1.250.000

3 quartos · Vila Nova

3 dorm.·2 vagas·112 m²

Em proposta

R$ 3.480.000

Casa · Alto de Pinheiros

4 dorm.·4 vagas·340 m²

Pronto p/ morar

R$ 8.900.000

Cobertura duplex · Itaim

5 dorm.·6 vagas·520 m²