# Design system de Tibério Lemes — direção para validação **Data:** 20 de setembro de 2026
**Fase:** 2 — direção visual aprovada por Tibério em 20 de setembro de 2026
**Skill:** `02-pagina-vendas-02-design-system.md`, lida sem alterar o original
**Referência solicitada:** DESIGN_SYSTEM_TIBERIO_OK.md (referência local não incluída neste repositório)
**Conteúdo de destino:** [05-copy-pagina-tiberio-lemes.md](05-copy-pagina-tiberio-lemes.md) ## Leitura e adaptação A referência enviada é uma especificação visual completa do produto Gleap, não uma captura de uma landing page. Ela documenta layout e componentes: canvas papel quente, textos em grafite, cartões brancos e em pedra, botões escuros em formato de cápsula, hero centralizado, largura máxima de 1200px e seções com respiro amplo. Para a página pessoal de Tibério, proponho preservar essa linguagem visual e adaptar a narrativa à venda de consultoria/advisory e palestras/workshops. O hero não será liderado por um dashboard nem haverá faixa de logos de clientes, grade de preços ou cartões de planos. A experiência profissional e os projetos próprios serão apresentados como contexto, sem sugerir que são cases de clientes. O `DESIGN.md` já existente na raiz de `TiberioLemes-Site` descreve outro sistema, inspirado no Cal.com e aplicado à página de ResumoGrupo. Ele não foi combinado com esta direção porque a referência desta tarefa é o arquivo indicado por Tibério. ## Rascunho para validação ```text ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DESIGN SYSTEM — RASCUNHO PARA VALIDAÇÃO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LAYOUT: editorial centrado, com módulos em 1–2 colunas / container 1200px / padding 24px mobile, 48px desktop / seções 56px mobile, 80px desktop / 10 seções de conteúdo + navegação e rodapé TIPOGRAFIA: DM Sans 400 / títulos 44–64px, corpo 16–19px / ajuste híbrido: linguagem da referência + substituição tipográfica aprovada PALETA: bg #edede8 / texto #292929 / primary e CTA #141414 / superfície #ffffff / superfície secundária #dbdbd2 origem: referência fornecida; 5 cores-base LUZ: autoridade acessível e calma / luz difusa, neutra-quente / calibração derivada da atmosfera de papel da referência COMPONENTES: CTA 44px h / radius 200px / cor #141414 / cards radius 12px / sem sombra / padding 18px / ícones Phosphor Outline 20px quando ajudarem a leitura / hover curto de cor; sem animações de scroll ou efeitos especiais IMAGENS: proposta de 5 ativos em 3 módulos | tipos: 01:2 02:3 03:0 04:0 05:0 06:0 07:0 08:0 BACKGROUNDS: linho → cartões brancos → faixas pedra → rodapé grafite / sem gradientes, grain, parallax ou efeitos flutuantes FONTES PROIBIDAS EVITADAS: ✓ (DM Sans; sem Inter, Poppins, Roboto, Arial ou system-ui) CONFLITOS: a referência é SaaS e privilegia screenshots de produto e logos de clientes; aqui, a pessoa é Tibério. Retrato e fotos reais de palco entram como prova de presença; screenshots de projetos ficam abaixo e identificados como portfólio. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ``` ## Como a página seria distribuída 1. **Navegação e hero — linho:** marca textual, âncoras da página, headline centralizada, CTAs duplos e espaço para um retrato real em alta resolução. 2. **Território e consultoria — branco/linho:** breve introdução e cartões para as frentes de advisory, sem promessas de resultado ou escopo ainda não confirmado. 3. **Processo — pedra:** etapas apresentadas como cartões numerados, sem ilustração independente. 4. **Palestras e workshops — branco:** temas em cartões e uma foto real de Tibério no palco, se disponível e aprovada. 5. **Experiência — linho:** trajetória editorial/timeline, sem logotipos de clientes ou barra de confiança. 6. **Portfólio — branco:** três cartões para Fitius, Refr e ResumoGrupo, com capturas reais dos produtos e links separados. É uma seção de projetos, não de provas de resultado da consultoria. 7. **Público e FAQ — linho/pedra:** texto e componentes acessíveis, sem imagens. 8. **CTA final — pedra:** retomada das duas rotas de contato; CTA principal em grafite. 9. **Rodapé — grafite:** links pessoais e informações legais a confirmar. As 10 seções de conteúdo da copy podem ser agrupadas em oito faixas, mais o rodapé, totalizando as nove faixas listadas acima. A contagem de 5 imagens é um plano para a página, não um inventário de arquivos existentes: 2 imagens tipo 01 (retrato e palco) e 3 imagens tipo 02 (capturas dos produtos). Na pasta do site existe `tiberio-avatar.png`, em 160×157px; serve como avatar pequeno, mas não tem resolução adequada para uma imagem de hero em desktop. Retrato e foto de palco em tamanho maior ainda precisam ser fornecidos ou produzidos. ## Pontos da direção que precisam de validação - Se a base linho/grafite/pedra e os botões cápsula representam a identidade desejada para a marca pessoal de Tibério. - Se DM Sans é a tipografia aprovada para substituir Switzer: DM Sans aparece como substituto na referência e é permitida pela skill; Switzer não consta entre as fontes permitidas na skill. - Se o acento verde `#4cc02b` deve ficar fora da paleta principal. A referência o reserva a estados/checkmarks; não há um estado de produto apropriado nesta página e a skill limita a paleta visual a cinco cores-base. - Se a proposta de usar retrato no hero, foto de palco e capturas de portfólio corresponde à intenção visual. A imagem atual disponível é apenas um avatar pequeno. - Se a estrutura agrupada em nove faixas pode orientar o wireframe final, preservando os onze módulos da copy. ## Entrega da Fase 3 Tibério aprovou esta direção. A especificação completa está em [07-design-system-tiberio-lemes.md](07-design-system-tiberio-lemes.md) e a versão navegável em [08-design-system-tiberio-lemes.html](08-design-system-tiberio-lemes.html). Os arquivos detalham tokens/CSS variables, componentes, wireframe, backgrounds e briefings. Os ativos fotográficos e screenshots ainda precisam ser fornecidos/capturados antes da implementação final da página. ## Adendo — Opção 2 aprovada **Data:** 20 de setembro de 2026
**Aprovação:** Tibério aprovou a Opção 2, com Cabinet Grotesk nos títulos e direção escura/editorial inspirada em `DESIGN_CLYDE.md`. A Opção 1 permanece preservada para comparação. A recomendação de movimento para esta identidade é editorial e discreta: entrada única no hero, revelações curtas ao rolar, feedback tonal em botões/links/cards e deriva claramente perceptível (32px na diagonal, giro de 28° e ida e volta em 7s) para a órbita Solstice, com suporte a movimento reduzido. O sistema completo, com controles para reproduzir exemplos, está em [11-design-system-tiberio-opcao-2-animacoes.html](11-design-system-tiberio-opcao-2-animacoes.html). A especificação geral atualizada está em [09-design-system-tiberio-opcao-2-cabinet.md](09-design-system-tiberio-opcao-2-cabinet.md), com índice navegável em [10-design-system-tiberio-opcao-2-cabinet.html](10-design-system-tiberio-opcao-2-cabinet.html). ## Adendo — fundos grainy-gradient **Data:** 20 de setembro de 2026
**Pedido:** acrescentar à Opção 2 o estilo da referência `Grainy-Gradient-Texture-Background-Graphics-24101267-1.jpg` para fundos e composições, com uma biblioteca de cerca de 20 ativos. A direção combina com Cabinet Grotesk e a galeria escura quando cobre queimado e azul petróleo permanecem em imagens atmosféricas, sem se tornarem cores de interface. Foram geradas 20 composições novas com grão e luz difusa, salvas como WebP em `assets/atmosferas-grainy/` (aprox. 4,5 MB no total). A galeria com visualização e download está em [12-biblioteca-backgrounds-grainy.html](12-biblioteca-backgrounds-grainy.html). A especificação e o preview principal foram atualizados em [09-design-system-tiberio-opcao-2-cabinet.md](09-design-system-tiberio-opcao-2-cabinet.md) e [10-design-system-tiberio-opcao-2-cabinet.html](10-design-system-tiberio-opcao-2-cabinet.html). Recomendação: aplicar em até 2–3 faixas escuras (hero alternativo, palestras/workshops e/ou CTA final), usar overlay para proteger contraste e preservar bandas Bone lisas. Os originais gerados continuam na pasta padrão do imagegen; a fonte de estilo fornecida não foi alterada. ### Segunda série — variações cromáticas Tibério pediu 20 fundos adicionais com mais variações de cor, incluindo composições claras. Foram gerados 20 novos WebP e preservada a Série 1. A Série 2 está em `assets/atmosferas-grainy-variacoes/` (aprox. 4,1 MB), com 14 paletas claras/pastéis e 6 vibrantes. A galeria navegável, com instruções de contraste e links de download, está em [13-biblioteca-backgrounds-grainy-cores.html](13-biblioteca-backgrounds-grainy-cores.html). O mapa principal agora mostra exemplos das duas famílias e links para as duas bibliotecas. A pasta de trabalho contém 40 fundos no total, cerca de 8,7 MB; as cores continuam apenas em imagens atmosféricas, sem novos tokens de interface. O arquivo original da referência e a Série 1 permanecem intactos.