# Design System — Tibério Lemes · Opção 2

**Direção:** Cabinet Grotesk nos títulos + estética escura/editorial Clyde<br>
**Status:** aprovada por Tibério em 20 de setembro de 2026; Opção 1 permanece intacta como alternativa<br>
**Aplicação:** página pessoal para consultoria/advisory e palestras/workshops<br>
**Referência visual:** DESIGN_CLYDE.md (referência local não incluída neste repositório)<br>
**HTML navegável:** [10-design-system-tiberio-opcao-2-cabinet.html](10-design-system-tiberio-opcao-2-cabinet.html)<br>
**Opção 1:** [07-design-system-tiberio-lemes.md](07-design-system-tiberio-lemes.md) · [HTML da Opção 1](08-design-system-tiberio-lemes.html)

## Resumo da proposta

Esta opção mantém a arquitetura comercial e o conteúdo da página pessoal já aprovados, mas muda a atmosfera visual: canvas preto, seções alternadas em osso, cards com hairlines, títulos grandes em Cabinet Grotesk, corpo em DM Sans, uma forma 3D Solstice e uma biblioteca opcional de fundos grainy-gradient para composições selecionadas.

O `DESIGN_CLYDE.md` usa Recoleta para títulos e Oldschool Grotesk no corpo. A pedido de Tibério, Cabinet Grotesk substitui a fonte dos títulos; DM Sans continua no corpo, preservando a base tipográfica da Opção 1. A estrutura é inspirada no Clyde, adaptada para a página profissional. Não entram preços de produto, métricas, logos de clientes ou claims de cases.

### Comparação rápida

| | Opção 1 | Opção 2 |
|---|---|---|
| Atmosfera | Papel quente, linho e pedra | Galeria escura, alto contraste e acento Solstice |
| Títulos | DM Sans | Cabinet Grotesk |
| Corpo | DM Sans | DM Sans |
| CTA em hero | Cápsula preenchida grafite | Cápsula outline osso |
| Cards | Branco/pedra, quase sem borda | Osso em faixas claras; grafite-char com hairline em faixas escuras |
| Imagem de assinatura | Retrato real | Retrato real + forma 3D com gradiente em um único ponto |

## Fonte e carregamento

- **Títulos:** Cabinet Grotesk, 400. Pesos 500, 700 e 800 disponíveis para usos pontuais; manter 400 como voz dominante.
- **Corpo/UI:** DM Sans, 400; 500 em labels e navegação.
- **Import Cabinet:** `https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800&display=swap`.
- **Import DM Sans:** `https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap`.
- **Origem/licença:** [Cabinet Grotesk no Fontshare](https://www.fontshare.com/fonts/cabinet-grotesk) e [ITF Free Font License](https://www.fontshare.com/licenses/itf-ffl). O CSS oficial do Fontshare foi consultado e retorna os pesos 400, 500, 700 e 800 usados aqui. Não copiar os arquivos de fonte para esta pasta ou incluí-los num repositório público; o HTML referencia o serviço oficial.

## A. Design system técnico

### 1. Cores e superfícies

| Token | Valor | Função |
|---|---|---|
| Obsidian | `#000000` | Canvas principal, hero e bandas escuras |
| Bone | `#f6f6f4` | Texto em fundo escuro, outline e bandas claras |
| Slate | `#7d7d7d` | Superfície secundária e texto auxiliar sobre Bone |
| Paper | `#ffffff` | Interior de capturas de produto e contraste máximo |
| Char | `#1a1a1a` | Cards em fundo escuro, borda e separação tonal |
| Solstice Gradient | `linear-gradient(90deg, #feed7a 0%, #ff8400 48.96%, #df91f7 100%)` | Somente na forma 3D do hero; nunca em CTA, texto ou card |

A paleta de interface continua quase acromática. O gradiente Solstice é uma forma 3D isolada, não uma cor de interface. As 40 imagens grainy-gradient criadas para compor fundos são uma camada artística separada: seus tons de cobre, azul petróleo, rosa, violeta, menta e amarelo não viram tokens, botões, texto ou estados de interface. Em fundo escuro, texto auxiliar usa `rgba(246,246,244,.70)`; em fundo claro, usa `#7d7d7d`.

**Elevação:** sem box-shadow. Separar áreas por alternância Obsidian/Bone, cards Char e bordas hairline.

### 2. Tipografia

Cabinet Grotesk substitui a serif Recoleta da referência porque Tibério pediu uma grotesca expressiva nos títulos. A intenção editorial continua no tamanho amplo, no peso regular, no tracking negativo e no line-height justo. DM Sans fica no corpo para preservar continuidade entre as opções.

| Papel | Família/peso | Mobile | Desktop | Line-height | Tracking |
|---|---|---:|---:|---:|---:|
| H1 hero | Cabinet Grotesk 400 | 48px | 80px | 1.0 | -0.03em |
| H2 seção | Cabinet Grotesk 400 | 36px | 61px | 1.05 | -0.02em |
| H3 | Cabinet Grotesk 400 | 28px | 47px | 1.1 | -0.02em |
| H4/card | Cabinet Grotesk 400 | 23px | 36px | 1.1 | -0.01em |
| Body large | DM Sans 400 | 18px | 21px | 1.4 | normal |
| Body | DM Sans 400 | 16px | 16px | 1.5 | normal |
| Caption | DM Sans 400 | 14px | 15px | 1.5 | normal |
| Micro-label | DM Sans 500 | 12px | 13px | 1.4 | 0.04em |

Display weights stay at 400. Do not use all caps for full headlines. Short section labels may use uppercase at 12–13px. Hero is centered, not split; if a split layout is chosen later, set H1 to `clamp(24px, 2.8vw, 44px)` per the skill.

### 3. Layout e espaçamento

- **Canvas:** full bleed `#000000`; conteúdo centralizado.
- **Container máximo:** 1200px.
- **Padding horizontal:** 20px mobile, 44px desktop.
- **Section gap:** 80px desktop; 64px mobile.
- **Unidade base:** 4px; escala: 20, 24, 44, 64, 92, 100 e 144px.
- **Padding de card:** 24px.
- **Gap de elemento:** 20px; gaps compactos podem usar 4/8/12px conforme conteúdo.
- **Grid:** 1 coluna mobile; 2 colunas para conteúdo em tablet/desktop; 3 colunas no portfólio em desktop quando os screenshots permanecerem legíveis.
- **Navegação:** transparente sobre Obsidian, 64px de altura, não fixa; wordmark textual, links discretos, CTA de outline à direita.
- **Conteúdo:** bandas full-width; texto e visual em 2 colunas nas seções de palestras e portfólio; headings de seção alinhados à esquerda, salvo hero.

### 4. Formas, bordas e raios

Escala Clyde preservada: `4px`, `12px`, `16px`, `38px`, `100px`.

| Elemento | Raio | Tratamento |
|---|---:|---|
| Inputs | 4px | Fundo Bone/Paper, borda Slate ou Obsidian conforme o contexto |
| Links/tab compacto | 12px | Sem preenchimento permanente; foco visível |
| Cards de produto/case | 16px | Sem sombra; superfície tonal e borda fina |
| Painel grande | 38px | Reservado a um painel único se necessário; não repetir em todos os cards |
| Botões e tags | 100px | Cápsula |

Bordas em superfícies claras: 1px Obsidian com baixa opacidade. Em superfícies escuras: 1px Bone com baixa opacidade ou `#1a1a1a` para separar cards Char do canvas. Nunca simular profundidade com sombra.

### 5. Botões e ações

**CTA em fundo escuro — Ghost Pill**

- Transparente, contorno `1px solid #f6f6f4`, texto Bone, raio 100px, padding `20px 28px`, DM Sans 15–16px/400.
- Uso no hero: `CONVERSAR SOBRE CONSULTORIA`.
- Hover/focus: inverte para preenchimento Bone e texto Obsidian; sem gradiente, sombra ou deslocamento.

**CTA em fundo claro — Filled Pill**

- Fundo `#000000`, texto `#f6f6f4`, raio 100px, padding `20px 28px`.
- Uso nas bandas Bone para a ação principal ou secundária.
- Hover: mantém preenchimento Obsidian; outline de foco evidente.

**Ação secundária em fundo escuro:** link em Bone, sem preenchimento, sublinhado no hover. A oferta de palestra/workshop não compete visualmente com a consultoria/advisory.

Altura resultante aproximada: 55–60px conforme line-height; manter mínimo de 48px em mobile. Botões mobile podem ocupar a largura do container e empilhar.

### 6. Cards, navegação e inputs

- **Card de oferta em banda clara:** Bone `#f6f6f4`, texto Obsidian, raio 16px, padding 24px; sem sombra.
- **Card de portfólio em banda escura:** Char `#1a1a1a`, texto Bone, raio 16px, padding 24px, hairline; screenshot real em interior Paper `#ffffff` com raio 12px.
- **Card de trajetória:** linha/faixa de itens textuais em fundo escuro, separados por hairline. Usar Pacto/Holus/EMA em texto, sem logos e sem dizer que são clientes de consultoria.
- **Navegação:** background transparente, links 15px DM Sans 400, Bone; CTA outline ghost à direita; sem sticky e sem mega-menu.
- **Input opcional:** height 48px, fundo Paper/Bone, texto Obsidian, borda 1px Slate, raio 4px. Em foco: outline 2px Bone em dark band ou Obsidian em light band. Não incluir formulário até o canal de contato ser confirmado.
- **FAQ:** `<details>/<summary>` ou disclosure acessível; linhas hairline, sem cards elevados.

### 7. Ícones

Não usar ícones decorativos nem emoji. Se um estado funcional os exigir, usar Iconify Phosphor Outline, 20px, com círculo contornado Bone em fundo escuro ou Obsidian em fundo claro. Não usar Lucide. O wireframe atual dispensa ícones; etapas são numeradas.

### 8. Imagens e decisão de luz

- **Emoção:** autoridade editorial, controle, clareza e proximidade.
- **Luz:** direcional suave, com contraste médio-alto coerente com a galeria escura; retratos preservam pele e aparência reais.
- **Temperatura:** neutra-quente em retratos; não aplicar a mesma correção de cor a capturas de software.
- **Saturação:** natural nas fotos e acromática na UI. Tons de cobre queimado e azul petróleo aparecem somente dentro dos fundos artísticos grainy-gradient; o Solstice Gradient fica reservado à forma 3D.
- **Composição:** imagens ocupam menos de 20% do primeiro viewport; bastante espaço negativo ao redor do H1.
- **Solstice Gradient:** exclusivamente na forma 3D do hero; não usar em botão, texto, borda, card ou screenshot. Os gradientes grainy são imagens raster de fundo para faixas selecionadas, não elementos de UI.
- **Screenshots:** capturas verdadeiras dos produtos; nada de dashboards gerados, números ilustrativos, clientes ou dados privados.
- **Overlay:** retratos em cards/colunas, não como background atrás de texto. Os fundos grainy podem receber texto somente com camada de contraste dedicada — nunca reduza a opacidade do conteúdo ou da imagem inteira.

### 8.1 Biblioteca de fundos grainy-gradient

A textura combina com a direção escura/editorial. A primeira série mantém cobre queimado e azul petróleo; a segunda acrescenta paletas claras, pastéis e vibrantes. O grão acrescenta matéria e as cores criam atmosferas diferentes sem alterar os tokens da interface.

- **Série 1 · cobre e petróleo:** [12-biblioteca-backgrounds-grainy.html](12-biblioteca-backgrounds-grainy.html) · `assets/atmosferas-grainy/` · 20 WebP.
- **Série 2 · variações de cor:** [13-biblioteca-backgrounds-grainy-cores.html](13-biblioteca-backgrounds-grainy-cores.html) · `assets/atmosferas-grainy-variacoes/` · 20 WebP, sendo 14 claras/pastéis e 6 vibrantes.
- **Total:** 40 fundos, aproximadamente 8,7 MB; arquivos entre 82 e 372 KB e dimensões de 1.024 a 1.672px.
- **Uso recomendado:** escolher poucas faixas de destaque. A Série 1 funciona em bandas escuras (hero alternativo, palestras/workshops, citação ou CTA). A Série 2 clara pode entrar em uma composição editorial com texto Obsidian; as variações saturadas pedem uso pontual e contraste revisado.
- **Composição:** `background-size: cover`, ajustar `background-position` para deixar o foco luminoso fora do texto. Usar overlay escuro se houver texto Bone sobre imagem saturada. Não reduzir opacidade do conteúdo ou da imagem inteira.
- **Não usar:** dentro de botão, texto, chip, borda, screenshot ou sobre o rosto em retrato; não aplicar as 40 imagens em sequência na mesma página.

```css
/* Família clara: texto escuro sobre composição luminosa */
.section--grain-light {
  color: #000;
  background: url("assets/atmosferas-grainy-variacoes/21-apricot-coral-light.webp") center / cover;
}

/* Família saturada: proteger texto claro com overlay */
.section--grain-vivid {
  background-image: linear-gradient(rgba(0,0,0,.24), rgba(0,0,0,.42)),
    url("assets/atmosferas-grainy-variacoes/34-tangerine-coral-violet.webp");
}
```

**Seleção inicial:** `11-broad-horizontal-atmosphere.webp` para hero escuro alternativo; `07-clouded-ember-teal.webp` para palestra/workshop; `04-edge-light-left-corners.webp` para CTA final. Na série clara, `24-citron-ivory-glow.webp` e `28-lavender-peach-blush.webp` oferecem fundos luminosos para texto escuro; `34-tangerine-coral-violet.webp` é uma opção vibrante com overlay. As outras imagens ampliam as escolhas de luz, enquadramento e paleta.

### 9. Motion system — direção editorial

**Princípio:** autoridade calma, movimento funcional. Usar animação para revelar hierarquia e confirmar ações; manter todo o conteúdo compreensível em estado estático. A página não deve parecer um produto SaaS animado.

| Uso | Tempo | Movimento | Curva/limite |
|---|---:|---|---|
| Sublinhado de links | 140ms | Escala horizontal de 0 a 1 | `ease-out` |
| CTA | 160ms | Inversão de Obsidian/Bone | `ease-out`; sem deslocamento |
| Hairline de cards | 180ms | Mudança de opacidade/cor da borda | `ease-out`; sem elevação ou zoom |
| Entrada do hero | 520ms | Opacidade 0→1 e `translateY(12px→0)` | `cubic-bezier(.22,.61,.36,1)`; stagger 90ms |
| Revelação de seção | 460ms | Opacidade 0→1 e `translateY(12px→0)` | Mesma curva; somente uma vez ao entrar na viewport |
| Stagger de grupo | 70ms | Até 3 cartões; no máximo 4 itens no hero | Não atrasar conteúdo crítico |
| Órbita Solstice | Ida e volta em 7s | Percurso diagonal de 32px, rotação de 28° e escala 0.96–1.06 | `ease-in-out`, alternada; só no hero; 3.5s por direção |

**Recomendação para a página:**

1. **Hero:** revelar eyebrow, título, texto e CTA uma vez, com atraso progressivo curto. Não animar a navegação nem atrasar o H1/CTA por carregamento de terceiros.
2. **Rolagem:** revelar títulos de seção, grupos curtos de cards e etapas com fade + subida de 12px em 460ms. Usar `IntersectionObserver` apenas como aprimoramento progressivo; conteúdo fica visível se JavaScript ou suporte estiver ausente.
3. **Órbita:** deriva visualmente perceptível, com percurso diagonal de aproximadamente 32px, giro de 28° e escala 0.96–1.06; ida e volta completa em 7s (3.5s por direção). O movimento alterna os extremos sem rotação contínua de 360°. Desativar com `prefers-reduced-motion`. O controle de demonstração permite iniciar e pausar.
4. **Controles:** CTA inverte o tom em 160ms; link anima sublinhado em 140ms; card clareia a hairline em 180ms. O foco de teclado permanece estável e visível.
5. **FAQ e rodapé:** FAQ usa comportamento nativo de `<details>` sem transição de altura. Rodapé permanece estático.

**Evitar:** parallax, scroll hijacking, cursor-following, zoom/deslocamento de cards, contadores, texto digitado, autoplay de vídeo, pulso de CTA, flashes de gradiente e animações contínuas em vários elementos.

**Acessibilidade e fallback:** em `prefers-reduced-motion: reduce`, retirar deslocamentos, órbita e rolagem suave; transições podem ser reduzidas a `0.01ms`. Nunca ocultar conteúdo antes de confirmar que o observer está ativo. O HTML de referência tem uma página própria com amostras reproduzíveis: [11-design-system-tiberio-opcao-2-animacoes.html](11-design-system-tiberio-opcao-2-animacoes.html).

### 10. CSS variables

```css
@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap');

:root {
  color-scheme: dark;
  --color-obsidian: #000000;
  --color-bone: #f6f6f4;
  --color-slate: #7d7d7d;
  --color-paper: #ffffff;
  --color-char: #1a1a1a;
  --gradient-solstice: linear-gradient(90deg, #feed7a 0%, #ff8400 48.96%, #df91f7 100%);
  --color-text-on-dark: #f6f6f4;
  --color-text-on-light: #000000;
  --color-muted-on-dark: rgba(246, 246, 244, .70);
  --color-muted-on-light: #7d7d7d;
  --color-hairline-dark: rgba(246, 246, 244, .18);
  --color-hairline-light: rgba(0, 0, 0, .18);

  --font-heading: 'Cabinet Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --weight-heading: 400;
  --weight-body: 400;

  --container-max: 1200px;
  --padding-x-m: 20px;
  --padding-x-d: 44px;
  --section-py-m: 64px;
  --section-py-d: 80px;
  --card-gap: 20px;
  --card-padding: 24px;

  --radius-input: 4px;
  --radius-link: 12px;
  --radius-card: 16px;
  --radius-panel: 38px;
  --radius-pill: 100px;

  --border-dark: 1px solid var(--color-hairline-dark);
  --border-light: 1px solid var(--color-hairline-light);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --motion-fast: 140ms;
  --motion-standard: 160ms;
  --motion-control: 160ms;
  --motion-card: 180ms;
  --motion-reveal: 460ms;
  --motion-hero: 520ms;
  --motion-stagger: 70ms;
  --motion-distance: 12px;
  --motion-orbit: 3.5s;
  --ease-standard: ease-out;
  --ease-editorial: cubic-bezier(.22, .61, .36, 1);
}
```

## B. Wireframe — nove faixas

### 1. Navegação e hero — Obsidian

- **Narrativa:** posiciona Tibério como autoridade pessoal no mercado fitness; abre com uma frase forte e sem promessa numérica.
- **Dúvida:** “quem é e qual é a área de atuação?”
- **Composição desktop:** nav transparente 64px; H1 Cabinet 80px centralizado, linha 1.0; abaixo, parágrafo DM Sans 16px/400 alinhado à esquerda dentro de uma coluna de até 520px; CTA ghost; link de palestra como secundário. Retrato real menor ao lado/abaixo do bloco de apoio. Forma 3D Solstice flutua abaixo do H1, sem cobrir texto.
- **Mobile:** H1 48px centralizado; corpo e CTAs empilhados; forma Solstice reduzida; retrato após CTAs.
- **Fundo:** Obsidian liso como base; opcionalmente `11-broad-horizontal-atmosphere.webp` com overlay discreto numa versão mais atmosférica. Usar a órbita Solstice apenas se os focos visuais não competirem.
- **Imagens:** `01-tiberio-retrato-hero.webp` (tipo 01; 4:5) e `06-orbita-solstice-hero.webp` (tipo 07; PNG/WebP com fundo transparente, elemento 3D isolado).
- **CTA:** consultoria em outline Bone; palestra/workshop como link Bone.
- **Override split:** não se aplica; H1 não está em coluna split.

### 2. Território + consultoria/advisory — Bone

- **Narrativa:** explica a conexão entre marketing, crescimento, produto e tecnologia aplicada ao fitness.
- **Dúvida:** “em que tipo de decisão posso conversar com Tibério?”
- **Desktop:** banda Bone; heading Cabinet 61px Obsidian; texto DM Sans 16px; cards de tema em duas/três colunas com raio 16px e bordas finas.
- **Mobile:** coluna única, cards empilhados; CTA preenchido preto no fim da banda.
- **Imagem:** nenhuma; os temas já têm função em texto. Sem diagramas genéricos.
- **CTA:** preenchido Obsidian, texto Bone — `CONVERSAR SOBRE CONSULTORIA`.
- **Pendência:** retirar temas que não forem parte da oferta real.

### 3. Como começa — Obsidian

- **Narrativa:** organiza a primeira conversa em passos e reduz a incerteza sobre o contato.
- **Dúvida:** “o que acontece quando eu pedir uma conversa?”
- **Desktop:** três passos numerados em faixa horizontal, cada um separado por hairline Bone; sem stats bar nem números de desempenho.
- **Mobile:** passos em coluna, separadores horizontais.
- **Imagem:** nenhuma; número tipográfico.
- **CTA:** opcional, ghost no fim da faixa.
- **Pendência:** o processo é proposta visual; confirmar se a primeira conversa é paga, prazo e triagem.

### 4. Palestras e workshops — Obsidian/Grain (faixa de destaque)

- **Narrativa:** apresenta a contratação secundária junto a um registro real de palco.
- **Dúvida:** “quais temas posso levar ao meu evento/equipe?”
- **Desktop:** faixa escura grainy opcional; heading e temas à esquerda, fotografia horizontal real à direita (50/50) em card Bone/Paper com raio 16px.
- **Mobile:** texto antes da foto; imagem 4:3 integral e sem recorte de contexto importante.
- **BG:** composição `07-clouded-ember-teal.webp` com overlay escuro para manter a leitura; foto em superfície Paper/Bone separada.
- **Imagem:** `02-tiberio-palestra-palco.webp` (tipo 01; 4:3).
- **CTA:** Ghost Pill Bone — `PEDIR PROPOSTA DE PALESTRA OU WORKSHOP`.
- **Pendência:** selecionar foto real, validar eventos/temas/duração/formato/disponibilidade.

### 5. Experiência — Obsidian

- **Narrativa:** mostra passagens profissionais como contexto, não como promessa de resultado.
- **Dúvida:** “que experiência sustenta essa perspectiva?”
- **Composição:** linha de credibilidade textual — Pacto, Holus, EMA e eventos — separada por hairlines; nada de logos de clientes, ratings ou métricas.
- **Mobile:** itens em lista vertical.
- **Imagem:** nenhuma.
- **BG:** Obsidian; texto Bone.
- **Pendência:** não exibir datas de formação ou duração total na Pacto até harmonizar as fontes; não sugerir que as organizações contrataram a consultoria pessoal.

### 6. Portfólio — Obsidian/Char

- **Narrativa:** demonstra atividade de construção por meio de projetos próprios.
- **Dúvida:** “o que Tibério constrói?”
- **Desktop:** três cards Char 16px/24px em grade de três; screenshots em painéis Paper internos; título/descrição/CTA terciário.
- **Mobile:** um card por linha; screenshot 16:10 preservado.
- **Imagens:** `03-portfolio-fitius-ui.webp`, `04-portfolio-refr-ui.webp`, `05-portfolio-resumogrupo-ui.webp` — tipo 02.
- **CTA:** links terciários para as páginas próprias.
- **Cuidados:** não chamar de case de consultoria nem exibir dados operacionais, interface fictícia ou resultados sem prova.

### 7. Público + perguntas frequentes — Bone

- **Narrativa:** qualifica o visitante e esclarece contratação.
- **Dúvida:** “esse trabalho é adequado para minha empresa?”
- **Desktop:** área de público em uma coluna e FAQ disclosure em outra; linhas escuras finas.
- **Mobile:** público primeiro; perguntas em lista expansível.
- **Imagem:** nenhuma.
- **BG:** Bone com texto Obsidian; superfície Slate só em metadados/apoio.
- **CTA:** link em Obsidian para advisory ou palestra, conforme intenção.
- **Pendência:** escopo, preço/orçamento, localização/formato e resposta a contato ainda precisam de confirmação.

### 8. CTA final — Obsidian

- **Narrativa:** fecha a página com duas rotas, mantendo consultoria como prioridade.
- **Composição:** heading Cabinet 61px; corpo curto em coluna até 520px; CTA ghost primário e link secundário; forma Solstice não se repete.
- **Mobile:** headline 36px, botões empilhados, largura do container.
- **Imagem:** nenhuma.
- **BG:** Obsidian.
- **CTA:** consultoria em outline; palestras/workshops em link.
- **Sem:** escassez, contador, garantia ou urgência.

### 9. Rodapé — Char

- **Composição:** nome em Bone, links de navegação/social, contato e políticas confirmadas; separação por hairline.
- **BG:** `#1a1a1a`.
- **Mobile:** links empilhados e áreas de toque de pelo menos 44px.
- **Imagem:** nenhuma.
- **Pendência:** confirmar URL de LinkedIn/Instagram, e-mail e dados legais.

## C. Inventário e briefings de imagem

### Inventário

| Arquivo | Faixa | Tipo | Função | Estado |
|---|---:|---:|---|---|
| `01-tiberio-retrato-hero.webp` | 1 | 01 — fundador/time | Tornar a marca pessoal reconhecível | Retrato real em alta resolução pendente |
| `02-tiberio-palestra-palco.webp` | 4 | 01 — fundador/time | Demonstrar presença de palco real | Foto real/contexto/autorização pendentes |
| `03-portfolio-fitius-ui.webp` | 6 | 02 — produto/screenshot | Mostrar projeto próprio | Captura real atual, dados seguros |
| `04-portfolio-refr-ui.webp` | 6 | 02 — produto/screenshot | Mostrar projeto próprio | Captura real atual, dados seguros |
| `05-portfolio-resumogrupo-ui.webp` | 6 | 02 — produto/screenshot | Mostrar projeto próprio | Captura real atual, dados de demo autorizados |
| `06-orbita-solstice-hero.webp` | 1 | 07 — atmosfera/contexto | Único ponto de cor e atmosfera da versão escura | Ativo 3D a produzir; só usar no hero |

**Contagem:** 6 imagens em 3 faixas; tipo 01: 2, tipo 02: 3, tipo 07: 1, demais tipos: 0. A orbita é uma forma 3D criada a partir da referência, não um gráfico de dados.

### Briefing 01 — `01-tiberio-retrato-hero.webp`

- **Sujeito:** o próprio Tibério; usar fotografia autêntica, preservar identidade e aparência.
- **Composição:** retrato editorial peito/cintura para cima; rosto nítido; margem de respiro; proporção 4:5.
- **Luz:** direcional suave, contraste médio, balanço neutro-quente e fundo escuro limpo.
- **Paleta:** preto, grafite e luz natural; sem adereços criados, logo ou texto.
- **PROMPT (EN):** “Photograph the real Tibério Lemes for a dark editorial personal-brand website. Use an authentic chest-up portrait, relaxed direct eye contact, a deep near-black background, one soft directional key light with natural skin detail, controlled medium contrast, neutral-warm skin tones, and generous negative space. Preserve his actual identity, face, proportions, clothing, and expression. No generated face, no props, no logo, no text, no artificial colored light, no heavy retouching.”
- **Alternativa real:** produzir retrato fotográfico original; exportar pelo menos 1600px no lado maior. O avatar atual 160×157px fica limitado a miniatura.

### Briefing 02 — `02-tiberio-palestra-palco.webp`

- **Sujeito:** Tibério em palco/workshop real, evento identificável e autorizado.
- **Composição:** horizontal 4:3; Tibério permanece legível, com parte do contexto de sala/palco.
- **Tratamento:** preservar cores e sinalização originais; correção leve de exposição/balanço; sem inventar plateia ou logotipo.
- **PROMPT DE EDIÇÃO (EN):** “Retouch this authentic photograph of Tibério Lemes speaking at a real event for a dark editorial website. Preserve the real person, face, clothing, stage, audience, logos, and event context exactly. Apply restrained exposure and white-balance correction only. Do not generate or replace any person, venue, signage, stage, or event detail.”
- **Alternativa real:** selecionar foto original, validar crédito, data e permissão de uso.

### Briefings 03–05 — screenshots dos projetos

Capturar telas reais/atuais de Fitius, Refr e ResumoGrupo. Composição 16:10 ou 16:9, interface legível dentro de card Paper; retirar apenas o chrome do browser se necessário. Não gerar produto por IA, não exibir dados privados, não colocar métricas ou clientes inventados.

**Prompt de captura (EN):** “Capture the current authentic product interface for a portfolio card. Preserve the real UI, wording, proportions, and approved demo data. Do not fabricate dashboards, users, customer logos, metrics, or business outcomes. Redact private operational or personal data before export.”

### Briefing 06 — `06-orbita-solstice-hero.webp`

- **Tipo/função:** 07 — forma abstrata que identifica esta direção e cria um único ponto cromático no hero.
- **Composição:** objeto 3D orgânico/fluid, contorno irregular e elegante, ocupação pequena; fundo transparente; sem texto/logo.
- **Proporção/posição:** quadro 1:1 ou 4:3 transparente, abaixo/ao lado da headline; nunca atrás das letras; abaixo de 20% da área do viewport.
- **Luz/paleta:** highlight pontual sobre Obsidian; gradiente `#feed7a → #ff8400 → #df91f7`, baixa emissão/glow, borda suave; sem outras cores.
- **PROMPT (EN):** “Create a single refined 3D abstract organic orb for a luxury editorial website, isolated on transparent background. Apply only a smooth warm gradient from soft yellow (#feed7a) through orange (#ff8400) to muted violet (#df91f7), with a restrained studio highlight and sculpted soft reflections. Keep the object compact, elegant, and visually quiet; no text, no symbols, no extra objects, no background, no neon glow, no interface elements.”
- **Alternativa:** render 3D original em WebP/AVIF com transparência; não substituir por gradiente em botão nem repetir em todas as seções.

## D. Mapa de backgrounds

| Faixa | Fundo | Tratamento/grain | Ritmo |
|---|---|---|---|
| 1 Nav + hero | `#000000` | Sólido por padrão; opção `11-broad-horizontal-atmosphere.webp` com overlay; orb só se a composição respirar | Abre escuro, tipo grande |
| 2 Território + advisory | `#f6f6f4` | Sólido; sem grain | Inversão clara |
| 3 Como começa | `#000000` | Sólido; hairlines | Retorno escuro |
| 4 Palestras/workshops | `#000000` | `07-clouded-ember-teal.webp` com overlay; foto real em painel Bone/Paper | Faixa escura de destaque |
| 5 Experiência | `#000000` | Sólido; linha fina de separação | Faixa de autoridade |
| 6 Portfólio | `#000000` | Cards `#1a1a1a`; screenshot interior `#ffffff` | Continuidade escura com mudança tonal |
| 7 Público + FAQ | `#f6f6f4` | Sólido; hairlines Obsidian | Banda clara para leitura |
| 8 CTA final | `#000000` | Sólido ou `04-edge-light-left-corners.webp` com overlay; sem repetição da orb | Fecho de ação |
| 9 Rodapé | `#1a1a1a` | Sólido; hairline Bone | Fecho tonal |

Grain não é aplicado de forma contínua: usar poucas faixas de destaque, mantendo as outras bandas lisas. As variações claras podem compor uma faixa Bone alternativa, com texto Obsidian; as saturadas precisam de contraste validado. A forma 3D Solstice continua sendo um ativo separado no hero; sua deriva diagonal de 32px em 7s ocorre apenas ali e respeita `prefers-reduced-motion`. As duas galerias estão em [12-biblioteca-backgrounds-grainy.html](12-biblioteca-backgrounds-grainy.html) e [13-biblioteca-backgrounds-grainy-cores.html](13-biblioteca-backgrounds-grainy-cores.html).

## E. Responsividade e acessibilidade

- Container máximo 1200px; margens fluidas e sem overflow horizontal.
- H1 48px mobile / 80px desktop; heading size reduz antes de colidir com a margem.
- CTAs mínimo 48px de altura e largura total no mobile; foco de teclado visível em Bone no fundo escuro e Obsidian no fundo claro.
- Textos devem manter contraste suficiente em Obsidian/Bone; texto auxiliar escuro não pode depender só de opacidade baixa.
- FAQ com controles nativos acessíveis; imagens reais com alt factual; screenshots identificados como projetos próprios.
- Não comunicar estados só por cor; estados de formulário usam símbolo e texto, sem paleta semântica nova.
- Respeitar `prefers-reduced-motion`; órbita decorativa pode percorrer 32px na diagonal, girar 28° e variar a escala entre 0.96 e 1.06; ida e volta em 7s; sem autoplay de mídia.

## Resumo final

- **Faixas:** 9; **com imagem:** 3; **com CTA:** 5 áreas (navegação, hero, advisory, palestras, CTA final).
- **Barra CTA fixa:** não. **Barra de escassez:** não.
- **Imagem:** 6 ativos planejados — 2 tipo 01, 3 tipo 02 e 1 tipo 07.
- **Títulos:** Cabinet Grotesk 400; **corpo/UI:** DM Sans 400/500.
- **Fontes:** [Fontshare Cabinet Grotesk](https://www.fontshare.com/fonts/cabinet-grotesk) e Google Fonts DM Sans; sem arquivos de fonte copiados para o projeto.
- **Alertas CSS:** gradiente só na orb; sem shadow; hero não split; respeitar foco, motion tokens e `prefers-reduced-motion`.
- **Pendências antes de construir a landing:** retrato e foto de palco reais; screenshots atuais e autorizados; harmonizar cronologia profissional; definir canais comerciais/escopo conforme os marcadores da copy.