Demanda por conteúdo
Como um perfil de 77 mil seguidores vira fila no direct sem depender de portal.
[[CONFIRMAR: programação]]
01 · Princípios
Abrir a operação, não o palco.
Três decisões que explicam todas as outras. Quando uma peça nova aparecer e não houver regra escrita, ela obedece a estes três pontos.
- P.01A marca mostra processo, não resultado. Bastidor, direct, planilha, contrato. Nada de troféu, nada de "milhões". A prova é o ritual da segunda-feira.
Operação aberta
- P.02Uma ideia por peça. O símbolo vermelho marca onde está a ideia: no CTA, no marcador da lista, no eyebrow. Se há dois pontos vermelhos na tela, há dois assuntos, e um deles sobra.
O ponto
- P.03Disciplina editorial: muito espaço, hairline em vez de caixa, foto com ar para o texto respirar. O luxo aqui é silêncio, não brilho.
Dias comuns
"O palco é consequência. A construção acontece nos dias comuns."
Frase pública das sócias no evento da A Trinca (29/ago/2026). É a tagline oficial da Imersão e a régua de tom para qualquer texto novo.
02 · Cores
Preto, off-white, um ponto vermelho.
Escuro é o modo principal (venda, evento). Claro editorial entra em "quem somos" e nas artes de feed, herança do perfil. Vermelho nunca vira área: ocupa no máximo 5% da tela.
Preto
#111111 · --preto
Fundo principal. Quase preto, neutro, sem tinta quente.
Preto 2
#1A1A1A · --preto-2
Cards e elevação sobre o fundo.
Preto 3
#262626 · --preto-3
Hairlines sobre escuro; hover de card. Também em alpha.
Vermelho · o ponto
#FF4040 · --vermelho
Só no símbolo, marcadores, 1 CTA primário e hairline ativa.
Off-white
#F9F5F5 · --offwhite
Texto sobre escuro e fundo do modo claro editorial.
Branco
#FFFFFF · --branco
Superfície clara secundária; texto muted sobre escuro é o off-white com alpha .62.
Vermelho escuro
#D63030 · --vermelho-escuro
Hover do CTA, títulos grandes sobre claro, blocos.
Proporção de uso numa tela típica
Preto 62Preto 2 · 8Off-white 18Branco 5Vermelho escuro 4Vermelho ≤ 3–5
Sobre preto
Módulo 02 · Demanda
Como a gente gera demanda sem virar influencer.
Off-white para o texto, off-white com alpha para o parágrafo, vermelho só no ponto do eyebrow e no CTA.
Sobre off-white
Quem somos
Duas irmãs que abriram a operação inteira.
Tinta para o texto, vermelho escuro no peso 800 e no itálico grande, hairlines em tinta com alpha. Vermelho continua sendo o ponto.
03 · Tipografia
Hanken Grotesk em peso misto, Bodoni Moda numa palavra.
Uma grotesk para tudo (display, corpo, rails) e uma serif itálica para uma única palavra por headline, sempre maior que a vizinha. Sem fonte mono em lugar nenhum.
AaAa
Hanken Grotesk
300Light400Regular500Medium600SemiBold700Bold800ExtraBold
Aa
Bodoni Moda itálico
400Italic1,18×o tamanho do grotesk vizinho
- Display300 · 0.92 · −0.03emOperação aberta.96 → 44 px
- H1300 + 800 · 1.02Do conteúdo ao contrato.72 → 40 px
- H2300 + 800 · 1.05O que você vai ver aberto.48 → 30 px
- H3600 · 1.05 · −0.02emComo qualificar no direct antes da simulação28 → 22 px
- Corpo400 · 1.55Ao vivo no Zoom, com a operação aberta: do conteúdo que gera demanda ao contrato assinado, com o processo que roda na segunda-feira seguinte.18 → 16 px
- Pequeno400 · 1.5Legendas de foto, descrições de card, notas de rodapé e texto de apoio abaixo de títulos.14 px
- Rail500 · caixa alta · 0.18em@coleteconsultoria · 2026 · Outubro · ao vivo12 → 11 px
Peso misto · ref. 1
Como funciona a entrega da operação?
Duas partes leves (300) e uma pesada (800) na mesma frase. O peso cai na palavra que carrega o sentido, nunca na primeira só por ser a primeira.
Serif itálico · ref. 4
O que está em alta no mercado econômico em São Paulo
Uma palavra por headline em Bodoni Moda itálico, 1,18× maior. Off-white sobre escuro; vermelho escuro quando a frase pede ênfase, como aqui.
04 · Ritmo e espaçamento
Base 8. Muito ar, pouca caixa.
Dois tokens fluidos governam a página: o respiro lateral e o respiro entre seções. O resto é múltiplo de 8. Separação por hairline, não por card.
Escala
8
16
24
32
48
64
96
128
--pad clamp(20px, 5vw, 80px) · respiro lateral--gap clamp(48px, 8vw, 128px) · respiro entre seções--raio 999px · só na pílula e no chip.wrap min(1240px, 100% − 2·pad)Anatomia de uma seção
--pad
.wrap · 1240 máx.
.sec · padding-block: --gap
Cabeçalho de seção em duas colunas a partir de 900 px: título ocupa 7/12 à esquerda, parágrafo 5/12 à direita. Abaixo disso, empilha.
05 · Componentes
Poucas peças, com nome.
Cada componente abaixo existe como classe em tokens.css ou nesta página. A LP e o brandbook reutilizam os mesmos nomes; nada é redesenhado por peça.
CTA
Pílula com seta em círculo
Um primário vermelho por tela. Ghost para o secundário. Altura 52 px, toque ≥ 44.
.cta-pill .cta-pill--ghostSeta em caixa
Caixa 1 px com seta
Rodapé direito do hero e de cards de foto (ref. 4). Nunca preenchida.
.box-setaEyebrow e chip
Rótulo com ponto vermelho · chip de contexto
Eyebrow abre toda seção. Chip marca formato, data, cidade, sem cor de fundo.
.eyebrow .chipO que você vai ver
Ao vivo no Zoom09.10.2026Para corretores e gestores
Rails
Texto de canto, horizontal e rotacionado
Caixa alta, 11–12 px, tracking 0.18em. Rotacionado 90° só no canto superior esquerdo.
.rail .rail--rot
Imersão Colete · 09.10
@coleteconsultoria2026 · OutubroAo vivo
Lista-índice
Número, título, descrição, hairline
Programação, "pra quem é", princípios. Substitui grade de cards iguais.
.idx- 01Como o conteúdo vira pergunta no directO funil real: reel, comentário com palavra-gatilho, conversa, simulação.
- 02Qualificar antes de simularRoteiro de perguntas, poder de compra, composição de renda, restrição no nome.
- 03Associativo e MCMV com margemO que muda no fluxo quando o produto é econômico e o cliente é primeiro imóvel.
Card de módulo
Fundo preto 2, número vermelho, hairline
Único card com fundo. Sem borda, sem sombra, sem raio. Hover escurece um tom.
.card-mod[[CONFIRMAR: programação]]
Direct, simulação, contrato
O roteiro de atendimento remoto, do primeiro "oi" à assinatura, com os gargalos reais.
[[CONFIRMAR: programação]]
Time e método
Como a operação foi documentada para ser replicada com a My Broker em duas cidades.
[[CONFIRMAR: programação]]
Card de prova
Número grande, fonte pequena
Só fatos públicos, sempre com a fonte ao lado. Depoimento inventado não entra.
.card-prova77,5mil
seguidores no perfil verificado
Instagram · 14/set/202627,8mil
comentários num único reel fixado
Instagram · viral fixado2cidades
operações abertas com a My Broker
@autimob · 10/set/2026Bloco de foto
Foto com ar, recorte seco, rótulo de IA
Toda foto gerada leva o rótulo. A foto termina numa aresta reta (hairline opcional); nada de degradê, véu ou feather por cima. Headline sobre a foto só onde ela é escura e uniforme; foto clara vira "modo claro": rails e hairline em tinta, sem headline por cima. Se o texto não lê, ele vai para um painel sólido preto ao lado, não para um véu.
.foto .ia-tag
@coleteconsultoria09.10
Imersão Colete
prévia gerada por IA · direção de ensaio
O que está em alta no econômico
2026 · OutubroAo vivo
Imersão Colete
FAQ
Pergunta com hairline, sinal de mais
Detalhes nativos, sem script. O sinal vira "×" ao abrir.
.faq detailsÉ para quem já tem imobiliária ou para quem está começando?
Para quem lidera ou quer liderar uma operação: corretor com carteira, dono de imobiliária, gestor de equipe. Quem está no primeiro ano aproveita o método; quem tem time aproveita a parte de escala.
Vai ter gravação?
[[CONFIRMAR: se inclui gravação e por quanto tempo fica disponível]]
Qual a política de reembolso?
[[CONFIRMAR: garantia e política de reembolso]]
Modo claro
Os mesmos componentes sobre off-white
Nada muda de forma; só as vars de cor trocam pelo prefixo .claro.
06 · Arquitetura de tokens
Primitivo, semântico, componente.
Nenhum componente conhece um HEX. Ele conhece um papel. Trocar a cor de um papel troca a cor em todas as peças de uma vez.
| Primitivo (valor) | Semântico (token) | Componente (onde aparece) |
|---|---|---|
| #FF4040 | --vermelho | .eyebrow::before .cta-pill fundo .idx .n .card-mod .n símbolo do logo |
| #111111 | --preto · --tinta | body fundo · texto do .cta-pill · texto em .claro |
| #1A1A1A | --preto-2 | .card-mod fundo · fundo de code |
| #F9F5F5 | --offwhite · --texto | body cor · .claro fundo · texto do logo sobre preto |
| #FFFFFF | --branco | serif itálico do hero · code · barras da escala |
| rgba(249,245,245,.62) | --texto-mut | parágrafos sobre escuro · .eyebrow · .idx .d · .chip |
| rgba(249,245,245,.38) | --texto-dim | .rail · legendas decorativas |
| rgba(249,245,245,.14) | --hair | .hairline · bordas de .idx li .box-seta .chip .cta-pill--ghost |
| rgba(17,17,17,.14) | --hair-claro | as mesmas bordas dentro de .claro |
| #D63030 | --vermelho-escuro | .claro h2 b · .claro .serif-i · blocos sobre claro |
| #D63030 | --vermelho-escuro | serif itálico gigante sobre escuro · hover do CTA · rótulo "não assim" |
| 'Hanken Grotesk' | --grotesk | h1–h3 .display .rail .eyebrow corpo |
| 'Bodoni Moda' italic | --serif | .serif-i · citação em .cit .q · sufixo do .card-prova |
| clamp(44px, 7.2vw, 96px) | --display | .display do hero |
| clamp(48px, 8vw, 128px) | --gap | .sec padding-block |
| 999px | --raio | .cta-pill .chip |
07 · Contraste
Legível no escuro, legível no claro.
Razões calculadas pela fórmula WCAG 2 (luminância relativa) com os valores exatos dos tokens. Cores com alpha foram compostas sobre o fundo antes do cálculo.
| Par | Amostra | Razão | Nível | Uso permitido |
|---|---|---|---|---|
| Off-white sobre preto #F9F5F5 / #111111 | Aa texto | 17,45 | AAA | Texto principal sobre escuro, qualquer tamanho. |
| Tinta sobre off-white #111111 / #F9F5F5 | Aa texto | 17,45 | AAA | Texto principal sobre claro, qualquer tamanho. |
| Branco sobre preto #FFFFFF / #111111 | Aa serif | 18,88 | AAA | Serif itálico do hero, código, destaques. |
| Texto muted sobre preto off-white .62 → #A19E9E / #111111 | Aa parágrafo | 7,10 | AAA | Parágrafos e descrições sobre escuro. |
| Vermelho sobre preto #FF4040 / #111111 | 01 · → | 5,45 | AA | Ícone, número de índice, marcador. Nunca parágrafo. |
| Preto sobre vermelho #111111 / #FF4040 | Quero minha vaga | 5,45 | AA | Texto do CTA primário. |
| Tinta muted sobre off-white tinta .62 → #696767 / #F9F5F5 | Aa parágrafo | 5,13 | AA | Parágrafos sobre claro. |
| Vermelho escuro sobre off-white #D63030 / #F9F5F5 | Aa título | 4,49 | AA grande | Títulos ≥ 24 px (ou ≥ 19 px em 800) e itálico grande sobre claro. Não em parágrafo. |
| Vermelho escuro sobre preto #D63030 / #111111 | econômico | 3,89 | AA grande | Só serif itálico gigante e detalhe sobre escuro; nunca texto corrido. |
| Texto dim sobre preto off-white .38 → #696767 / #111111 | RAIL | 3,40 | decorativo | Só rails e legendas que repetem informação visível em outro lugar. |
| Off-white sobre vermelho #F9F5F5 / #FF4040 | Aa | 3,20 | só ≥ 24 px | Texto grande sobre bloco vermelho. Botão e parágrafo sobre vermelho levam preto. |
| Vermelho sobre off-white #FF4040 / #F9F5F5 | Aa | 3,20 | não é texto | Só símbolo, hairline, ícone e detalhe. Texto vermelho sobre claro é vermelho escuro, e só grande. |
AAA ≥ 7:1 · AA ≥ 4,5:1 (texto normal) · AA grande ≥ 3:1 (≥ 24 px ou ≥ 19 px em negrito).
Vermelho sobre off-white fica em 3,20: por isso o CTA primário sobre claro continua vermelho com texto preto, e o símbolo vermelho sobre off-white sempre carrega o wordmark em tinta ao lado.
08 · Voz
Irmãs que explicam, agora para quem opera.
A voz do perfil (direta, didática, pergunta como gancho) sobe um degrau para falar com corretores e gestores. Muda o público, não a pessoa que fala.
- V.01
Direto e didático
Explica como quem entende de banco e de gente. Sem juridiquês, sem gíria de rede social, sem inglês de palestra. - V.02
Pergunta como gancho
Todo bloco abre ou fecha com uma pergunta que o leitor faria de verdade. É a mecânica do perfil, transposta. - V.03
Prova por ritual, não por ostentação
"+1 cliente" toda semana, números públicos com fonte ao lado. Nada de "milhões vendidos" nem de resultado sem origem. - V.04
"A gente", sem emoji
Primeira pessoa do plural informal, como no feed. No B2B, o emoji e a reticência ficam de fora. - V.05
Método, processo, operação
Vocabulário do que se replica. Nunca promessa de renda, de "resultado garantido" ou de "transformação". - V.06
Valores ditos uma vez
Disciplina, fé, família aparecem em citação delas, no lugar certo, sem virar sermão nem slogan.
Assim
Como a gente qualifica no direct antes de mandar a simulação?
Não assim
Descubra o segredo para vender 100 unidades por mês!
Assim
77,5 mil seguidores no perfil verificado. Série "+1 cliente" toda semana.
Não assim
Milhões em vendas e uma comunidade gigante que confia na gente.
Assim
Você sai com o processo que roda na sua operação na segunda-feira.
Não assim
Transforme sua carreira e multiplique seu faturamento em 30 dias.
09 · Fazer e evitar
O que mantém a marca inteira em qualquer peça.
Resumo operacional para quem vai produzir arte, story, slide ou página sem abrir a spec. Quando houver dúvida, escolha a opção com mais espaço vazio.
Fazer
- 01Peso misto na headline. Light (300) e ExtraBold (800) na mesma frase; o peso cai na palavra que carrega o sentido.
- 02Uma palavra em serif itálico por headline, 1,18× maior que a vizinha.
- 03Rails nos 4 cantos: handle, data, nome do evento, cidade. Caixa alta, 11–12 px, tracking 0.18em.
- 04Hairline + nome à esquerda, seta em caixa 1 px à direita no rodapé de hero e pôster.
- 05Foto com espaço negativo (parede, céu, vidro, sombra) para o texto assentar.
- 06Vermelho só no ponto: símbolo, marcador, 1 CTA primário, hairline ativa. Máximo 5% da tela.
- 07Luz natural lateral e alfaiataria neutra (off-white, bege, tabaco, preto), sem estampa nem logo.
- 08Área de proteção do logo = diâmetro do símbolo. Mínimo 32 px (símbolo) e 120 px de largura (assinatura).
- 09Rótulo "prévia gerada por IA · direção de ensaio" em toda foto gerada, sem exceção.
Evitar
- 01Vermelho em área grande (fundo, faixa, card). Vira promoção e some a hierarquia.
- 02Deformar, girar, degradê, sombra ou contorno no logo. E nunca o símbolo em outra cor que não vermelho ou mono.
- 03Trocar a fonte do wordmark ou usar fonte mono nos rails.
- 04Imagem genérica de banco: aperto de mão, chaves douradas, gráfico subindo, cifrão, sorriso de catálogo.
- 05Flash duro, HDR, fundo estourado. A gradação é quente, contraste médio, pretos levantados.
- 06Legendar rosto com nome. Nenhuma fonte pública liga Júlia ou Jamille a um rosto; até o cliente confirmar, não nomeia.
- 07Grade de cards iguais onde uma lista-índice com hairline resolve.
- 08Parágrafo longo debaixo do título gigante. Use micro-blocos justapostos (ref. 3).
- 09Misturar a skin da agência (cores e fontes da proposta e do briefing) em qualquer peça Colete.