# UI kit

Todos os componentes do design system, com as classes de `assets/tokens/tokens.css`. Especificações completas em `references/ui-componentes.md`.

### Cores

Institucionais + escalas. Pares de contraste validados em `references/cores.md`. Lime e sky nunca são texto sobre fundo claro.

Verde Escuro
Azul Petróleo
Navy
verde-500 CTA
verde-100
azul-100
azul-400
neutro-600
neutro-300
neutro-100
lime
sky

### Tipografia — as quatro vozes

Zalando Sans em títulos, Public Sans no resto. Specs do manual em `references/tipografia.md`.

Overline — Zalando itálico caps +5% `.lc-overline`

Headline Medium 500, −2% `.lc-display`

Corpo Public Sans Regular — entrelinha 140% em peça, 150–160% em leitura longa. Ênfase com SemiBold, nunca itálico em texto corrido.

LCS-0027 · 312.480,5 tCO₂e `.lc-id` `.lc-num` — números sempre tabulares

### Botões e pills

Um primário por vista. O CTA verde em caps é o botão do manual; a pill é o CTA de peça/marketing.

Ver portfólio Leia mais Baixar one-pager Ver metodologia →
Compacto
`.lc-btn--primary``.lc-btn--cta``.lc-btn--secondary``.lc-btn--tertiary``[disabled]``.lc-btn--sm/--lg`
Ver o registro público → Confira as diretrizes →
Sobre escuro Até pararmos de respeitá-lo →
`.lc-pill``.lc-pill--solid``.lc-pill--dark``.lc-btn--on-dark`

### Formulário

Label sempre visível; placeholder é exemplo. Validação no blur com mensagem específica. Marque os opcionais, não os obrigatórios.

Cooperativa

Nome como consta no CAR.

CNPJ

CNPJ deve ter 14 dígitos.

Metodologia (opcional)
Observações (opcional)
Enviar cópia do laudo Safra 2025/26 Safra 2026/27
`.lc-label``.lc-input``.lc-input--error``.lc-select``.lc-textarea``.lc-help``.lc-error`

### Badges de status

Cor nunca é o único canal — o rótulo diz o estado. Vocabulário fixo do domínio.

Certificado Em análise Documentação pendente Reprovado Rascunho Novo
`.lc-badge--success/--info/--warning/--danger/--neutral/--brand`

### Alertas

Tinta de fundo + título forte. Sem barra lateral decorativa. O que houve + como resolver.

Verificação concluída. O certificado LCS-0027 foi emitido em 28 ago 2026.
Sincronização em andamento. Os volumes de ago/26 podem ser ajustados até o fechamento.
Medição pendente. A parcela 14 não envia dados desde 12 ago 2026. Agendar visita
Falha no envio do laudo. O arquivo excede 25 MB — comprima o PDF e tente de novo.
`.lc-alert--success/--info/--warning/--danger`

### Cards

Produto usa o padrão com borda; marketing usa o soft (raio 24, sombra difusa). KPI sempre com carimbo de origem.

Projetos ativos

27
Registro Lux Carbon · 31 ago 2026

tCO₂e certificadas

1.412.480
Auditoria independente · ago/26

Card de marketing

Raio 24px, sem borda, sombra difusa — o card do manual. Só em superfície de marketing.

`.lc-card``.lc-card--accent``.lc-card--soft``.lc-kpi``.lc-card--clickable`

### Tabela

Header verde escuro, zebra, sem bordas verticais, números tabulares à direita, unidade no header.

Projeto | Metodologia | Safra | Status | Volume (tCO₂e)
--- | --- | --- | --- | ---
Rio Verde REDD+ | VM0015 | 2024/25 | Certificado | 312.480
Cerrado ARR | AR-ACM0003 | 2025/26 | Em análise | 88.120
Biogás Sul | ACM0010 | 2024/25 | Documentação pendente | 41.905

`.lc-table` + `.lc-num` nas colunas numéricas

### Navegação

Ativo = navy + sublinha verde 2px. Breadcrumb com página atual sem link.

Visão geral Medições Documentos
← 1 2 3 →

### Progresso e carregamento

Skeleton para estrutura, barra fina para andamento. Nunca spinner de página inteira.

`.lc-progress``.lc-skeleton`

### Estado vazio

Explica o que existirá + uma ação. Sem ilustração fofa.

##### Nenhuma verificação agendada

Quando uma medição em campo for marcada, ela aparece aqui com data, escopo e responsável técnico.

Agendar verificação
`.lc-chip-icon` + título h5 + 1 frase + 1 ação

### Exclusivos da marca

Os componentes que só a Lux Carbon tem — derivados do manual e dos posts. Prefira-os aos equivalentes genéricos.

Régua de ticks `.lc-regua` — sequências reais (o stepper da casa)
Trilha de rastreabilidade `.lc-trilha`

- Medição em campo Concluída · 12 mai 2026 · parcela 14
- Metodologia aplicada VM0015 · documentação anexada
- Auditoria independente Em andamento · previsão 15 set 2026
- Registro público Aguardando auditoria

Selo de certificação `.lc-selo`
Certificado LCS-0027 Rio Verde REDD+ · safra 2024/25 · emitido 28 ago 2026
Verificação independente · registro público
Carimbo de proveniência `.lc-carimbo` Registro Lux Carbon · 31 ago 2026 14:02
Círculo de dado `.lc-dado` — o único "número gigante" autorizado em marketing
US$ 548M movimentados no mercado voluntário no S1 2026 (Sylvera, Q2 2026 Carbon Data Snapshot)

#### Objetos do domínio

O negócio da certificadora como componente — certificado, verificação, parcela, safra e a própria "conta".

Certificado `.lc-certificado` — o documento-cartão da casa
Certificado de crédito de carbono
LCS-0027

Projeto
  Rio Verde REDD+
Safra
  2024/25
Metodologia
  VM0015
Volume
  312.480,5tCO2e
Emissão
  28 ago 2026
Verificação
  Independente

registro nº 8F2A·4C91·D07E Registro público Lux Carbon
Anel de verificação `.lc-anel` — a régua em círculo
68%
✓
Medidor com escala e meta `.lc-medidor`

212 mil de 312 mil tCO₂e verificadas · meta do ciclo em 85%

Quantidade `.lc-co2` 1.412.480,5tCO2e
Mapa de parcelas `.lc-parcelas` — o halftone virando dado
sincronizada em consolidação pendente
Balanço de carbono `.lc-balanco` — "mostramos a conta"
Emissões da operação
41.2k
Créditos certificados
312.5k
Aposentados no ciclo
118.9k
Saldo verificado+271.3k tCO₂e
Linha de safras `.lc-safras`
Safra 2023/24 288.1k tCO₂e Safra 2024/25 312.5k tCO₂e Safra 2025/26 em medição
Trilha horizontal `.lc-trilha--horizontal` — passaporte do crédito

- Originação mai 2026
- Certificação ago 2026
- Transação em curso
- Aposentadoria—

Bloco de fontes `.lc-fontes`
Fontes

1. Registro público Lux Carbon · consolidação de 31 ago 2026.
2. Sylvera, Q2 2026 Carbon Data Snapshot.

Evidência fotográfica `.lc-evidencia`
-23.4218, -51.9331 · 12 mai 2026 · 09:41
Parcela P-07 · sobrevoo de medição EV-0142
Bloco de assinatura `.lc-assinatura` — o lar do Lettering
Lux Carbon Standard Diretoria técnica · 28 ago 2026

### Vidro, instrumentos & relevo

Os materiais da marca: vidro fosco sobre foto/escuro (precedente: chips dos posts), a família de instrumentos de medição derivada da régua, e a linguagem orgânica de terreno (curvas de nível, formas de parcela).

tCO₂e certificadas

1.412.480
Registro Lux Carbon · ago/26

`.lc-glass .lc-card--glass`

Parcela P-07 em auditoria

Validação independente em curso — previsão 15 set 2026.

Acompanhar →

`.lc-glass--escuro`

Vidro só sobre foto, fundo escuro ou atmosfera · nunca vidro dentro de vidro · fallback sólido automático sem `backdrop-filter`

Grupo de anéis `.lc-anel-grupo` + rótulo interno `.lc-anel--rotulado`
68%
volume
verificado
94%
parcelas
sincronizadas
✓
docs
completos
Arco `.lc-arco` — medidor semicircular
74% 0 100
Escala vertical `.lc-escala-v`
Medidor comparativo `.lc-medidor--comparativo`

medido 68% · auditado 54% · meta 85%

Anel inline em texto: certificação 68% concluída `.lc-anel--inline`

-23.4218, -51.9331 · 640 m
Parcela P-07 · Vale Verde
21.480,5tCO2e

Terreno `.lc-terreno` + curvas de nível `.lc-relevo--escuro` + chip `.lc-glass--escuro`

Relevo claro `.lc-relevo`

Curvas de nível como fundo técnico — recolorível via `--relevo-cor`, nunca atrás de texto longo.

Formas orgânicas `.lc-forma-organica/--2/--3`

### Da arte para o componente

Elementos minerados das peças oficiais — cada um com a origem anotada. Demonstração em contexto real: `exemplos/post.html`.

Dica de arraste + paginação segmentada `.lc-hint-swipe` `.lc-progress--segmentos` · capas dos carrosséis oficiais Arraste para a próxima tela →
Citação editorial `.lc-citacao` · intro do manual (p.2)

> Não é sobre a intenção, é sobre a prova: medição em campo, metodologia auditável, registro rastreável. Manual de marca · p. 9

Marca inline + fecho verde `.lc-marca-inline` `.lc-fecho-verde` · POST 2, tela final

É para sustentar essa confiança que a trabalha.

Não é apenas discurso, é o que a gente faz todos os dias na prática.

Régua com marcos rotulados `.lc-regua-bloco` + `.lc-marco-rotulo--acima/--abaixo` · slide de timeline (manual p.13)
Abril Primeira cooperativa certificada sob o novo protocolo.
Junho Imagem de satélite integrada ao monitoramento contínuo.
Outubro Plataforma de rastreabilidade pública no ar.
Card de uso proibido `.lc-nao-card` · grade de erros do manual (p.6)
Não distorcer
Não rotacionar
Não usar sem contraste
Card de especificação `.lc-espec` · tamanhos (manual p.7)
Aplicações digitais · mín 100 px recomendado social · 210 px
Galeria de variantes `.lc-galeria` · grade do manual (p.8)
Malha de construção `.lc-malha` · grades técnicas (p.5)
Wordmark sangrado `.lc-wordmark-bleed` · divisórias (p.5 e p.11) — só capa

### Dataviz

Ordem fixa das séries; grid horizontal apenas; destaque de um ponto em lime; fonte citada com carimbo.

1
2
3
4
5
6
7
tokens `--lc-chart-1…7` · rótulos 12px #495869 · pt-BR: 1.234.567,89 · tooltip fundo navy

Lux Carbon Standard ® Todos os direitos reservados · kit de referência interna