Marca e mídia

01

Logotipo

Um wordmark, sem ícone: “Romeo” em peso leve e “.broker” em extrabold, menor, colado. O ponto antes de broker é o detalhe que carrega a marca — é dele que vem o verde.

Romeo.broker

Versão padrão, sobre fundo claro. O .broker em verde.

Romeo.broker

Sobre fundo escuro. O verde continua sendo o acento.

Romeo.broker

Sobre o verde ou sobre foto: tudo na mesma cor, sem acento.

Faça

Mantenha a diferença de peso: Romeo leve, .broker extrabold.
O .broker tem 68% do tamanho do Romeo. Não iguale os dois.
Reserve ao redor pelo menos a altura da letra “R”.
Em fundo escuro ou colorido, use a variante de cor única.

Não faça

Não escreva “Romeo Broker” separado nem “RomeoBroker”.
Não troque o verde por outra cor de acento.
Não aplique contorno, sombra, gradiente ou itálico.
Não coloque o logo sobre área ocupada da foto.

02

Cores

Monocromático mais um acento. A interface é feita de tinta sobre papel e filetes finos; o verde entra só onde tem ação, sucesso ou marca. Se tudo é destaque, nada é.

Base

#1C1917

Tinta

--color-foreground

Todo o texto principal e os botões primários.

#79716B

Texto secundário

--color-muted-foreground

Apoio, legendas e rótulos.

#ECECEA

Filete

--color-border

Todas as divisões. A interface é feita de linhas, não de caixas.

#FAFAF9

Fundo sutil

--color-subtle

Faixas alternadas e áreas de descanso.

#FFFFFF

Papel

--color-background

O fundo padrão do produto.

Acento e marca

#16A34A

Verde Romeo

--color-accent

O único acento. Ação, sucesso e o ponto do .broker.

#DCFCE7

Verde suave

--color-accent-soft

Fundo de ícone e etiqueta de destaque.

#07090C

Preto de marca

(marca)

Fundo das peças de marca: capas, painéis do mascote e o moletom.

Sinalização

#16A34A

Sucesso

--color-success

Confirmação.

#D97706

Atenção

--color-warning

Pendência.

#DC2626

Erro

--color-danger

Falha e exclusão.

#2563EB

Informação

--color-info

Aviso neutro.

03

Tipografia

Geist em toda a plataforma. Uma família só, quatro degraus. Títulos com tracking negativo para fechar o desenho; corpo em cinza para o texto respirar.

Display

46 px · semibold · −0.02em

Vender mais e pagar menos

Título de seção

28 px · semibold

O parceiro do corretor

Corpo

17 px · regular · 1.6

Cadastre imóveis, monte sua carteira e gerencie venda, locação e temporada num só lugar.

Kicker

11 px · medium · caixa alta · +0.18em

Central de apresentações

04

O mascote

O Romeo é o mascote do ecossistema romeo.broker. Ele representa o corretor moderno: inteligente, parceiro, conectado e focado em resultados. As artes vivem sobre o preto da marca: cada arquivo já traz esse fundo, e é sobre ele que o Romeo aparece inteiro.

Acessível

Amigável, próximo e sempre ao lado do corretor.

Inteligente

Tecnologia e dados trabalhando para facilitar a vida.

Parceiro

Crescemos juntos. Ganhamos quando você ganha.

Confiável

Transparência, segurança e suporte de verdade.

Expressões

Seis estados. Escolha pelo que a tela está dizendo — a expressão é informação, não enfeite.

Confiante
Estado neutro. O padrão para avatar e mensagens do sistema.

Alegre
Boas-vindas, sucesso e comemoração.

Atento
Dicas, dúvidas e ajuda contextual.

Surpreso
Estado vazio, alerta leve e erro recuperável.

Focado
Processamento, importação e tarefas em andamento.

Animado
Conquistas, metas batidas e comissão recebida.

Poses

Corpo inteiro, para capas, aberturas e faixas largas.

Postura confiante
Corpo inteiro. Institucional, pitch, apresentações sérias.

Trabalhando
Corpo inteiro. Produto, telas, tutoriais e onboarding.

Resultado
Corpo inteiro. Confirmações, metas batidas e recebimentos.

Versões

A mesma personagem em três tratamentos, na ordem de preferência.

3D colorido
A versão oficial. Use sempre que houver espaço e resolução.

2D ilustração
Traço simplificado, para peças impressas e materiais leves.

Monocromático
Uma cor só. Carimbo, gravação, fax e fundo colorido.

Sobre fundo escuro, sempre. Os arquivos do Romeo não têm fundo transparente: cada PNG traz o preto da marca atrás do personagem. No board original cada busto tem 97×127 px e o cabelo escuro não tem contorno contra o preto — recortar ali come o cabelo. Sobre um painel #07090C o retângulo do arquivo desaparece e o resultado é limpo. Para ter transparência de verdade é preciso o arquivo original do render.

Faça

Aplique sempre sobre o preto da marca (#07090C). É a cor que está dentro do PNG: sobre ela a borda do arquivo desaparece.
Use as artes deste kit inteiras e na proporção original.
Escolha a expressão pelo que a tela está dizendo, não por variedade.
Deixe respiro ao redor: no mínimo a altura da cabeça dele.

Não faça

Não use o Romeo sobre fundo claro nem sobre foto — o retângulo do arquivo aparece.
Não espelhe o Romeo — o logo do moletom fica invertido.
Não recolora, não aplique filtro nem sombra dura.
Não distorça, não corte ao meio e não gire.

05

Romeo v2 — o personagem reproduzível

O kit acima foi extraído do board original: existe o que existe, e nada além. Isto aqui é gerado — o Romeo virou um personagem que pode aparecer em qualquer pose, expressão ou cenário novo, sempre sendo o mesmo sujeito.

Romeo de corpo inteiro, em pose neutra, sobre fundo cinza claro — O master
Substitui o board como cânone do personagem. O wordmark do peito foi corrigido aqui: o board trazia um ponto a mais depois de “romeo”, ruído da geração original que passou despercebido porque era ilegível em 97 px.

As seis expressões, refeitas em alta

Romeo com expressão confiante — Confiante
Sorriso fechado, queixo erguido. O estado padrão.

Romeo com expressão alegre — Alegre
Riso aberto, olhos fechados em arco. Boas notícias.

Romeo com expressão atento — Atento
Mão no queixo. Dúvida, explicação, ajuda.

Romeo com expressão surpreso — Surpreso
Olhos arregalados, boca em o. Número que impressiona.

Romeo com expressão focado — Focado
Óculos, sobrancelha baixa. Trabalho, dados, relatório.

Romeo com expressão animado — Animado
Punho erguido. Comemoração, meta batida, venda fechada.

Estas artes não seguem a regra do #07090C

Elas vivem sobre cinza claro chapado, de propósito, para o recorte ser trivial. A regra do preto continua valendo para o kit extraído do board — ela existe porque aquele board não permitia recorte, não porque o preto seja obrigatório.

06

O roteiro do vôo

Um prédio, seis andares, seis públicos. A câmera entra pela porta e sobe, e cada andar é alguém que o Romeo atende — sai pela janela da cobertura e vai para o foguete. Isto é o storyboard: o que se vê, o que está escrito na tela e o que a câmera faz.

6 andares44s de vôo pelos andares+18s de túnel, foguete e TerraLer o roteiro completo

Steadicam baixo entrando pela porta de vidro, deslizando ao longo da mesa.7s
01 · TérreoA imobiliária
Cresce sem virar bagunça
Várias marcas sob o mesmo teto, cada uma com seu site e seu endereço. E cada pessoa da equipe enxergando só o que lhe cabe.
- Multi-marca
- Permissões por papel
- Relatórios e BI
- Régua de cobrança
- Rede de parcerias
Móvel herói: Mesa comunitária de madeira maciça
Push-in até o Romeo e meia-órbita em torno dele, revelando o apartamento vazio.8s
02 · 101O corretor
Você chega com o imóvel. O resto é com ele.
O CRM completo, de graça. A IA escreve o anúncio, sugere o preço e aponta o lead certo. E o imóvel sai publicado no seu site, no marketplace e nos portais.
- Funil e leads
- Agenda
- Anúncio por IA
- Preço sugerido
- Microsite .broker
- Portais em 1 clique
- Assinatura digital
- Vistoria
Móvel herói: Banco de madeira solitário
Tracking lateral por trás do casal e crane-up por cima do sofá curvo.7s
03 · 202Quem procura para comprar
A conta inteira, antes de você se apaixonar
Condomínio, IPTU, taxa de incêndio — tudo na cara, sem surpresa no fim. Compare, favorite, simule o financiamento. E pergunte às duas da manhã.
- Busca
- Comparador
- Favoritos
- Custos transparentes
- Imóvel na planta
- Simulador
- Sofia 24h
Móvel herói: Sofá curvo de bouclé
Começa baixo, na altura do gato, e sobe até o plano médio no Romeo.8s
04 · 303Quem mora de aluguel
Pague do jeito que der para você
Pix, boleto, débito — ou o cartão, parcelado em até 4x. O proprietário recebe à vista do mesmo jeito.
- Cartão em 4x
- Pix
- Boleto
- Contratos
- Chamados de manutenção
Móvel herói: Poltrona de couro caramelo
Órbita em torno da mesa redonda, passando por trás do proprietário sentado.7s
05 · 406O proprietário
Você vê tudo, inclusive o que costumam te esconder
Desempenho do anúncio, propostas para aceitar ou recusar, repasse automático quando o aluguel entra. E você escolhe quem gerencia — com exclusividade, se quiser.
- Propostas
- Repasse automático
- Desempenho
- Exclusividade
- Escolher o corretor
- Avaliar a imobiliária
Móvel herói: Mesa de jantar redonda
Sai pelas portas de vidro e subida estilo drone revelando o terraço e o mar.7s
06 · CoberturaA temporada
Short stay nativo, não puxadinho
Calendário, motor de reservas e sincronismo com Airbnb e Booking dentro do mesmo sistema. Preço que sobe no fim de semana sozinho.
- Calendário
- Channel manager
- Preço dinâmico
- Voucher e check-in
Móvel herói: Espreguiçadeira de madeira e lona

E então a câmera sai pela janela

Da cobertura ela atravessa o túnel, alcança o foguete e continua subindo até a Terra entrar em quadro por baixo — sem girar, porque girar inverteria a velocidade e o olho leria como rebobinar. Os pontinhos acendendo pelo mundo e o logotipo final são desenhados na página, nunca gerados: modelo de vídeo escreve texto errado, e o wordmark é o último lugar onde se pode errar.

07

Ícones e elementos

Família lucide-react, traço de 1,5 px, cantos arredondados. Sempre em linha — nunca preenchidos. Herdam a cor do texto; o verde entra só quando o ícone marca uma ação ou um estado positivo.

Imóvel

Pessoa

Agenda

Resultado

Dinheiro

Pagamento

Imobiliária

Segurança

Conversa

Aviso

Parceria

Concluído

Traço, não preenchimento

Ícone sólido pesa demais ao lado de uma tipografia leve.

Um tamanho por contexto

16 px inline no texto, 18 px em botão, 28 px em destaque.

Verde com parcimônia

Se a lista inteira é verde, o verde parou de significar algo.

08

Capas das apresentações

Seis capas, uma composição. Fundo preto de marca, o anel verde cortado pela borda, o mascote à direita e o título à esquerda. O que muda é a pose e a posição do anel.