01 · Paleta

Cinco tons e uma forma de cor.

A interface fica quase acromática. Solstice Gradient aparece somente na forma 3D do hero; cobre e azul petróleo ficam confinados à camada artística dos fundos grainy.

02 · Tipografia

Cabinet nos títulos.
DM Sans no corpo.

Cabinet Grotesk substitui Recoleta e DM Sans fica como corpo/UI. O título usa 400, tamanho editorial e tracking negativo.

Import Cabinet Grotesk pelo CSS API oficial do Fontshare. O endpoint consultado serviu os pesos 400, 500, 700 e 800; 400 domina nos títulos. A fonte não está copiada para esta pasta.

03 · Geometria

Espaço de galeria.

04 · Biblioteca

Componentes

Ícones não são exigidos na página. Se necessários: Phosphor Outline 20px, sem uso decorativo; sem Lucide e sem emoji. FAQ com elementos nativos ou disclosure acessível.

05 · Motion system

Movimento com intenção.

A recomendação para esta identidade é uma entrada curta no hero, revelações leves ao rolar e respostas rápidas nos controles. A órbita pode fazer um percurso diagonal de cerca de 32px, giro de 28° e ida e volta em 7s, respeitando a preferência de movimento reduzido.

06 · Wireframe

Nove faixas.

O CSS abaixo mostra uma prévia de hero do sistema. O mapa alterna bandas lisas com até três composições grainy escuras; a página final mantém as ofertas de Tibério e não copia telas de produto ou métricas da referência.

Sobre Tibério Lemes

Marketing, crescimento e tecnologia para o mercado fitness.

Consultoria/advisory como oferta principal; palestras e workshops como caminho secundário. O escopo comercial ainda precisa ser confirmado.

Conversar sobre consultoriaPedir proposta para evento

Forma Solstice no hero · imagem real a fornecer

07 · Ritmo

Fundos sólidos e grain seletivo.

Ritmo: alternar bandas lisas com poucas faixas de atmosfera. A Série 1 é escura; a Série 2 tem 14 opções claras/pastéis e 6 vibrantes. Use texto Obsidian em fundos claros e overlay onde texto Bone precise de contraste. Nenhuma cor nova entra nos componentes. Série 1 · 20 fundos · Série 2 · 20 variações de cor.

08 · Inventário

Imagens e briefings

Seis ativos previstos para a página principal: duas fotos reais, três screenshots verdadeiros e uma forma 3D colorida. A família de fundos grainy é uma biblioteca complementar separada.

Tipo 01 · Retrato01-tiberio-retrato-hero.webp

Retrato real 4:5; o avatar atual é apenas amostra pequena.

Foto real de palco
arquivo pendente

Tipo 01 · Palestra02-tiberio-palestra-palco.webp

Registro real 4:3 com contexto confirmado.

Screenshot real
Fitius

Tipo 02 · Projeto03-portfolio-fitius-ui.webp

Interface atual, dados protegidos.

Screenshot real
Refr

Tipo 02 · Projeto04-portfolio-refr-ui.webp

Interface/página atual, sem métricas.

Screenshot real
ResumoGrupo

Tipo 02 · Projeto05-portfolio-resumogrupo-ui.webp

Demo autorizada; sem conversas reais.

Tipo 07 · Atmosfera06-orbita-solstice-hero.webp

Forma 3D do hero; a amostra HTML é só simulação CSS.

Biblioteca de fundos: 40 composições WebP em duas famílias. A Série 1 fica em assets/atmosferas-grainy/; a Série 2, com paletas claras e vibrantes, em assets/atmosferas-grainy-variacoes/. São imagens atmosféricas, não novos tokens de interface. Série 1 · Série 2.

09 · Acessibilidade

Alto contraste, sem depender da cor.

Sem métricas, depoimentos, logos de clientes, datas divergentes, escassez, preço ou escopo comercial não confirmado. Imagens de produto não são cases.

10 · Implementação

CSS variables

@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%);
  --font-heading: 'Cabinet Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --container-max: 1200px;
  --padding-x-m: 20px;
  --padding-x-d: 44px;
  --section-py-m: 64px;
  --section-py-d: 80px;
  --card-padding: 24px;
  --card-gap: 20px;
  --radius-input: 4px;
  --radius-link: 12px;
  --radius-card: 16px;
  --radius-panel: 38px;
  --radius-pill: 100px;
  --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);
}