Tokens, escalas, componentes e specs prontos para a página de vendas, criativos e palco. Refinamento operacional do Brandbook v1.0.
A paleta é editorial-sóbria. Papel sustenta, Tinta carrega, Terracota chama. Tudo o mais é apoio.
Primária · Headlines
--ooc-tinta
HEX #14110D · RGB 20·17·13 · HSL 33·21%·6%
Headlines, corpo principal sobre Papel, wordmark "OUTRO CAMINHO".
Sobre Papel #F4EFE2 · ratio 16.4 · AAA ✓
Primária · Background
--ooc-papel
HEX #F4EFE2 · RGB 244·239·226 · HSL 42·48%·92%
Background base de toda landing, cards claros, hero principal.
Vs Tinta #14110D · ratio 16.4 · AAA ✓
Acento · CTA
--ooc-terracota
HEX #8A2A1E · RGB 138·42·30 · HSL 7·64%·33%
CTAs primários, eyebrows, destaques editoriais, marco 3 do logo.
Sobre Papel · ratio 7.2 · AAA ✓ · texto Papel sobre Terracota AA ✓
Acento · Apoio
--ooc-ocre
HEX #B4863C · RGB 180·134·60 · HSL 37·50%·47%
Acento secundário sobre Tinta (slides escuros), destaques discretos.
Sobre Papel · ratio 2.9 · usar só em superfícies escuras
Apoio · Ambiente
--ooc-musgo
HEX #4A5740 · RGB 74·87·64 · HSL 94·15%·30%
Confirmações, indicadores DO, fundo alternativo escuro vegetal.
Sobre Papel · ratio 7.6 · AAA ✓
Apoio · Editorial
--ooc-bronze
HEX #8A6A3A · RGB 138·106·58 · HSL 36·41%·38%
Detalhes editoriais, placas, capitulares, gradiente de pilar.
Sobre Papel · ratio 4.7 · AA ✓
Estrutural · Peso
--ooc-carvao
HEX #3A3530 · RGB 58·53·48 · HSL 30·9%·21%
Bordas pesadas, "IMERSÃO" do wordmark, header de tabela, inputs.
Sobre Papel · ratio 11.3 · AAA ✓
Background · Alt
--ooc-papel-env
HEX #ECE5D2 · RGB 236·229·210 · HSL 44·39%·87%
Background alternado entre seções, código inline, badges sutis.
Vs Tinta · ratio 15.0 · AAA ✓
Background · Card
--ooc-pergaminho
HEX #F8F3E3 · RGB 248·243·227 · HSL 44·63%·93%
Cards, áreas de respiro, blockquote, inputs, tags.
Vs Tinta · ratio 17.1 · AAA ✓
Linha · Divisor
--ooc-fio
HEX #C9BFA3 · RGB 201·191·163 · HSL 44·26%·71%
Linhas divisórias finas, bordas de card, separadores tipográficos.
Não usar como texto · ratio insuficiente sobre Papel
Papel → Pergaminho. Para fundos de seção que precisam respirar sem ruído.
Tinta → Carvão. Slides escuros, header dark, hero noturno.
Ocre → Bronze → Carvão. Pilares decorativos da identidade (ver capa do Brandbook).
Hero radial. Background do hero da landing — manchas suaves de Ocre + Musgo sobre Papel.
/* === Sistema de Cores === */ --ooc-tinta: #14110D; /* primária texto */ --ooc-tinta-leve: #2A241E; /* corpo secundário */ --ooc-papel: #F4EFE2; /* background base */ --ooc-papel-env: #ECE5D2; /* background alt */ --ooc-pergaminho: #F8F3E3; /* card claro */ --ooc-terracota: #8A2A1E; /* CTA / acento */ --ooc-terracota-c: #A4392B; /* hover do CTA */ --ooc-ocre: #B4863C; /* acento sobre escuro */ --ooc-musgo: #4A5740; /* sucesso/ambiente */ --ooc-bronze: #8A6A3A; /* placa editorial */ --ooc-carvao: #3A3530; /* bordas e peso */ --ooc-fio: #C9BFA3; /* divisores */ --ooc-fio-claro: #DDD4B8; /* divisor tênue */ --ooc-muted: #6E6450; /* texto meta/legenda */
Source Serif 4 carrega títulos. EB Garamond conduz corpo e leitura. JetBrains Mono marca meta-informação. Todas Google Fonts — zero custódia de licenças.
Inclua no <head>:
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2? family=Source+Serif+4:ital,wght@0,600;0,700;0,900;1,600& family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500& family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
/* === Famílias === */ --ooc-font-display: 'Source Serif 4', Georgia, serif; --ooc-font-body: 'EB Garamond', Georgia, serif; --ooc-font-meta: 'JetBrains Mono', Menlo, monospace; /* === Escala === */ --ooc-size-display: 6.0rem; /* 96px */ --ooc-size-h1: 3.5rem; /* 56px */ --ooc-size-h2: 2.625rem; /* 42px */ --ooc-size-h3: 2.0rem; /* 32px */ --ooc-size-h4: 1.5rem; /* 24px */ --ooc-size-lead: 1.5rem; /* 24px */ --ooc-size-body-lg: 1.25rem; /* 20px */ --ooc-size-body: 1.0625rem;/* 17px */ --ooc-size-body-sm: 0.9375rem;/* 15px */ --ooc-size-caption: 0.8125rem;/* 13px */ --ooc-size-eyebrow: 0.75rem; /* 12px */ --ooc-size-meta: 0.6875rem;/* 11px */ /* === Line-heights === */ --ooc-line-display: 0.95; --ooc-line-heading: 1.08; --ooc-line-lead: 1.40; --ooc-line-body: 1.65; --ooc-line-meta: 1.30; /* === Letter-spacing === */ --ooc-track-display: -0.025em; --ooc-track-heading: -0.015em; --ooc-track-body: 0; --ooc-track-eyebrow: 0.18em; --ooc-track-meta: 0.12em;
Base 8px. Raios pequenos. Sombras finas em Tinta. Nada de neon, nada de glow, nada de coach-style.
--ooc-radius-none · 0px
Cards editoriais, capa, tabelas.
--ooc-radius-sm · 2px
Botões padrão, tags, inputs.
--ooc-radius-md · 4px
Cards interativos, banners pequenos.
--ooc-radius-lg · 8px
Modais, toasts, sheets.
Regra de ouro: raios <= 8px. Acima disso vira coach-style.
--ooc-shadow-sm
0 1px 2px rgba(20,17,13,0.08) · cards de página, hover sutil.
--ooc-shadow-md
0 2px 6px + 1px 2px · cards elevados, dropdowns.
--ooc-shadow-lg
0 8px 24px + 2px 6px · modais, popovers.
Proibido: sombras coloridas, glow neon, sombras saturadas. Sempre Tinta com baixa opacidade.
Fio editorial. 1px sólido em Fio Editorial. Default para separar parágrafos longos, listas e seções.
Tinta pesada. 2px sólido em Tinta. Reservado para topo/fim de seção crítica e masthead.
Régua tipográfica. Três pontos centralizados — para pausa editorial dentro de longas leituras.
/* === Espaço === */ --ooc-space-1: 4px; --ooc-space-2: 8px; --ooc-space-3: 12px; --ooc-space-4: 16px; --ooc-space-5: 24px; --ooc-space-6: 32px; --ooc-space-7: 48px; --ooc-space-8: 64px; --ooc-space-9: 96px; --ooc-space-10: 128px; /* === Bordas === */ --ooc-radius-none: 0; --ooc-radius-sm: 2px; --ooc-radius-md: 4px; --ooc-radius-lg: 8px; /* === Sombras === */ --ooc-shadow-sm: 0 1px 2px rgba(20,17,13,0.08); --ooc-shadow-md: 0 2px 6px rgba(20,17,13,0.10), 0 1px 2px rgba(20,17,13,0.06); --ooc-shadow-lg: 0 8px 24px rgba(20,17,13,0.12), 0 2px 6px rgba(20,17,13,0.06); /* === Container === */ --ooc-container: 1100px; --ooc-container-n: 760px;
Símbolo + wordmark. Versão horizontal primária e vertical alternativa. Versões clara, escura e monocromática. Espaço de respiro, tamanhos mínimos.
Lockup primário. Símbolo do caminho com quatro marcos circulares à esquerda, em escala menor (~44px de altura); wordmark dominante à direita, em uma única linha, com "IMERSÃO" em Source Serif 4 600/Carvão e "OUTRO CAMINHO" em Source Serif 4 700/Tinta lado a lado. Tracking discreto (1.4). Espaçamento entre símbolo e wordmark de ~42px e entre as duas palavras de ~16px. Esta é a versão que vai em headers, e-mails, capas horizontais, hero da landing, slides 16:9 e qualquer aplicação onde a largura é maior que a altura.
Sobre Tinta ou Carvão. O marco de virada troca de Terracota para Ocre — contraste melhor sobre fundo escuro.
Quando o horizontal não couber. Casos: avatares quadrados de redes sociais, capas verticais (Stories, Reels, A4 retrato), badges de evento, selos em vídeo.
Esquerda: símbolo linear puro (assinatura discreta, footers, watermark). Centro/direita: símbolo encapsulado em círculo — favicon, app icon, badge social, foto de perfil.
Para impressão a uma cor (jornal, contrato, fax, fotocópia), gravação, bordado ou hot-stamping. O marco de virada perde a Terracota e fica do mesmo peso visual dos outros — mas mantém o tamanho ligeiramente maior, preservando a hierarquia.
Mantenha um respiro mínimo equivalente à altura do glifo "M" do wordmark em todas as direções. Nunca coloque outro elemento, foto ou cor saturada dentro dessa zona.
Cada um com HTML inline funcional, estados visíveis e specs anotadas. O que está aqui vai direto para a landing.
Primário (Terracota): uma única ocorrência por dobra. Secundário (Tinta): ações secundárias importantes. Ghost: ações terciárias. Link inline: dentro de corpo de texto. Padding 16px 32px · radius --ooc-radius-sm · uppercase com letter-spacing 0.08em · font-family --ooc-font-display 700.
Label: JetBrains Mono UPPERCASE 11px --ooc-track-meta. Input: EB Garamond 16px sobre Pergaminho, border 1px Carvão, padding 12px 16px, radius --ooc-radius-sm. Estado focus: borda Terracota + ring 3px Terracota 12%.
Pilar 1 · Quem é você?
Noventa segundos, duas vezes por dia. Reprograma o paradigma instalado por repetição emocional.
Pilar 2 · O que você quer?
Lista escrita à mão, repetida diariamente. Crava intenção no subconsciente.
Pilar 4 · Leis
Sequência operacional que converte intenção em movimento — do desejo ao gesto.
Padrão: background Papel, border-top 2px Carvão, padding 32px, sombra sm. Destacado: Pergaminho + border-left 3px Terracota. Escuro: Tinta + acento Ocre — uso reservado para CTA principal e blocos VIP.
Sticky com backdrop-blur em ambos. Border-bottom 2px Tinta (claro) ou 1px Ocre (escuro). Nav em JetBrains Mono UPPERCASE 11px com track 0.14em.
Padrão que abre toda seção da landing. Eyebrow Terracota + H2 Tinta Source Serif 4 700.
Quem caminha sem método tropeça em si mesmo. Quem caminha sobre os quatro pilares — mantém-se em pé.
Background Pergaminho, border-left 3px Terracota, aspa serifada grande em Carvão no canto superior. Texto em EB Garamond Italic 19px.
Lista padrão
Lista numerada (romana)
Lista de check (DO / DON'T)
Marcador "·" em Terracota grande. Numerais romanos em Source Serif 4 700/Terracota. Check via pseudo-elements (sem dependência de ícone externo).
Pequena, JetBrains Mono UPPERCASE, padding 4px 10px, radius sm. Variante terracota = chamada urgente; musgo = positivo/confirmação; solid = headline pesada.
| Pilar | Pergunta | Ferramenta |
|---|---|---|
| I | Quem é você? | Cartãozinho Mágico |
| II | O que você quer? | Caderno dos 10 Objetivos |
| III | Como se ganha dinheiro? | P-O-V-M |
| IV | Por que o universo é regido por leis? | Fórmula da Criação |
Header em Carvão com texto Papel em JetBrains Mono UPPERCASE. Linhas separadas por Fio Editorial. Sem zebra-striping — respiro vem do padding.
Imersão paga · um sábado · ao vivo
Em um sábado, conduzida ao vivo por Marcos Trombetta — tradutor brasileiro dos cinco mestres clássicos.
Layout completo da dobra principal. Eyebrow + H1 com itálico Terracota no termo-chave + sub em EB Garamond italic + CTA primário ao lado de link inline.
Stroke 1.5-2px, terminações arredondadas, peso editorial. Biblioteca recomendada: Lucide (MIT, open-source). Nunca usar emojis, glyphs coloridos ou ícones 3D.
16, 20, 24, 32, 48px. Inline com texto: 16-20px. UI standard: 24px. Hero/destaque: 32-48px. Stroke sempre proporcional ao tamanho (1.5-2px em ≤24, 2-2.5px em ≥32).
Marcos não vende sorriso comercial — vende autoridade clássica. A foto carrega esse acordo visual.
Preto-e-branco ou monocromático quente. Iluminação contrastada (Rembrandt, lateral suave). Expressão contemplativa, neutra ou levemente séria. Ambiente clássico: biblioteca, escritório com livros, parede neutra. Foco editorial-jornalístico — estilo de capa de livro, não banco de imagens.
Sorriso comercial largo, polegar pra cima, "executivo feliz" stock. Filtros saturados, cores neon, gradientes coloridos sobrepostos. Foto stock genérica de "homem de terno apontando para câmera". Selfies sem produção.
Mockups da hero, dos CTAs isolados, dos anúncios Meta Ads 1080×1080, do post único e do carrossel de Instagram, da assinatura de e-mail e do slide de palestra.
Imersão paga · sábado · 28.JUN.2026
Um sábado ao vivo com Marcos Trombetta — tradutor brasileiro dos cinco mestres clássicos. Investimento R$ 197.
Cinco frames complementares que rodam em A/B no Meta Ads e Instagram Feed. Estrutura canônica em todos: crop marks Terracota nos 4 cantos (frame cinematográfico), eyebrow em mono UPPERCASE, divisor curto Terracota, headline em Source Serif Black com palavras-chave destacadas em Terracota, sub-headline editorial em EB Garamond Italic, linha de metadados mono, botão CTA Terracota, e logo horizontal oficial (símbolo de 4 marcos + wordmark IMERSÃO OUTRO CAMINHO em Source Serif 4) no rodapé. A cor de acento aparece apenas em palavras-chave, divisores, CTA e crop marks — nunca em fundo cheio.
ONLINE · SÁBADO 27 DE JUNHO · 8 HORAS
Não é falta de informação.
É falta da pergunta certa.
OS CINCO MESTRES · UMA ORDEM · UM SÁBADO
Cinco autores. Mais de 100 anos.
A sequência que o Brasil ainda não recebeu.
15 ANOS · 120.000 ALUNOS · 5 MESTRES
120.000 alunos.
O método antigo, na ordem certa.
PILAR 1 · QUEM É VOCÊ?
SEM PIROTECNIA · SEM PRESSA · SEM PROMESSA
“Eu não estou aqui para te vender. A minha ideia é compartilhar o que funciona de verdade.”
Post de feed orgânico em fundo Pergaminho. Mantém a mesma estrutura canônica (crop marks, eyebrow, divisor, headline, sub, logo bracketed) sem CTA agressivo — tom convite editorial. Roda em conta orgânica do Marcos para aquecer público pré-anúncio pago.
BRASIL · 2026 · UM CONVITE
Sobre por que ler tudo
não é o mesmo que aplicar nada.
Holliwell escreveu em 1947.
Hill em 1937. Wattles em 1910.
Eles não estavam errados.
Você só nunca recebeu na ordem certa.
Sequência de 8 slides 1080×1080 levando o leitor da dor reconhecida (slide 2) ao CTA final (slide 8). Mantém a estrutura canônica em todos: crop marks Terracota, eyebrow mono UPPERCASE, divisor curto, headline Source Serif Black com palavras-chave destacadas em Terracota, indicador N/8 no canto inferior direito e logo horizontal oficial no rodapé. Alterna fundos Tinta / Pergaminho para ritmo visual durante o swipe.
CARROSSEL · 8 SLIDES · ARRASTE →
o que ninguém te conta sobre o paradigma instalado em você
01 · Capa
O DIAGNÓSTICO
“Você leu. Estudou. Fez curso. Foi a seminário. E continua exatamente no mesmo lugar.”
02 · Dor reconhecida
A INVERSÃO
NÃO É O QUE VOCÊ
NÃO SABE.
03 · A pergunta certa
04 · A causa
O MÉTODO · QUATRO PILARES · 100 ANOS
QUEM É VOCÊ?
O QUE VOCÊ QUER?
COMO SE GANHA DINHEIRO?
POR QUE O UNIVERSO É REGIDO POR LEIS?
05 · Os 4 pilares
A IMERSÃO · 27 DE JUNHO
06 · A entrega
SÁBADO 27.JUN · ONLINE
de imersão ao vivo
com os 5 mestres clássicos
07 · A oferta
OU VAI ESQUECER
NO SCROLL
— COMO ESQUECEU
O ÚLTIMO LIVRO.
08 · CTA final
Padrão de alternância de fundos: Tinta → Pergaminho → Tinta → Tinta → Pergaminho → Tinta → Pergaminho → Tinta. Slides escuros ancoram a tese (1, 3, 4, 6, 8). Slides claros (2, 5, 7) carregam diagnóstico, método e oferta. Mantém estrutura canônica em todos os 8: crop marks Terracota, eyebrow mono UPPERCASE, divisor curto, headline Source Serif Black com palavras-chave em Terracota, indicador N/8 e logo horizontal oficial no rodapé.
Background Tinta, eyebrow Ocre, headline Papel com itálico Ocre no termo-chave, marca minúscula em Fio no canto inferior direito.
O que é editorial-sóbrio, o que é coach-pirotécnico. Quando bater dúvida, voltar aqui.
:root.Cole no topo do seu CSS — ou converta para tailwind.config.js / theme.ts / design-tokens.json. Funciona em qualquer stack.
/* ========================================================= IDENTIDADE VISUAL — IMERSÃO OUTRO CAMINHO Sistema de Design Tokens v1.0 — 22.MAI.2026 © Marcos Trombetta · SIP · Arsenal de Funis v3.4 ========================================================= */ :root { /* === Cores === */ --ooc-tinta: #14110D; --ooc-tinta-leve: #2A241E; --ooc-papel: #F4EFE2; --ooc-papel-env: #ECE5D2; --ooc-pergaminho: #F8F3E3; --ooc-terracota: #8A2A1E; --ooc-terracota-c: #A4392B; --ooc-ocre: #B4863C; --ooc-musgo: #4A5740; --ooc-bronze: #8A6A3A; --ooc-carvao: #3A3530; --ooc-fio: #C9BFA3; --ooc-fio-claro: #DDD4B8; --ooc-muted: #6E6450; /* === Tipografia === */ --ooc-font-display: 'Source Serif 4', Georgia, serif; --ooc-font-body: 'EB Garamond', Georgia, serif; --ooc-font-meta: 'JetBrains Mono', Menlo, monospace; --ooc-size-display: 6.0rem; --ooc-size-h1: 3.5rem; --ooc-size-h2: 2.625rem; --ooc-size-h3: 2.0rem; --ooc-size-h4: 1.5rem; --ooc-size-lead: 1.5rem; --ooc-size-body-lg: 1.25rem; --ooc-size-body: 1.0625rem; --ooc-size-body-sm: 0.9375rem; --ooc-size-caption: 0.8125rem; --ooc-size-eyebrow: 0.75rem; --ooc-size-meta: 0.6875rem; --ooc-line-display: 0.95; --ooc-line-heading: 1.08; --ooc-line-lead: 1.40; --ooc-line-body: 1.65; --ooc-line-meta: 1.30; --ooc-track-display: -0.025em; --ooc-track-heading: -0.015em; --ooc-track-body: 0; --ooc-track-eyebrow: 0.18em; --ooc-track-meta: 0.12em; /* === Espaçamento === */ --ooc-space-1: 4px; --ooc-space-2: 8px; --ooc-space-3: 12px; --ooc-space-4: 16px; --ooc-space-5: 24px; --ooc-space-6: 32px; --ooc-space-7: 48px; --ooc-space-8: 64px; --ooc-space-9: 96px; --ooc-space-10: 128px; /* === Bordas === */ --ooc-radius-none: 0; --ooc-radius-sm: 2px; --ooc-radius-md: 4px; --ooc-radius-lg: 8px; /* === Sombras === */ --ooc-shadow-sm: 0 1px 2px rgba(20,17,13,0.08); --ooc-shadow-md: 0 2px 6px rgba(20,17,13,0.10), 0 1px 2px rgba(20,17,13,0.06); --ooc-shadow-lg: 0 8px 24px rgba(20,17,13,0.12), 0 2px 6px rgba(20,17,13,0.06); /* === Container === */ --ooc-container: 1100px; --ooc-container-n: 760px; }