# Aplicações — receitas por tipo de peça

Receitas prontas por formato. Web/UI detalhado em `ui-componentes.md` e
`ux-diretrizes.md`; aqui ficam os padrões de composição. Exemplos oficiais:
`references/manual/page-12..13.jpg` e `references/exemplos-posts/`.
Templates prontos: `exemplos/landing.html` · `exemplos/ui-kit.html` · `exemplos/app.html`.

## 1. Web — a linguagem de layout (balizada no material de marketing)

### Setup
1. Importe `assets/tokens/tokens.css` antes de tudo (ou o tema Tailwind).
2. Fontes: `@font-face` de `tipografia.md` ou o `<link>` do Google Fonts.
3. Logos de `assets/logos/principais/` (kit principal).
4. Imagens oficiais: `assets/img/floresta-aerea.jpg` (foto da capa do manual, limpa)
   e `assets/img/gradiente-institucional.jpg` (textura oficial do gradiente).

### O princípio: compor como CAPA, não como template
O material da marca não usa a gramática "hero centralizado + 3 colunas de features".
Ele compõe como **capa editorial**: foto ou cor ocupando a superfície inteira,
conteúdo **ancorado** (esquerda/base), assimetria, muito ar, um elemento gráfico
(círculo de linha, régua, orbe) atravessando o quadro. Traga isso para a web:

- **Capa fotográfica (home/campanha):** `floresta-aerea.jpg` full-bleed + véu +
  `.lc-halftone`; logo pequeno no topo; headline Zalando 500 grande ancorada à
  esquerda-base com **ênfase em bold**; 1 pill CTA. O overline itálico da marca
  entra aqui — **uma vez por página**, não em toda seção.
- **Split editorial (o layout do manual):** painel escuro (`#0B3D2E`/`#003C63`) de
  ~40% com a tese em branco + painel claro com o conteúdo. É o jeito da casa de
  fazer "seção com título forte" sem eyebrow.
- **Atmosfera clara (slides claros dos posts):** `.lc-bg-atmo` + 1–2 `.lc-orb`,
  conteúdo centrado estreito (≤ 34rem) ou `.lc-card--soft` flutuando; chips de
  ícone glassy quando fizer sentido.
- **Momento de dado:** `.lc-dado` (círculo verde com fonte citada) — nunca fileira
  de "hero metrics".
- **Processo/sequência:** `.lc-regua` com marcos — nunca cards numerados 01/02/03.
- **Gradiente (raro):** a textura oficial `gradiente-institucional.jpg` (ou o token
  CSS) — só home/campanha, 1× por site, nunca em componente.

### Ritmo e assimetria
Alterne superfícies: `capa escura → branco → #EAF3F8 atmo → branco → escura (CTA) →
navy (footer)`. Nunca duas escuras seguidas. Varie a estrutura de cada seção
(split, lista editorial com divisores, tabela, círculo de dado) — se duas seções
seguidas têm a mesma anatomia, mude uma. Respiro entre seções: 96–128px desktop.

### Página de produto/dashboard
Header 72px → breadcrumb → título + ações → KPIs (cards **com carimbo de fonte**)
→ gráfico → tabela. Filtros acima da tabela; exportar como botão secundário.
Produto é registro contido: superfícies claras, raio sm–md, familiaridade > surpresa
(as "exclusividades" de marketing — orbes, halftone, dado-círculo — ficam fora do app;
os exclusivos de produto são `.lc-trilha`, `.lc-carimbo`, `.lc-regua` e `.lc-selo`).

## 2. Documentos e apresentações

### Deck (16:9, 1920×1080)
- **Capa:** foto floresta + halftone + véu, ou `#0B3D2E` sólido, ou gradiente.
  Overline lime (ou tagline em `Tagline_Escuro.png`), título Zalando 500 branco
  72–96px, credito pequeno na base. Logo `colorido/png/Principal_Escuro.png` (arte branca).
- **Divisória:** `#003C63` (padrão do manual) ou gradiente; número da seção +
  título branco gigante; marca d'água do wordmark a ~8% opcional.
- **Conteúdo:** fundo branco; título Zalando 600 40px `#0B3D2E`; corpo Public Sans
  20–24px `#02172E`; margens 80px laterais / 64px verticais.
- **Conteúdo escuro (dados):** fundo `#0B3D2E` ou `#02172E`; título branco; use para
  timeline/destaque — ver `manual/page-13.jpg` (régua de ticks finos verdes,
  marcos "Mês:" em bold + descrição regular, alternando acima/abaixo da régua).
- **Slide de número:** um dado gigante (Zalando 300–500, 96px+, branco ou lime),
  overline em cima, fonte citada embaixo em caption. Ou círculo verde `#1E6E43`
  com número branco dentro (padrão do manual p. 12).
- **Rodapé de todo slide:** logo ~28px + `Lux Carbon Standard ® Todos os direitos
  reservados` em 10–11px `#A4ABB4`/`#495869`.

### Documento (A4)
Cabeçalho `colorido/png/Blocada_Lateral_Claro.png` ~15–20mm alinhado à esquerda.
Corpo Public Sans 10.5–11pt, entrelinha 1.5, margens 25mm. Títulos Zalando 600
`#0B3D2E`. Tabelas: header `#0B3D2E` branco, zebra, sem bordas verticais.
Rodapé: `Principal_Claro.png` pequeno + página em 9pt `#495869`
(o `Lettering` manuscrito é para assinatura de carta/manifesto, não rodapé).
Capa de proposta: como capa de deck, em retrato.

### E-mail
Largura 600px, fundo `#F5F6F7`/branco. Logo PNG `Blocada_Lateral_Claro` ou
`Principal_Claro` ~28px. Fontes: system fallback (não dependa de webfont). Um botão
`#1E6E43` branco `radius-md`. Rodapé: endereço, crédito e descadastro em 12px `#495869`.

## 3. Social e peças gráficas

### Formatos
| Peça | px |
|---|---|
| Post feed quadrado | 1080×1080 |
| Post retrato / carrossel | 1080×1350 |
| Story/Reels | 1080×1920 |
| LinkedIn feed | 1200×627 |
| Capa LinkedIn | 1128×191 |

### Anatomia do post oficial (ver `exemplos-posts/`)
- Margem de segurança 80–96px (story: 120px topo/base).
- **Capa escura:** foto floresta + halftone verde + véu; logo `Principal_Escuro`
  (arte branca) pequeno no topo OU wordmark grande como protagonista; overline lime
  CAPS (`ls +5%`, Zalando itálico 600); headline Zalando 500 branca 64–96px com
  **ênfase em bold**; corpo Public Sans 32–40px; **pill CTA** com seta
  ("Até pararmos de respeitá-lo →").
- **Slide de conteúdo claro:** fundo `#F0F6FA→branco` suave, overline verde-500 ou
  azul-800, headline navy centralizada, chips de ícone flutuantes (clock, folha —
  linha fina em chip translúcido), corpo `#495869`.
- **Slide de dado:** círculo sólido `#1E6E43`, número branco gigante, contexto em
  14–18px, **fonte citada** em caption ("(Sylvera, Q2 2026 Carbon Data Snapshot)").
- **Fechamento:** headline com wordmark inline ("É para sustentar essa confiança que
  a **LuxCarbon** trabalha.") + reforço em verde bold no fim do corpo.
- **Navegação de carrossel:** hint "Arraste para a próxima tela →" (`.lc-hint-swipe`,
  sky, 24–28px) no topo da capa; **paginação segmentada** na base
  (`.lc-progress--segmentos`, tela atual `.ativo` — lime sobre escuro, verde-500
  sobre claro). Chips de ícone flutuantes nos slides claros
  (`.lc-chip-icon--flutuante`), wordmark inline no fechamento (`.lc-marca-inline`)
  e última frase em `.lc-fecho-verde`.
- **Template pronto:** `exemplos/post.html` — as 4 telas do padrão oficial em
  pranchetas 1080×1350, com toda a anatomia acima aplicada.
- Crédito `Lux Carbon Standard ® Todos os direitos reservados` em 20–24px na base.
- Círculo decorativo 1px (sky ~20% opacidade) atravessando o quadro.
- **Um acento por tela.** Máx. 2 famílias de cor por peça.

### Fotografia
Natureza real (aérea de floresta, campo, medição), infraestrutura, mercado
financeiro. Luz natural, tom sóbrio, sem saturação artificial, sem stock clichê.
Texto sobre foto = véu escuro obrigatório (+halftone recomendado).

## 4. Receita do halftone (tratamento assinatura)

Retícula de pontos sobre a foto (manual p. 12: "filtro de halftone por cima para
criar diferenciação"). Em CSS, use a utilitária `.lc-halftone` de `tokens.css`
(overlay de `radial-gradient` repetido ~4px + véu). Em edição de imagem:
1. Foto em tom escuro/esverdeado (curva para as sombras `#0B3D2E`).
2. Camada halftone: padrão de pontos 3–6px, branco ou `#59C3FF`, opacidade 6–12%,
   modo overlay/soft light.
3. Véu `#02172E` 40–60% onde houver texto.
Nos posts oficiais a retícula é sutil — se ela chama mais atenção que o conteúdo,
está forte demais.

## 5. Ícones e ilustração

Sem mascotes e sem ilustração 3D. Linguagem gráfica = geometria de linha fina
(círculos, réguas, mapas de pontos). Ícones stroke 1.5–2px, cantos levemente
arredondados, em `#02172E`/`#495869` (claro) ou branco/`#85B199` (escuro), com
acento verde/lime pontual. Mapa/globo pontilhado é bem-vindo (retoma o halftone).
