Revisão da seçãoAguardando revisão2 atendidos · 0 a ajustar · 1 a revisar
O que já existe, o que precisa melhorar e o que ainda merece uma avaliação. Cada estado se refere apenas ao critério abaixo; não é aprovação da seção inteira.
- Atende ao critérioOs blocos têm geometria consistente e regras claras de composição.
Três motivos compartilham grid modular, área livre, dois estilos e quatro combinações de cores.
Ver especificação dos blocos ↗ - Atende ao critérioPessoas e agentes podem acessar cada motivo reutilizável.
A biblioteca oferece 24 arquivos SVG, URLs diretas, manifesto JSON e receita HTML/CSS copiável.
Ver especificação dos blocos ↗ - Aguardando revisãoA direção visual foi revisada em aplicações reais.
Revisar os motivos piloto em campanhas e provas impressas antes de tratá-los como padrões finais da marca.
Construir / Blocos
Blocos que dão estrutura.
Módulos simples para enquadrar uma ideia, criar ritmo e conectar imagem e mensagem. Uma linguagem gráfica da 6am para capas, peças editoriais e comunicação digital.
O grid define o ritmo.
O módulo-base mede 80 unidades no SVG de 960 × 640. A área central começa em (160, 160) e mede 640 × 320. Os contornos têm 2 unidades e escalam com o arquivo. Em aplicações pequenas, use a versão preenchida se o contorno perder definição.
Área livre para conteúdo8 × 4
A área livre organiza o layout; mantenha também o clearspace específico do logo. Não ocupe toda a área se a mensagem precisar de mais respiro.
Uma família. Três composições.
Explore o mesmo grid em versões preenchidas ou contornadas. Cada arquivo contém apenas o motivo, com fundo transparente; a cor da superfície é aplicada na composição.
Como compor
Um módulo por composição
Construa em um grid de 12 × 8. Quadrados e retângulos usam múltiplos inteiros do mesmo módulo. Escale o conjunto proporcionalmente; não estique módulos isolados.
A mensagem vem primeiro
Mantenha os blocos nas bordas e o conteúdo na área central livre. Use uma família por peça e evite preencher todo o grid. O espaço vazio organiza a leitura.
Cores com uma função
Use as combinações mostradas. O texto permanece sólido. Não transforme o verde exclusivo do logo em cor dos blocos nem aplique efeitos sobre o logo.
Imagem sem disputa
Use contornos quando a imagem já tiver presença. Posicione blocos longe de rostos e detalhes importantes. Escolha uma área calma e com contraste para o texto; se necessário, separe-o em uma faixa sólida.
Recomponha para o formato
Os SVGs são motivos de proporção 3:2. Preserve essa proporção. Em peças verticais, use uma faixa gráfica independente. No mobile, aumente a altura do conteúdo e mantenha o motivo separado; não diminua o texto para fazê-lo caber.
Decoração sem barreiras
Marque os motivos como decorativos, sem descrição duplicada para leitores de tela. Não use blocos sozinhos para indicar estado ou interação. As composições são estáticas e não precisam de animação.
Da regra à aplicação
Três maneiras de usar o sistema com a identidade 6am. Texto, imagem e logo continuam sendo elementos independentes.
Uma boa ideia merece espaço.
Capa / Uma ideia
Extremos preenchidos enquadram uma mensagem curta. O logo mantém sua área livre.
Clareza para o próximo passo.
Editorial / Imagem e conteúdo
O motivo ocupa uma faixa própria. O texto fica sobre uma superfície sólida e a ilustração permanece livre.
Conecte ideias. Crie possibilidades.
Contorno / Mensagem
Janelas contornadas trazem estrutura com menos peso visual. O texto mantém o maior destaque.
Prontos para reutilizar
Baixe cada SVG ou copie sua URL na biblioteca. O JSON reúne as 24 variantes, geometria, cores e regras. O modelo HTML/CSS usa os mesmos arquivos e mantém o texto editável.
Uma composição que se adapta
Este modelo mantém o motivo em uma faixa 3:2 e o conteúdo no fluxo normal. Troque a mensagem e o endereço do motivo sem transformar o texto em imagem.
<style>
.sixam-block-composition { background: #0A0C00; color: #FFFFFF; }
.sixam-block-motif { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.sixam-block-copy { padding: clamp(24px, 5vw, 48px); }
.sixam-block-copy h2 { margin: 0; font-family: var(--6am-font-display), sans-serif; font-size: clamp(28px, 5vw, 48px); line-height: 1.12; }
</style>
<section class="sixam-block-composition">
<img class="sixam-block-motif" src="/assets/design/6am/blocks/bookends-solid-lime-on-ink.svg" width="960" height="640" alt="">
<div class="sixam-block-copy"><h2>Uma boa ideia merece espaço.</h2></div>
</section>Biblioteca piloto: composições e arquivos disponíveis para uso e revisão. A aprovação da direção visual e as provas de impressão ainda estão pendentes.