olhar de arquiteto.

Brand Book · acesso restrito

senha incorreta

Brand Book · Sistema Visual 2026 · Jean Dallazem

olhar dearquiteto.

O guia visual completo da marca — tipografia, cores, wordmark, canais, templates de social media, aplicações e tokens de referência técnica.

Jean Dallazem · Arquiteto & Fotógrafo
olhardearquiteto.com.br · Versão 2.0 · Jul/2026

.

02 · Conceito

Arquiteto veste preto.
O olhar decide o resto.

A identidade visual nasce da mesma lógica que rege a boa arquitetura: rigor formal, contraste intencional, nenhum elemento sem propósito. Preto como fundação. As horas mágicas como poesia.

01 · Fundação

Preto Arquitetônico

Base monocromática — preto, cinza, branco. A sofisticação vem da proporção, não da cor.

02 · Atmosfera

Blue Hour + Golden Hour

Acentos, não fundação. Entram quando o conteúdo pede atmosfera.

03 · Movimento

Tipografia em ação

Light italic = em movimento. SemiBold = ancorado. O peso carrega significado.

03 · Tipografia · Plus Jakarta Sans
olhar de arquiteto. olhar de arquiteto. olhar de arquiteto. olhar de arquiteto.
200 · ExtraLightO olhar que muda tudo.
300 · LightO olhar que muda tudo.
300i · Light ItalicO olhar que muda tudo.
400 · RegularO olhar que muda tudo.
600 · SemiBoldO olhar que muda tudo.
700 · BoldO olhar que muda tudo.
800 · ExtraBoldO olhar que muda tudo.
800i · ExtraBold ItalicO olhar que muda tudo.

Padrão 1 — Ênfase inline

Uma foto
não se tira,
se constrói.

Padrão 2 — Stacking

a foto quemudoua minha vida

Padrão 3 — Light abre, bold fecha

Mova o olhar.
Mova o mercado.

Display · 800
−0.04em · 0.90

O olhar decide.

H1 · 700
−0.03em · 1.0

Seus projetos merecem mais do que imagens medianas.

H2 · 600
−0.01em · 1.1

O único método criado por quem foi arquiteto.

Body · 400
0em · 1.75

Existe uma lacuna entre o que o arquiteto cria e o que o mundo enxerga. O olhar de arquiteto. fecha essa lacuna — com método, não com sorte.

UI Label · 600
+0.04em

Conhecer o Método  →     Ver o Portfólio  →

Mono · Space Mono
+0.14em · caps

Jean Dallazem — Arquiteto & Fotógrafo · 2026

Space Mono · uso exclusivo em labels, eyebrows, captions, tokens e handles

MÉTODO · FOTOGRAFIA DE ARQUITETURA · @olhardearquiteto_

Jean Dallazem — Arquiteto & Fotógrafo

OLHAR DE ARQUITETO · 2026

04 · Cores · Sistema OA

Preto como fundação.
As horas como atmosfera.

Preto#0A0A0Abase
Carvão#1A1A1Afundo
Grafite#2E2E2Esuperfície
Médio#555555elemento
Cinza#888888texto sec.
Prata#BBBBBBtexto pri.
Off-White#E8E8E8
Branco#F7F7F7claro
Blue Hour
Azul Marinho#1C2D40
Névoa#8AAAB8
Branco Frio#EFF3F5
Golden Hour
Areia Dourada#D9C9B0
Linho#EDE0CC
Off-White Q.#F5F0E8
Teal
Teal Profundo#005770CTA principal
Teal Médio#2A7A9Blabels · eyebrows

Teal Profundo · #005770 · CTA principal

CTA.

Botões de conversão exclusivamente — "Comprar", "Inscrever-se", "Entrar em contato". Fundos de seção de fechamento. Nunca em labels ou texto corrido.

Começar agora →

Teal Médio · #2A7A9B · Labels e destaques

Label.

Eyebrows, labels, ícones, destaques inline. Nunca em botão primário — esse é exclusivo do #005770.

MÉTODO · FOTOGRAFIA · @olhardearquiteto_

Preto · Hero

Mova o
olhar.

Carvão · Seções

O olhar
decide.

Blue Hour

Imagens
encantam.

Golden Hour

Todo trabalho
merece ser visto.

Blue + Golden

Fotos
que vendem.

Teal · CTA

Começar
agora.

05 · Wordmark
olhar de
arquiteto.

"olhar de" · Plus Jakarta Sans 300 · Light Italic · letter-spacing −0.01em

"arquiteto." · Plus Jakarta Sans 600 · SemiBold · letter-spacing −0.03em

Tudo em minúsculo. O ponto final é elemento gráfico — não pontuação.

Principal · fundo escuro

olhar dearquiteto.

Fundo claro · Golden Hour

olhar dearquiteto.

Blue Hour · atmosfera

olhar dearquiteto.
olhar de arquiteto.

Versão horizontal · header

05b · Zona de proteção
olhar de
arquiteto.
x

Zona de proteção = altura da letra "x" em todas as direções

Nenhum elemento entra na zona. Abaixo de 120px de largura, usar o símbolo "oa."

05c · Usos incorretos

❌ Cor errada
olhar de
arquiteto.

Não alterar a cor. Branco sobre escuro ou preto sobre claro — nunca gold, teal ou outra cor.

❌ Maiúsculo
OLHAR DE
ARQUITETO.

Sempre em minúsculo. Maiúsculo muda a personalidade da marca.

❌ Peso igual
olhar de
arquiteto.

"olhar de" = 300i e "arquiteto." = 600. O contraste de peso é a identidade.

❌ Fonte errada
olhar de
arquiteto.

Apenas Plus Jakarta Sans. Nunca substituir por outra fonte.

❌ Distorcido
olhar de
arquiteto.

Nunca esticar ou comprimir. Redimensionar sempre proporcionalmente.

❌ Sem o ponto
olhar de
arquiteto

O "." é elemento gráfico — não removê-lo jamais.

05d · Símbolo · oa.

Marca reduzida para contextos onde o wordmark completo não cabe: favicon, avatar, carimbo, rodapé de slide.

oa.

Favicon · Avatar

oa.

Papel · Off-White

oa.

Blue Hour

oa.

Golden Hour

06 · Voz · Manifesto

Todo trabalho de qualidade
merece ser visto.

O problema não é o projeto.
É o olhar.

Fotografar não é dom.
É método.

Mova o olhar.
Mova o mercado.

Tom de voz · 4 pilares

Direto.

Sem rodeios. A frase termina quando a ideia termina.

Inteligente.

Respeita quem lê. Não explica o óbvio.

Próximo.

Fala de pessoa para pessoa. Autoridade sem arrogância.

Exigente.

Tem padrão. Não publica o que não está no nível.

❌ Não

"Olá! Esperamos que você esteja bem. Gostaríamos de te convidar para conhecer nosso incrível curso..."

✓ Sim

"Seus projetos merecem mais do que fotos medianas. O Curso existe para fechar essa lacuna — com método, não com sorte."

❌ Não

"Neste módulo vamos aprender sobre composição, que é muito importante para tirar fotos lindas!"

✓ Sim

"Composição não é gosto — é decisão. Você aprende a tomar essa decisão antes de apertar o botão."

07 · Canais · Três papéis distintos

Três canais.
Um por vez.

Cada canal tem uma função única. Misturar os papéis enfraquece todos.

@jeandallazem

Portfólio Pessoal

Só fotografia.

Fotos de projetos na proporção ideal

Sem marca d'água, sem card

Créditos só na legenda

Referência: Fernando Guerra

Nunca: carrossel educacional, texto na imagem

@olhardearquiteto_

Marca + Conteúdo

Educação e funil.

Posts educacionais com hierarquia da marca

Reels de bastidor

Capas tipográficas no sistema Brand Book

Fotos dos projetos (nos dois perfis)

Nunca: fontes fora do Brand Book

olhardearquiteto.com.br

Site

Conversão.

6 páginas — cada uma com propósito único

CTA teal #005770 em botões primários

WhatsApp diferente por contexto

Nunca: tokens fora do Brand Book

08 · Social Media · Templates

Posts que falam
com uma voz só.

Estrutura obrigatória: eyebrow Space Mono + headline Plus Jakarta 800 + handle Space Mono.

Feed · Posts 1:1

Método · Fotografia

Uma foto
não se tira,
se constrói.

@olhardearquiteto_

Posicionamento

o problema
não é o projeto.
é o olhar.

@olhardearquiteto_

Blue Hour · Curso

mova o olhar.
mova o mercado.

@olhardearquiteto_

Carrossel educacional · 4 slides

Reel · Capas 9:16

Método

O que eu
checko
antes de fotografar.

@olhardearquiteto_

Bastidor

Vida de
fotógrafo
de arquitetura.

@olhardearquiteto_

Curso · CTA

Turma 15
abrindo.

@olhardearquiteto_

Golden Hour

Por dentro de
um ensaio
de arquitetura.

@olhardearquiteto_

Fundos aprovados para posts educacionais

Preto Arq.

#0A0A0A · Padrão

Carvão

#1A1A1A · Variedade

Céu Profundo

#0C1420 · Blue Hour

Off-White Q.

#F5F0E8 · Golden

09 · Site · Estrutura e componentes

Seis páginas.
Um sistema só.

Mapa de páginas

olhardearquiteto.com.br /

Home

Apresenta Jean, o método e os produtos. Hero com foto, proof strip com números, links para verticais.

/portfolio

Portfólio

Galeria de projetos. Grid de imagens. CTA para orçamento de fotografia.

/curso

Curso Olhar de Arquiteto

Landing page completa. Hero, metodologia, módulos, depoimentos, FAQ, CTA.

/livro

Guia de Fotografia

Landing do livro/guia. Tem botão flutuante WhatsApp fixo. CTA para Hotmart.

/workshops

Workshops & Eventos

Formatos de evento (1 dia, fim de semana, palestra). B2B. CTA e-mail + WhatsApp.

/mentoria

Mentoria

Mentoria individual. Processo, público, depoimentos. CTA direto.

Componentes · Botões e Nav

Botão primário CTA

Inscrever-se →

background: #005770
color: #F7F7F7 · 700 13px
padding: 14-18px 28-36px
border-radius: 4px

Botão ghost secundário

Ver portfólio

background: transparent
border: 1px rgba(fff,0.2)
color: #BBBBBB · 300 13px

Nav · estado normal

olhar de arquiteto. portfólio · curso · livro

position: fixed · z-index 200
height: 60px → 52px scrollado
blur(12px) ao scrollar

WhatsApp flutuante (livro)

position: fixed
bottom: 24px · right: 24px
z-index: 999 · #25D366

10 · Tokens · Referência técnica

Valores únicos e autorizados. Qualquer dúvida, usar esta tabela.

Cores · Preto Arquitetônico

--arch-black#0A0A0A · base
--arch-charcoal#1A1A1A · fundo
--arch-graphite#2E2E2E · superfície
--arch-mid#555555
--arch-grey#888888 · texto sec.
--arch-silver#BBBBBB · texto pri.
--arch-off-white#E8E8E8
--arch-white#F7F7F7

Cores · Hora Mágica + Teal

--bh-deep#0C1420 · Blue Hour
--bh-navy#1C2D40
--bh-haze#8AAAB8
--bh-frost#EFF3F5
--gh-sand#BFA585 · Golden Hour
--gh-linen#EDE0CC
--teal#005770 · CTA principal
--teal-light#2A7A9B · label/destaque

Tipografia

--font'Plus Jakarta Sans'
--mono'Space Mono'
wordmark-1300 italic · −0.01em
wordmark-2600 normal · −0.03em
display800 · −0.04em · 0.90
h1700 · −0.03em · 1.0
body400 · 0em · 1.75
mono-labelSpace Mono · +0.14em · caps

Canva Brand Kit · Configuração obrigatória

Brand Kit IDkADdTK2KvEU
Fonte principalPlus Jakarta Sans
Fonte monoSpace Mono
Cor primária#0A0A0A
Cor CTA#005770
Cor destaque#2A7A9B
Cor acento#BFA585
Deploy (site)npx wrangler pages deploy . --project-name oa-select