Living Design & Lifestyle
O sistema visual da JHOMEA®. Uma marca mais próxima, sem perder o rigor.
Uma marca mais humana. Pensamos casas como se pensa a vida: com cuidado, com critério, com vontade de fazer diferente.
Falamos como quem está do outro lado da mesa. Sem distância e sem pose.
Traço limpo, cabeça criativa. Reverência pelo ofício, vontade de pensar diferente.
Decisões ajustadas que nos permitem ser melhores, a cada passo.
Duas variações. Sem excepções.
O logótipo reflete uma maneira de pensar o futuro: dinâmico, limpo, arrojado sem ser pretensioso. Mostra confiança sem se intrometer — presença sem ser o destaque. Desenhado em Avenir Next, a mesma família do texto do site. Existe apenas a preto integral ou a branco integral; a escolha depende do contraste do fundo, nunca do gosto.
Versão principal. Usa-se sobre bege ou branco.
Preto #0A0A0A · SVG
Para fundos escuros e sobre imagem com contraste suficiente.
Branco #FFFFFF · SVG
O mesmo desenho sem o símbolo de marca registada. Onde o ® não se consegue reproduzir com nitidez — gravações, bordados, relevos — e na barra de navegação do site, onde o logótipo é pequeno e se repete em todas as páginas. No resto, digital e impressão, usa-se a versão com ® (no rodapé do site, por exemplo).
Preto ou branco integral · SVG
Espaço livre obrigatório em volta do logótipo. Nada entra nesta margem — nem texto, nem imagem, nem outra marca.
X = altura da letra “J” · margem mínima de X nos quatro lados
Abaixo deste tamanho a marca perde legibilidade.
150 px em digital · 30 mm em impressão
Quatro erros que invalidam a marca. Sem excepções.
Quadrado 800 × 800 px · raio 90 px (11,25%)
Logótipo a 86,5% da largura e 13,5% da altura
Centrado nos dois eixos
Fundo #0A0A0A · marca #FBF8F3
O logótipo completo a bege, centrado num quadrado preto de cantos arredondados. É o ícone da marca em todos os tamanhos a partir de 32 px — favicon, ícone de ecrã inicial, avatar de aplicações. Nunca redesenhado, nunca recortado, nunca invertido.
Raio = 11,25% do lado · fundo #0A0A0A · marca #FBF8F3
Mesmo quadrado e mesmo raio do app icon
“J” recortado do logótipo, sem redesenho
Altura 54% do lado · centrado nos dois eixos
Fundo #0A0A0A · marca #FBF8F3
A 16 px o logótipo completo deixa de se ler. Nesse tamanho — e só nesse — entra o monograma: o “J” do próprio logótipo, isolado. Não é uma letra nova nem um segundo símbolo, e não se usa em mais lado nenhum.
Exclusivo dos 16 px · em qualquer outro tamanho usa-se o app icon
No ficheiro de 16 px o traço vai ligeiramente reforçado — o desenho fino da Avenir desaparece a esse tamanho
A cor simplifica. E completa.
Bege, preto e branco. O bege é a superfície calma da marca, o preto dá estrutura, o branco dá respiro. Nenhuma cor de acento: a paleta simplifica o que se vê e completa o que se sente — a hierarquia faz-se com tipografia, espaço e imagem.
Base da marca — superfície calma de todas as páginas.
HEX #FBF8F3 · RGB 251 248 243
Estrutura — texto, bandas e botões preenchidos.
HEX #0A0A0A · RGB 10 10 10
Respiro — cartões, campos de formulário e negativo.
HEX #FFFFFF · RGB 255 255 255
Referência para qualquer peça: o bege domina, o preto estrutura, o branco pontua.
#3D3833 sobre bege
#706A60 sobre bege
#EAE4DA sobre bege
Texto #FFFFFF · linhas rgba(255,255,255,.14)
Apenas headlines destacados. Traz o design, o cuidado, o toque de sentir e criar com pensamento.
Pesos 200 / 300 · itálico para ênfase
Tudo o resto. Geométrica, limpa e sóbria — dá ordem ao texto sem chamar a atenção para si. Três pesos em degraus: Regular para ler, Medium para a interface em caixa alta e para frases com destaque (títulos de notícia, resumo do artigo), Demi para nomes curtos (empreendimentos, valores da ficha).
Regular 400 · Medium 500 · Demi 600 · itálico
Avenir Next LT Pro — licença do cliente · a Medium é a Avenir LT Std 65, mesma altura de x e de maiúsculas
Dez níveis
Três níveis em Spectral, sete em Avenir. Escala contida: os textos do site são frases inteiras e parágrafos, e em corpos grandes gritam — o peso vem do espaço à volta, não do tamanho.
Tracking: caixa alta a .18em (.16em nos títulos de secção, .14em nas pills); títulos em caixa baixa ligeiramente fechados (−0.01em na Avenir, −0.03em na Spectral grande). Caixa baixa aberta só no texto de 14 px ou menos e no resumo do artigo, e nunca acima de +0.01em.
Caixa alta só no desenho — labels, botões, pills e títulos de secção, que o site põe em maiúsculas sozinho. No conteúdo nunca: títulos e nomes escrevem-se como se lêem (Valley Place, não VALLEY PLACE). As siglas ficam como são: JHOMEA®, GUL, SIL, CEO.
Capas e heros de empreendimento
Spectral 200 · 38–64 px
Tracking −0.03em · entrelinha 0.96
Hero de página e bandas full-bleed · números a 30–44 px
Spectral 200 · 30–46 px
Tracking −0.03em · entrelinha 1.05
Manifesto e títulos de CTA — frases curtas, até ~70 caracteres por linha
Spectral 300 · 22–30 px
Tracking −0.015em · entrelinha 1.4
Sobre o filete de cada secção: destaques, notícias, relacionados
Avenir Medium · caixa alta · 16 px
Tracking .16em — a família das labels, um degrau acima
Subtítulos dentro dos artigos e blocos como A equipa
Avenir Next Demi · 20–24 px
Tracking −0.01em · entrelinha 1.25 · nunca em caixa alta
Empreendimentos e valores da ficha técnica — nomes curtos
Avenir Next Demi · 28 px nos cartões e no destaque do carrossel · 24 px nos outros cartões do carrossel · 22 px na ficha técnica
Títulos de notícia em Medium 18 px, entrelinha 1.4 — frases longas pesam em Demi
Tracking −0.01em · entrelinha 1.15
Subtítulos de hero, introduções e descrições de empreendimento
Avenir Next Regular · 18 px
Entrelinha 1.55 · coluna até 760 px
Parágrafos, descrições e legendas longas
Avenir Next Regular · 16 px (17 px nos artigos, coluna de 780 px)
Entrelinha 1.7 · resumo do artigo em Medium 18 px a preto, tracking +0.01em, separado do título por um filete curto
A JHOMEA® promove, desenha e constrói em Aveiro — do licenciamento à entrega chave na mão. Fazemo-lo com método e com gosto por pensar diferente.
Legendas, notas, fichas técnicas e descrições secundárias
Avenir Next Regular · 14 px (rodapé incluído) · notas legais a 12 px
Entrelinha 1.6 · tracking +0.01em
T3 · 142 m² · Aveiro. Entrega prevista para o segundo semestre de 2026, com acabamentos escolhidos peça a peça.
Labels, botões e pills
Avenir Medium · caixa alta · label 11 px · botão 12 px · pills 10 px · navegação
Tracking .18em — .14em nas pills
Labels sem parênteses rectos nem outra pontuação decorativa
Estados, vendas e componentes.
Apenas estes três estados. Podem coexistir dois em simultâneo (ex.: Em licenciamento + Em construção) — nunca mais do que dois.
Pill preenchida · preto #0A0A0A · Avenir Medium · 10 px · caixa alta · .14em
Opcional — pode não existir. Quando existe, aparece uma só, ao lado do estado. Em contexto internacional, 100% vendido lê-se Sold Out.
Pill de contorno · 1 px #0A0A0A · Avenir Medium · 10 px · caixa alta · .14em
Três níveis: preenchido para a acção principal, contorno para a secundária, sublinhado para acções de texto. No hover, o preenchimento inverte.
Avenir Medium · 12 px · caixa alta · .18em · padding 14 × 24 px · raio 6 px
No telemóvel, um degrau abaixo: 11 px · padding 12 × 18 px (40 px de altura) · campos de 50 px · envio de formulário de 44 px. Ao lado de um título de secção, a acção passa a texto sublinhado.
Cantos no sistema: 6 px em botões e campos · 8 px em cartões e imagens · pill nos estados · nunca sombras
Nome, apelido, telemóvel e email são sempre obrigatórios e marcados com asterisco. Por baixo de todos os formulários, a nota legal diz para que servem os dados e termina na ligação para a Política de Privacidade. Nunca "ao enviar, concorda com…": aceitar a política não é base legal de nada.
Avenir Next Regular · 16 px · raio 6 px · moldura #E6E0D5
Em foco a moldura escurece para #0A0A0A
Nota legal Avenir Next Regular 12 px · ligação à política sublinhada, na mesma cor
Um só arranjo em todo o site — na home, no portfólio e em qualquer listagem. Imagem em moldura, e por baixo o nome em Avenir Demi — no carrossel da home precedido do número em Spectral itálico — com os estados encostados à direita e o topo das pills alinhado ao topo do título. Por baixo de um filete, a ficha: localização a preto, tipologia a cinza e a seta, que avança no hover. O cartão não leva botão: o cartão inteiro é o link.
Imagem com raio 8 px · nome Avenir Demi 28 px (24 px fora de destaque, no carrossel) · número Spectral 300 itálico · filete #EAE4DA sobre a ficha
No destaque da home o cartão cresce, mas o arranjo mantém-se
O cartão de notícia segue o mesmo arranjo: título em Medium 18 px, resumo em três linhas no máximo, ficha com categoria, data e seta
A partilha dos artigos usa a mesma ficha — filete, label à esquerda, redes em caixa alta à direita, sem ícones nem scripts de terceiros
Arquitetura em luz natural.
Volumes, fachadas e interiores calmos. Luz do dia, sem filtros quentes ou saturação. Pessoas apenas quando dão escala. Sem colagens. As imagens vivem em molduras, e nunca se cortam para caber: na galeria de cada empreendimento as fotografias alinham-se em filas que se ajustam à proporção de cada uma — mesma altura dentro da fila, mesmo intervalo entre todas. As secções a toda a largura — hero, bandas e citações — levam fotografia ou vídeo: vídeo sem som, em ciclo, só com imagem (sem cartões finais, fundo preto ou logótipo). A frase por cima é opcional: sem frase, a imagem aparece limpa, sem véu escuro.
O sistema em ecrã.
Em digital a marca aparece sobretudo como moldura: logótipo pequeno, tipografia grande, imagem a ocupar o ecrã. O bege é o fundo de leitura, o preto entra nas bandas e nos botões.
Página inicial: imagem a ecrã inteiro, logótipo a branco e headline em Spectral sobre o gradiente. A navegação é sempre branca sobre preto: no topo de uma página com imagem o fundo é transparente, e ao passar a imagem ganha o fundo preto integral. A marca e os links nunca mudam de cor. Nunca cinzentos, nunca opacidades, nunca modos de mistura.
Logótipo sem ® a 26 px de altura (22 px no telemóvel) · no rodapé, com ®, a 40 px · fundo do rodapé: ligações legais (Política de Privacidade, Livro de Reclamações — obrigatório) e, por baixo, numa só linha, denominação social, NIPC e a frase de resolução de litígios em 12 px, branco a 55% · barra de 70 px, 68 px com o menu em hambúrguer · gradiente rgba(10,10,10,.55) → .7 · botões raio 6 px
Navegação: marca e links #FFFFFF · fundo transparente no topo, #0A0A0A depois · painel mobile #0A0A0A · o idioma activo distingue-se pelo peso, não pela cor
Telemóvel: um só botão (a primeira acção) e a segunda como ligação sublinhada ao lado · sem a indicação de scroll
Carrossel no telemóvel: cartões a 90% da coluna e imagem de 300 px · setas na linha do título, sem contador · “Ver portfólio completo” à largura da coluna
Faixa de números: entre valores, um filete vertical de 1 × 28 px em #4A443C — nunca estrelas ou outros símbolos
Ligeiro e sempre ao serviço do conteúdo. Entre páginas, um fade curto com o cabeçalho parado; ao abrir um empreendimento a partir de um cartão, a imagem do cartão cresce até ao hero, e volta ao cartão no regresso. Ao carregar e no scroll, os blocos de texto e os cartões entram com um fade e uma subida curta, uma única vez, desfasados só entre os que entram juntos, e a começar um pouco antes de chegarem ao ecrã — num scroll rápido, os cartões nunca deixam branco. Nunca nas imagens do topo nem no carrossel, que já tem o seu movimento. Quem pede menos movimento no sistema não vê nenhum.
Fade entre páginas 280 ms · imagem cartão → hero 600 ms · entrada 700 ms, subida de 14 px, desfasamento de 60 ms (até 4, entre os que entram juntos), arranque 15% antes do ecrã · curva cubic-bezier(.16, 1, .3, 1) · tokens --jh-dur-* e --jh-reveal-* no system.css
Nenhuma fotografia é cortada. A galeria dos empreendimentos junta as fotos em filas com a proporção de cada uma; a capa das notícias segue a proporção da própria foto, seja panorâmica, quadrada ou vertical. Uma vertical fica mais estreita e centrada, em vez de passar de um ecrã. O recorte feito no Studio é respeitado.
Capa das notícias: até 1180 px de largura e 78% da altura do ecrã (máx. 720 px) · raio 8 px · na proporção da foto
Só aparece porque o mapa do Google, o Google Analytics e o Meta Pixel gravam cookies; nada disso carrega antes da escolha. Cartão preto no canto inferior esquerdo, como a navegação, com o texto a dizer que serviço grava cookies e a ligação para a política. Aceitar e Recusar lado a lado, com o mesmo tamanho: recusar nunca pode dar mais trabalho do que aceitar. Em Personalizar, uma caixa por categoria, todas desmarcadas; a medição de anúncios junta o Meta Pixel e o Google Ads. A escolha muda-se em Preferências de cookies, no rodapé.
Fundo #0A0A0A · filete #26231F · raio 8 px · largura máxima 440 px, a toda a largura no telemóvel
Texto Avenir Next 14 px a 72% de branco · Recusar em contorno branco, Aceitar preenchido a branco · “Personalizar” em texto sublinhado por baixo, abre uma caixa por serviço (mapa, estatística, anúncios) e “Guardar escolhas”; as caixas nunca vêm marcadas
Os ícones do Instagram, do Facebook e do LinkedIn são um conjunto: formas cheias, com o mesmo peso e a mesma caixa. Aparecem sozinhos, sem o @ ou o endereço por baixo — o ícone já diz o que é.
Caixa 24 × 24 · desenho entre 3 e 21 · traço do Instagram 2,1
20 px na navegação · 30 px na página de contacto · cor do texto à volta
A seguir às características, as notícias do empreendimento: as duas mais recentes, com o cartão das notícias, só quando existem. Mesma hierarquia do desktop. Imagem e ficha técnica ocupam juntas o ecrã inteiro, para a ficha se ver logo ao entrar; no telemóvel a ficha passa a duas colunas, com as vendas a toda a largura. O botão da brochura só aparece depois de passar a ficha, e esconde-se outra vez sobre o formulário da brochura e o rodapé. Nos cartões, as pills descem para baixo do nome.
h1 Spectral 200 · 38–64 px · ficha a preto com filete #26231F
Labels Avenir Medium 11 px · valores Avenir Demi 22 px · pills 10 px · .14em · nome nos cartões 24 px
Características em cartões bege #F2ECE3, filete #E0D6C7, raio 8 px, sem sombra: número em Spectral 300 itálico e título Avenir Demi 22 px lado a lado, na mesma linha de base; texto opcional por baixo do título
Pensamos casas como se pensa a vida: com cuidado, a cada passo.
+351 234 000 000 · diogo@jhomea.pt · jhomea.pt
Um post por imagem, um post por frase — nunca os dois ao mesmo tempo. A assinatura de email usa logótipo, filete e contactos em detalhe. Os emails que o site envia (o aviso à equipa e a confirmação a quem fez o pedido) seguem o mesmo sistema: fundo bege, cartão branco, label, título em Spectral, dados em ficha com filete, mensagem em bloco bege.
Post 1080 × 1080 px · logótipo a 14 px · assinatura com filete #EAE4DA de 1 px
Emails do site: 600 px · fundo #FBF8F3 · cartão #FFFFFF, filete #EAE4DA, raio 8 px, sem sombra · logótipo PNG a 28 px (SVG não aparece no Gmail) · label 11 px .18em #706A60 · título Spectral 300 30 px (Georgia onde não carrega) · texto Avenir Next 16 px #3D3833 · mensagem em #F2ECE3 · botão preto, raio 6 px
Vertical a ecrã inteiro, sempre com o logótipo no topo e o nome em Spectral em baixo. Uma ideia por story.
1080 × 1920 px · logótipo 12–16 px · texto a 16 px da margem · barras de progresso a branco
Avatar sempre com o logótipo a branco sobre preto. A bio repete o slogan e as quatro áreas de actividade, nesta ordem.
Avatar 320 × 320 px · logótipo a 66% do diâmetro · grelha de imagem sem molduras
O sistema em papel e em obra.
Em impressão o bege passa a papel e o preto a tinta única. Sem tramas, sem sombras, sem cor de acento: o que dá riqueza é o papel, a margem e a escala da tipografia.
2026
Logótipo em cima, imagem ao centro, nome do empreendimento em baixo. A capa nunca leva texto de venda.
A4 210 × 297 mm · margens 18 mm · tinta única #0A0A0A sobre papel bege
diogo@jhomea.pt
jhomea.pt
O cartão vive a preto na frente e a bege no verso. O painel de obra repete a estrutura do hero: logótipo, estado, nome.
Cartão 85 × 55 mm · raio 4 mm · painel com logótipo a 4% da largura e estado sempre no topo direito
Painéis alternados: bege com o logótipo centrado, render do interior à escala real e painel preto onde a marca corta na junta. A sequência repete-se ao longo da vedação.
Painéis de 2 000 mm · junta de 20 mm · logótipo a 72% da largura do painel · legenda a 24 mm da margem
Ficha técnicaEntrega 2.º semestre de 2027
Pasta preta com relevo a seco — sem tinta. As folhas soltas dentro são bege, com logótipo pequeno no topo.
Pasta 320 × 250 mm · relevo a seco 0,8 mm · folha A5 148 × 210 mm · logótipo a 12 mm
Preto #0A0A0A a 100% · sem tramas nem cinzas
Natural sem revestimento, 120–350 g · tom próximo de #FBF8F3
Mate · relevo a seco no logótipo quando o orçamento permite
Próximo, directo, sem adjectivos a mais.
A JHOMEA® fala como quem está do outro lado da mesa: sem distância e sem pose. Valoriza o processo tanto como o resultado — cada projeto explicado com clareza, com respeito por quem o vai habitar e pelo lugar onde nasce.
A voz é jovem e séria ao mesmo tempo: confiante sem excesso, actual sem correr atrás de tendências. Fala com critério e com ponto de vista, e prefere durar a impressionar.
Frases curtas, ideias completas. Se uma palavra pode sair sem alterar o sentido, sai.
Sofisticado sem enfeite. Sem buzzwords, sem enchimento, sem adjectivos a mais.
Humano e directo, sempre com controlo. Falamos por nós, nunca em nome do mercado.
Fala de durabilidade, de evolução e de viver melhor — a cada passo.
A ideia primeiro. Sem introduções longas nem enquadramentos desnecessários.
Nada de “incrível”, “exclusivo” ou “o melhor de sempre”. O trabalho fala por si.
Localização, tipologia, prazo e material. Números em vez de promessas.
Nunca neutro. A marca tem uma opinião sobre como se vive e diz qual é.
Os labels são só texto em caixa alta. Nada de parênteses rectos, setas ou pontuação decorativa a emoldurar títulos.
Viver melhor, a cada passo.
Promover, desenhar e construir em Aveiro casas com método e com gosto por pensar diferente — do licenciamento à entrega chave na mão.
Promoção imobiliária. Arquitetura. Design. Construção.