07 — Sistema de Layout

Layout
System

Cinco famílias de layout definem toda a linguagem compositional da marca. Cada família tem proporções fixas, hierarquia definida e regras de uso. Seguir este sistema garante coesão entre website, brochure, outdoor e social media.

LAYOUT A
Editorial Split

O layout mais característico da marca. Divide o espaço em dois campos: esquerdo (58%) para texto e hierarquia tipográfica, direito (42%) para imagem ou textura que sangra a borda. O espaço negativo do lado texto é parte da composição — nunca preencher completamente.

01 — Seção Título grande
aqui. Corpo de texto. Descrição curta. Mensagem alinhada ao posicionamento da marca.
Imagem / Textura
Proporção58% texto / 42% imagem. Fixo. Nunca reverter sem considerar o ritmo visual do contexto.
TextoSempre alinhado à esquerda. Padding mínimo: 48px (web) / 20mm (impresso). Texto nunca sobe acima de 40% da altura.
ImagemSangrar até a borda. Sem frame. Sem margem branca. Deve preencher o campo completamente.
ContextosHero do website · O Projeto · Seções pares do brochure · Outdoor principal
LAYOUT B
Full Bleed Hero

Imagem ou textura preenche 100% do campo. Texto aplicado diretamente sobre a imagem, sempre no quadrante inferior esquerdo. Overlay gradiente escuro (bottom-to-top) para garantir legibilidade. Não sobrepor mais de 30% da imagem com texto.

Categoria Headline
Principal.
OverlayGradiente: rgba(28,28,28,0.70) → transparent. Do bottom para 60% da altura. Nunca overlay plano em 100%.
TextoSomente versão clara (areia ou branca). Posição: bottom-left. Nunca centralizado.
ImagemApenas ativos aprovados (assets/textures/ ou fotografia comissionada com grading). Nunca stock genérico.
ContextosSeção Natureza · Abertura de capítulo em brochure · Outdoor variante fotográfica
LAYOUT C
Texto + Textura

Equivale ao Layout A mas sem fotografia: o campo direito é preenchido por uma textura aprovada (Série A ou B). Adequado para contextos onde fotografia não está disponível ou onde a textura reforça a mensagem melhor.

Seção Manifesto.
Pertencimento. Texto editorial. Posicionamento da marca em prosa concisa.
TexturaPreferencialmente Série A (Relevo Escultural). Nunca usar textura de outra marca ou de banco genérico.
ContextosSeção Manifesto · Páginas de abertura de brochure · Slides de apresentação · Contato web
LAYOUT D
Seção de Dados

Grid de 3 colunas para apresentação de informações métricas: estatísticas, especificações de lote, distâncias, amenidades. Números em Gazpacho Thin grande. Labels em Montserrat Caps pequeno. Textura de baixa opacidade como fundo.

Área Mínima360m²Frente mínima 12m. Testada plana. Infraestrutura completa.
Área Verde+40%Mata nativa preservada. Corredores verdes integrados.
LocalizaçãoITU | SP70km de São Paulo. Acesso pela Rodovia Anhanguera.
NúmerosGazpacho Thin, 56–80px. Superscript em 40% do tamanho. Nunca negrito.
DivisoresLinhas verticais 1px, cor Falha (#C4B8A5). Nunca sombra ou efeito 3D.
LAYOUT E
Grid de Imagem

Grid assimétrico de 3 colunas com item principal em span 2. Gutter mínimo (2–4px). Fundo escuro (Carvão) para fazer as imagens "flutuarem". Nunca usar molduras, sombras ou cantos arredondados nos itens.

Imagem principal (span 2)
Img 2
Img 3
Img 4
Img 5
Gutter2–4px. O fundo do grid (Carvão) aparece como linha fina entre as imagens.
ContextosGaleria do website · Páginas editoriais de brochure · Seção de imagens em apresentação