Todos os componentes do design
system, com as classes de assets/tokens/tokens.css.
Especificações completas em references/ui-componentes.md.
Institucionais + escalas. Pares de contraste validados em references/cores.md. Lime e sky nunca são texto sobre fundo claro.
Zalando Sans em títulos, Public Sans no resto. Specs do manual em references/tipografia.md.
Overline — Zalando itálico caps +5% .lc-overline
.lc-displayCorpo 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
Um primário por vista. O CTA verde em caps é o botão do manual; a pill é o CTA de peça/marketing.
.lc-btn--primary.lc-btn--cta.lc-btn--secondary.lc-btn--tertiary[disabled].lc-btn--sm/--lg.lc-pill.lc-pill--solid.lc-pill--dark.lc-btn--on-darkLabel sempre visível; placeholder é exemplo. Validação no blur com mensagem específica. Marque os opcionais, não os obrigatórios.
Nome como consta no CAR.
CNPJ deve ter 14 dígitos.
.lc-label.lc-input.lc-input--error.lc-select.lc-textarea.lc-help.lc-errorCor nunca é o único canal — o rótulo diz o estado. Vocabulário fixo do domínio.
.lc-badge--success/--info/--warning/--danger/--neutral/--brandTinta de fundo + título forte. Sem barra lateral decorativa. O que houve + como resolver.
.lc-alert--success/--info/--warning/--dangerProduto usa o padrão com borda; marketing usa o soft (raio 24, sombra difusa). KPI sempre com carimbo de origem.
Projetos ativos
tCO₂e certificadas
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--clickableHeader 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éricasSkeleton para estrutura, barra fina para andamento. Nunca spinner de página inteira.
.lc-progress.lc-skeletonExplica o que existirá + uma ação. Sem ilustração fofa.
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çãoOs componentes que só a Lux Carbon tem — derivados do manual e dos posts. Prefira-os aos equivalentes genéricos.
.lc-regua — sequências reais (o stepper da casa)
.lc-trilha
.lc-selo
.lc-carimbo
Registro Lux Carbon · 31 ago 2026 14:02
.lc-dado — o único "número gigante" autorizado em marketing
O negócio da certificadora como componente — certificado, verificação, parcela, safra e a própria "conta".
.lc-certificado — o documento-cartão da casa
.lc-anel — a régua em círculo
.lc-medidor
212 mil de 312 mil tCO₂e verificadas · meta do ciclo em 85%
.lc-co2
1.412.480,5tCO2e
.lc-parcelas — o halftone virando dado
.lc-balanco — "mostramos a conta"
.lc-safras
.lc-trilha--horizontal — passaporte do crédito
.lc-fontes
.lc-evidencia
.lc-assinatura — o lar do Lettering
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).
.lc-anel-grupo + rótulo interno .lc-anel--rotulado
.lc-arco — medidor semicircular
.lc-escala-v
.lc-medidor--comparativo
medido 68% · auditado 54% · meta 85%
Anel inline em texto: certificação 68% concluída .lc-anel--inline
Terreno .lc-terreno + curvas de nível .lc-relevo--escuro + chip .lc-glass--escuro
.lc-relevo
Curvas de nível como fundo técnico — recolorível via --relevo-cor, nunca atrás de texto longo.
.lc-forma-organica/--2/--3
Elementos minerados das peças oficiais — cada um com a origem anotada.
Demonstração em contexto real: exemplos/post.html.
.lc-hint-swipe .lc-progress--segmentos · capas dos carrosséis oficiais
Arraste para a próxima tela
.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
.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.
.lc-regua-bloco + .lc-marco-rotulo--acima/--abaixo · slide de timeline (manual p.13)
.lc-nao-card · grade de erros do manual (p.6)
.lc-espec · tamanhos (manual p.7)
recomendado social · 210 px
.lc-galeria · grade do manual (p.8)
.lc-malha · grades técnicas (p.5)
.lc-wordmark-bleed · divisórias (p.5 e p.11) — só capa
Ordem fixa das séries; grid horizontal apenas; destaque de um ponto em lime; fonte citada com carimbo.
--lc-chart-1…7 · rótulos 12px #495869 · pt-BR: 1.234.567,89 · tooltip fundo navyLux Carbon Standard ® Todos os direitos reservados · kit de referência interna