Posicionamento Sexy / Fase 3 Baixar Opção 2 .md · Abrir copy da página

Sistema visual · Marca pessoal

Design System — Tibério Lemes

Uma linguagem de papel quente, superfícies neutras e grafite para a página de consultoria/advisory e palestras/workshops de Tibério Lemes.

Marca principalTibério Lemes. O portfólio aparece depois das ofertas.

Ação principalConversar sobre consultoria/advisory.

Ação secundáriaPedir proposta de palestra ou workshop.

Direção aprovada. Referência baseada em Gleap — Design System Tiberio OK. A referência era um produto SaaS; esta adaptação trata Tibério como a figura central e mantém Fitius, Refr e ResumoGrupo como projetos de portfólio.

01 · Paleta

Cores

Cinco cores-base. A hierarquia vem de superfícies e contraste, sem efeitos decorativos.

Linen Canvas#edede8

Frosted White#ffffff

Warm Stone#dbdbd2

Graphite Text#292929

Graphite Action#141414

Texto sobre CTA
#ffffff sobre #141414

Texto auxiliar
Graphite Text com 68% de opacidade

Bordas usam Warm Stone. O verde #4cc02b da referência foi deixado fora desta paleta porque a página não tem estados de produto que precisem dele.

02 · Voz visual

Tipografia

DM Sans substitui Switzer, mantém o desenho leve e é permitida pela skill usada.

Display · 64 / 1.0Marketing, crescimento e tecnologia.

H2 · 45 / 1.2Uma trajetória no mercado fitness.

H3 · 27 / 1.3Consultoria e advisory

Body · 19 / 1.4Conecto experiência em marketing, produto e tecnologia às decisões de empresas fitness.

Body · 16 / 1.5Texto corrido com leitura confortável e tracking normal.

Caption · 14 / 1.5Legenda, contexto e ajuda.

Micro · 12 / 1.6Sobre Tibério Lemes

Papel	Mobile	Desktop	Line-height
H1 hero	44px	64px	1.0
H2	32px	45px	1.2
H3	27px	32px	1.3
H4	23px	27px	1.3
Body large / body	16–19px	19px / 16px	1.4 / 1.5
Caption / micro	14px / 12px	14px / 12px	1.5 / 1.6

Pesos: 400 padrão; 500 para labels/estado selecionado; 600 só quando um micro-rótulo exigir ênfase. H1 centralizado, sem override de hero split.

03 · Ritmo

Layout e espaço

Geometria da referência, com ajustes para a leitura mobile da página pessoal.

Medidas base

Container máximo: 1200px. Padding horizontal: 24px mobile / 48px desktop. Seção: 56px mobile / 80px desktop.

Unidade base de espaço: 6px. Gap padrão entre cards: 18px.

Escala de espaçamento

6pxinline

12pxcompacto

18pxcard

24pxgrupo

48–96pxseção

138pxrespiro especial

Raio e profundidade

Botões: 200px · cards/inputs/imagens: 12px · avatar: 9999px · painéis pequenos: 6px. Cards sem sombra. A profundidade vem da transição entre linho, branco e pedra.

04 · Biblioteca

Componentes

Exemplos visuais da página. Os botões aqui são demonstrações; o destino real dos CTAs precisa estar configurado.

Botões

Conversar sobre consultoria Palestra ou workshop Conhecer projetos

Primary 44px · cápsula 200px · padding horizontal 18px. Secondary pedra com 24px. Terciário sem preenchimento.

Card de conteúdo

Marketing e crescimento

Card branco, raio 12px, padding 18px e sem sombra. O texto final depende do escopo comercial confirmado.

Etapas numeradas

Contexto

Conhecer o desafio.

Encaixe

Avaliar formato.

Próximo passo

Formalizar escopo.

Campo de contato opcional

E-mail

Input 48px · fundo branco · borda Warm Stone · raio 12px.

Exemplo estático, não envia dados.

FAQ acessível

A consultoria é sobre o Fitius?

Não. Fitius, Refr e ResumoGrupo aparecem como projetos separados no portfólio.

Como contratar uma palestra?

Resposta final depende do canal, disponibilidade e condições confirmadas.

Hero de referência

Sobre Tibério Lemes

Marketing, crescimento e tecnologia para o mercado fitness.

Consultoria/advisory e palestras/workshops.

Conversar sobre consultoria Pedir proposta

Ícones

Phosphor Outline 20px, monoline, em Graphite Text. A página não exige ícones; prefira títulos e números. Não usar Lucide, emoji ou pictogramas decorativos.

05 · Arquitetura

Wireframe da página

Nove faixas agrupam as dez seções de conteúdo e o rodapé da copy.

01Nav + heroCanvas linho; headline e CTAs centralizados; retrato real abaixo do texto.

02Território + advisoryIntrodução e cards de temas em uma grade editorial; CTA principal.

03Como começaTrês etapas numeradas em superfície pedra, sem ilustração independente.

04Palestras/workshopsTexto e temas à esquerda; foto real de palco à direita; CTA secundário.

05ExperiênciaLinha do tempo editorial, sem datas/cargos até harmonização.

06PortfólioTrês cards com screenshot real de Fitius, Refr e ResumoGrupo.

07Público + FAQAdequação, condições e perguntas em lista/accordion acessível.

08CTA finalDuas rotas, consultoria primeiro; sem urgência ou escassez.

09RodapéGrafite, links pessoais e informações legais confirmadas.

Grid

1 / 2 / 3 colunas

Cards empilham no mobile; portfolio pode usar três colunas no desktop.

Conteúdo

Leitura editorial

Um CTA principal; palestra/workshop como rota secundária.

Prova

Sem logos de cliente

Experiência em texto e projetos próprios abaixo das ofertas.

06 · Alternância

Mapa de backgrounds

Ritmo papel → branco → pedra → branco → papel → branco → papel/pedra → pedra → grafite.

Canvas linho
#edede8 · hero/experiência

Superfície branca
#ffffff · consultoria/palestra/portfolio

Pedra
#dbdbd2 · processo/CTA

Fecho grafite
#141414 · rodapé

Grain e gradiente
Não usar; 0% grain.

Grafismos
Sem floating, parallax ou formas decorativas.

07 · Argumento visual

Imagens e briefings

Cinco ativos planejados: dois registros reais de Tibério e três capturas reais dos produtos próprios.

Retrato do hero · Tipo 0101-tiberio-retrato-hero.webp

Retrato real 4:5, luz difusa e fundo neutro. O avatar atual tem 160×157px; falta foto maior.

Foto real de Tibério palestrando
Arquivo a fornecer/selecionar

Foto de palco · Tipo 0102-tiberio-palestra-palco.webp

Registro real, 4:3, com evento e contexto confirmados.

Screenshot real do produto
Sem dados privados

Projeto Fitius · Tipo 0203-portfolio-fitius-ui.webp

Captura verdadeira; portfólio, não case de consultoria.

Screenshot real do produto
Sem dados privados

Projeto Refr · Tipo 0204-portfolio-refr-ui.webp

Captura atual da interface ou página pública.

Screenshot real do produto
Dados de demonstração

Projeto ResumoGrupo · Tipo 0205-portfolio-resumogrupo-ui.webp

Demo autorizada; não expor conversa real de WhatsApp.

Brief 01 · Retrato real de Tibério

Foto editorial real, peito/cintura para cima, expressão natural, olhar próximo à câmera, fundo linho ou neutro, luz natural difusa, contraste baixo-médio e pele sem retoque pesado. Proporção 4:5; entregar original com pelo menos 1600px no lado maior.

Prompt de produção: “Photograph the real Tibério Lemes for an editorial personal-brand website. Use a natural, composed chest-up portrait with relaxed direct eye contact, soft diffused daylight, a quiet warm-neutral linen background, realistic skin texture, gentle shadows, restrained contrast, and generous clean space around the subject. Preserve his real identity and appearance. No generated face, no text, no logos, no props, no artificial glow, no heavy retouching.”

Brief 02 · Registro real de palestra

Selecionar original de palestra/workshop com data, evento, crédito e autorização confirmados. Preservar rosto, corpo, roupa, plateia, palco, sinalização e contexto; apenas corrigir exposição e balanço de branco. Proporção 4:3.

Prompt de edição: “Retouch this authentic event photograph of Tibério Lemes for a calm editorial website. Preserve the real face, body, clothing, audience, stage, signage, and event context exactly. Apply only restrained exposure and white-balance correction toward a natural neutral-warm tone. Do not create an audience, stage, logo, text, or event detail.”

Briefs 03–05 · Screenshots reais de projetos

Capturar a interface/página pública atual de Fitius, Refr e ResumoGrupo. Usar dados demo autorizados, retirar moldura de navegador se necessário e preservar o texto/interface real. Remover ou ocultar dados pessoais/operacionais. Não gerar UI por IA, métricas, clientes, campanhas ou resultados. Arquivos: 03-portfolio-fitius-ui.webp, 04-portfolio-refr-ui.webp, 05-portfolio-resumogrupo-ui.webp.

A contagem visual é Tipo 01: 2 · Tipo 02: 3 · Tipos 03–08: 0. Não usar logos de clientes, depoimentos, interfaces demonstrativas como caso real ou resultados numéricos.

08 · Qualidade

Acessibilidade e movimento

Interações discretas; conteúdo e ação devem ser compreensíveis sem depender da aparência.

Interação

CTA muda de cor em 160ms; links recebem sublinhado em 140ms. Sem reveal de scroll, parallax, contadores ou elementos flutuantes.

Acessibilidade

Foco visível, toque mínimo 44×44px, texto alternativo factual, FAQ acessível, redução de movimento respeitada. Não usar só cor para indicar sucesso ou erro.

Limites de conteúdo

Não inserir métricas de resultado, depoimentos, garantias, escassez, preços, logos de clientes ou escopo comercial não confirmado. As datas profissionais divergentes devem ser harmonizadas antes da linha do tempo.

09 · Implementação

CSS variables

Base técnica do sistema, pronta para copiar para a implementação da página.

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

:root {
  color-scheme: light;
  --color-bg: #edede8;
  --color-surface: #ffffff;
  --color-surface-secondary: #dbdbd2;
  --color-text: #292929;
  --color-action: #141414;
  --color-on-action: #ffffff;
  --color-muted: rgba(41, 41, 41, 0.68);
  --color-border: #dbdbd2;
  --font-heading: 'DM Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --container-max: 1200px;
  --padding-x-m: 24px;
  --padding-x-d: 48px;
  --section-py-m: 56px;
  --section-py-d: 80px;
  --card-gap: 18px;
  --radius-btn: 200px;
  --radius-card: 12px;
  --radius-input: 12px;
  --radius-image: 12px;
  --radius-avatar: 9999px;
  --border-default: 1px solid var(--color-border);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --focus-ring: 0 0 0 2px var(--color-action);
  --motion-fast: 140ms;
  --motion-standard: 160ms;
  --ease-standard: ease-out;
}

Referências do projeto

Copy da página · Posicionamento · Validação da direção · Design system de referência

Fonte DM Sans carregada do Google Fonts; o avatar embutido usa caminho local relativo. Sem scripts externos.