---
name: lux-carbon-brand
description: Design system, identidade visual e diretrizes de UI/UX da Lux Carbon (Lux Carbon Standard, certificadora de carbono). Use SEMPRE que criar, revisar ou adaptar qualquer coisa com a marca Lux Carbon — sites, landing pages, dashboards, apps, componentes de UI, apresentações, decks, propostas, relatórios, one-pagers, posts e carrosséis para redes sociais, e-mails, PDFs ou qualquer material gráfico — mesmo que o pedido não mencione "marca" ou "design system" explicitamente. Também use para escrever copy/microcopy da Lux Carbon, escolher logo ou cor, e para responder perguntas sobre a identidade. Contém paleta oficial, tipografia com arquivos das fontes, 24 variantes de logotipo em SVG/PNG/PDF, tom de voz, componentes de UI prontos e diretrizes de UX.
---

# Lux Carbon — Design System

Guia operacional da marca **Lux Carbon** (entidade: Lux Carbon Standard — "a primeira
certificadora de carbono do Brasil"). **Toda peça com a marca segue este documento.**
Quando houver conflito entre este guia e uma preferência estética própria, o guia ganha.
Fonte da verdade: `Manual de marca.pdf` (Estúdio Vestígio, 2026) — páginas renderizadas
em `references/manual/`.

## Roteiro: carregue a referência certa antes de começar

| Vai fazer o quê? | Leia antes |
|---|---|
| Qualquer peça (sempre) | `references/marca.md` — essência, tagline, tom de voz |
| Site, landing, app, dashboard, e-mail | `references/cores.md` + `references/tipografia.md` + `references/ui-componentes.md` + `references/aplicacoes.md` (§1) |
| Fluxo, tela de produto, formulário, microcopy | `references/ux-diretrizes.md` |
| Deck, proposta, relatório, doc | `references/aplicacoes.md` (§2) + cores + tipografia |
| Post, carrossel, banner, peça gráfica | `references/aplicacoes.md` (§3) + `references/exemplos-posts/` |
| Escolher/aplicar logotipo | `references/logotipos.md` — **kit principal primeiro** |
| Gráficos e dataviz | `references/ui-componentes.md` (§ Dataviz) |

Use os tokens prontos de `assets/tokens/` (CSS, SCSS, JSON, Tailwind) em vez de digitar
valores na mão. Use os arquivos de `assets/logos/` — nunca recrie o logo.
**Parta dos templates** de `exemplos/` (landing, ui-kit, app) em vez de começar do
zero, e use os **componentes exclusivos da marca** (régua de ticks, círculo de dado,
selo, carimbo de proveniência, trilha) no lugar dos equivalentes genéricos — junto
com as **proibições anti-clichê de layout de IA** de `ui-componentes.md` §16
(sem eyebrow em toda seção, sem cards 01/02/03, sem grade de cards idênticos,
sem "hero metric" de SaaS; compor como capa, não como template).

## Regras invioláveis

1. **Logo é arquivo, não texto.** Nunca redigite "LuxCarbon" em Zalando Sans para
   simular o logo; use os SVG/PNG de `assets/logos/`.
2. **Sufixo do arquivo = fundo de destino** (verificado nos arquivos):
   `_Claro` → aplicar sobre **fundo claro** (a arte é escura, `#17293F`).
   `_Escuro` → aplicar sobre **fundo escuro** (a arte é branca, `#FDFEFF`).
3. Os 9 usos proibidos do manual: não distorcer, não rotacionar, não mudar a cor,
   não mudar a proporção, não inverter os elementos ("Carbon Lux"), não mudar a
   tipografia, não usar sem contraste com o fundo, não aplicar efeito/sombra,
   não usar contorno.
4. **Fontes:** Zalando Sans (títulos) e Public Sans (corpo) — nada além disso.
   Fallback autorizado: `system-ui, -apple-system, "Segoe UI", sans-serif`.
5. **Cores:** só as da paleta (`references/cores.md`). Não invente tons.
   Lime `#90D62E` e Sky `#59C3FF` **nunca** como texto sobre fundo claro.
6. Contraste **WCAG AA**: 4.5:1 para corpo, 3:1 para títulos ≥ 24px. As combinações
   validadas (calculadas, não estimadas) estão em `references/cores.md`.
7. Texto sobre foto exige véu escuro (`#02172E` a 40–60%) ou tratamento halftone.
8. Tamanhos do logo (manual): digital mín. 100px, social ~210px, máx. 320px de largura;
   impresso mín. 200px (~20mm). Área de respiro: altura da letra "L" em todos os lados.

## Resumo executivo

| | |
|---|---|
| **Wordmark** | "LuxCarbon®" (arquivo). Em texto corrido: "Lux Carbon" |
| **Tagline** | "A infraestrutura que transforma carbono em ativo." |
| **Claim** | "A primeira certificadora de carbono do Brasil" |
| **Mote** | "Confiança não se declara. Se certifica." |
| **Institucionais** | Verde Escuro `#0B3D2E` · Azul Petróleo `#003C63` · Navy `#02172E` |
| **CTA / ação** | Verde `#1E6E43` (botão do manual) ou Verde Escuro `#0B3D2E` |
| **Acentos (pontuais)** | Lime `#90D62E` · Sky `#59C3FF` |
| **Títulos** | Zalando Sans — Medium 500 (marketing), SemiBold 600 (UI) |
| **Corpo** | Public Sans 400 · line-height 140% (peça) / 150–160% (leitura longa) |
| **Logo padrão** | `Principal_Claro` em fundo claro · `Principal_Escuro` em fundo escuro |
| **Assinatura legal** | "Lux Carbon Standard ® Todos os direitos reservados" |

## Tom visual

Sóbrio, técnico e institucional — certificação de carbono e finanças climáticas.
Composição tipográfica em primeiro lugar; muito respiro; blocos de cor sólida;
acento em **um** elemento por peça. Elementos gráficos assinatura: foto de natureza
com **filtro halftone**, **círculo em linha fina** atravessando a composição,
**régua de ticks** para timelines. Gradiente institucional (navy→azul→verde) só em
momento hero/capa — nunca em componente de UI, nunca sobre o logo.

## Mapa de assets

```
assets/
├── fonts/            Zalando Sans + Public Sans (variáveis, OFL)
├── tokens/           tokens.css · tokens.scss · tokens.json · tailwind.tokens.js
├── img/              floresta-aerea.jpg + gradiente-institucional.jpg (oficiais, do manual)
└── logos/
    ├── principais/   ← KIT PRINCIPAL (Principal, Blocada, Favicon, Tagline) — comece aqui
    ├── colorido/     svg/ · svg-tight/ · png/ · pdf/   (arte navy #17293F + verdes)
    ├── mono/         svg/ · svg-tight/ · png/ · pdf/   (arte preta ou branca)
    └── parceiros/    BMS, HIL, Northern Trust, Sylvera
references/
├── manual/           as 14 páginas do Manual de marca (JPEG) — consulte na dúvida
├── exemplos-posts/   posts oficiais de referência
└── paleta-de-cores.png
exemplos/
├── landing.html      template de marketing (capa fotográfica, split, régua, dado)
├── ui-kit.html       ÁREA DE UI COMPLETA — todos os componentes com classes
├── app.html          shell de produto (KPIs+carimbo, régua de ciclo, trilha, selo)
└── post.html         carrossel social oficial (4 pranchetas 1080×1350)
```

**Em web use `principais/` ou `svg-tight/`** (viewBox justo). Os arquivos de `svg/`
e os originais do Drive têm artboard 1200×1080 com muito espaço vazio — num header,
o logo ficaria minúsculo. Os PNG já estão aparados. Exceção: `Lux_Carbon_Standard_*.svg`
contém texto vivo (não vetorizado) — em web, prefira o PNG correspondente.
