02.09 — Componentes

BIBLIOTECA DE COMPONENTES.

Todos os componentes base do sistema. Cada um com preview ao vivo e código de uso. Componentes estão em src/components/UI.tsx.

Btn — Botões

Uso

<Btn>Default</Btn>
<Btn gold>Gold</Btn>
<Btn small>Small</Btn>
<Btn href="/rota">Link</Btn>
<Btn onClick={() => {}}>Com evento</Btn>

Badge — Etiquetas

OutlineFilledMuted

Uso

<Badge variant="outline">Outline</Badge>
<Badge variant="filled">Filled</Badge>
<Badge variant="muted">Muted</Badge>

StatusChip — Chips de Status

AtivoEm revisaoBloqueadoEm progressoGold

Uso

<StatusChip color="var(--status-success)">Ativo</StatusChip>
<StatusChip color="var(--status-warning)">Em revisao</StatusChip>
<StatusChip color="var(--status-error)">Bloqueado</StatusChip>
<StatusChip color="var(--gold)">Destaque</StatusChip>

Card — Cards

Card — Default

DESIGN COM PROPÓSITO

Cada detalhe é intencional. Do kerning à paleta, tudo comunica antes de uma palavra ser lida.

Card — Left Accent

IDENTIDADE QUE PERMANECE

Marcas construídas para durar. Não seguimos tendências — criamos referenciais que resistem ao tempo.

Card — Featured

IMPACTO MENSURÁVEL

Estética a serviço do resultado. Design que converte, retém e transforma percepção em receita.

Projetos

120+

entregas concluídas

Clientes

60+

marcas atendidas

Retenção

94%

clientes recorrentes

NPS

9.7

satisfação média

BRANDING & IDENTIDADE

Core

Construção de marca do zero: naming, logo, paleta, tipografia e brandbook completo. Posicionamento estratégico para marcas premium.

DisponívelPremium

DESIGN SYSTEMS

New

Sistemas de design escaláveis: tokens, componentes, documentação viva e handoff. Consistência garantida em todas as superfícies digitais.

DisponívelWeb + App

Uso

<Card>Conteúdo</Card>
<Card leftAccent>Com borda esquerda gold</Card>
<Card featured>Card em destaque (borda top gold)</Card>
<Card noise={false}>Sem noise overlay</Card>

RuleBox — Caixas de Regra

Caixa informativa — para notas e contexto adicional.

Caixa positiva — para indicar o que fazer.

Caixa negativa — para indicar o que evitar.

Uso

<RuleBox variant="info">Nota informativa</RuleBox>
<RuleBox variant="do">O que fazer</RuleBox>
<RuleBox variant="dont">O que nao fazer</RuleBox>

CodeBlock — Blocos de Código

Exemplo de label

// Conteúdo do código aqui
const x = "valor"

Uso

<CodeBlock label="titulo opcional">
  {/* String de código */}
  {'codigo aqui'}
</CodeBlock>

ColorSwatch — Swatches de Cor (clicável — copia hex)

Black Rich#0a0a0aFundo principal

Black Card#1c1c1cCards

Gold#c8a44eAcento principal

White#f0ece4Texto

Uso

<ColorSwatch
  color="#c8a44e"
  name="Gold"
  hex="#c8a44e"
  desc="Acento principal"
/>

Importacao

src/components/UI.tsx — importar componentes

import {
  SectionLabel,
  GoldLine,
  Badge,
  StatusChip,
  Btn,
  Card,
  Divider,
  RuleBox,
  CodeBlock,
  Breadcrumb,
  PageNav,
  ColorSwatch,
} from '@/components/UI'

← AnteriorImagem e Fotografia Próximo →Tokens