# Exemplos — a área de UI da skill

Três templates prontos, todos usando `../assets/tokens/tokens.css`, o kit principal
de logos (`../assets/logos/principais/`) e as imagens oficiais (`../assets/img/`):

| Arquivo | O que é | Registro |
|---|---|---|
| `landing.html` | Landing institucional composta como **capa editorial**: foto oficial full-bleed + halftone, split do manual, régua de processo, círculo de dado, footer-CTA. | Marketing |
| `ui-kit.html` | **Biblioteca completa de UI** — todos os componentes com nomes de classe, incluindo os exclusivos da marca (régua, trilha, selo, carimbo, dado). | Referência |
| `app.html` | Shell de produto (página de projeto): topbar, KPIs com carimbo, régua de ciclo, tabela de medições, trilha de rastreabilidade, selo. | Produto |
| `post.html` | **Carrossel social oficial** — 4 pranchetas 1080×1350 (capa → conteúdo → dado → fechamento) com hint de arraste, paginação segmentada, chips flutuantes e marca inline. | Social |

Estes templates são o ponto de partida padrão — copie a estrutura e troque o conteúdo.
Eles seguem as proibições anti-clichê de `../references/ui-componentes.md` (§16):
nada de eyebrow em toda seção, cards numerados 01/02/03, grades de cards idênticos
ou "hero metrics" de SaaS.

Para abrir com os assets resolvendo, sirva a **pasta raiz da skill** por HTTP
(ex.: `python -m http.server`); `file://` funciona na maioria dos navegadores.

Referências visuais oficiais: `../references/manual/` (14 páginas do manual)
e `../references/exemplos-posts/` (posts publicados).
