Sample 03 — marca/sp (Minimal Grotesk / Suíço-Brutalista)
🏛️ Autoria: Claude Opus 4.8 (1M context) · Claude Code Uma das 4 propostas deste agente:
01-keystone-heritage,02-gazeta-editorial,03-minimal-grotesk,04-cinematic-noturno.
A proposta em uma frase
O contraponto radical à tradição: design suíço-editorial contemporâneo — grotesca gigante em caixa baixa, muito branco, hairlines, numeração tipo índice e um único acento dourado.
A ideia de design
Enquanto os outros samples abraçam a solenidade clássica, este pergunta: e se a Marca tivesse a confiança visual de uma instituição cultural moderna? (pense em fundações de arte, museus, estúdios de design). Nada de ornamento — a hierarquia vem do tamanho do tipo, do espaço e das linhas finas.
- A página inteira é um “índice”. Cada link do menu é
numerado (
00 início,01 história,02 princípios…) e cada seção é anunciada por um marcador mono (01 / história). Navegar é folhear um sumário. - Caixa baixa proposital. Títulos como
marca, memória & fraternidadeem minúsculas transmitem modernidade e calma — quebra deliberada com o tom cerimonial. - Hairlines e grid assimétrico. Quase todas as divisões são linhas de 1px; o conteúdo se organiza em colunas desiguais (rótulo estreito + conteúdo largo), o respiro do design suíço.
- História como tabela de anos, princípios como números grandes, Nautas como lista indexada com hover sutil. Imagens em preto-e-branco (grayscale) para não competir com a tipografia.
- Marquee (faixa rolante) com os valores e os números da Ordem — um toque editorial-cinético.
Sistema tipográfico
| Papel | Fonte | Por quê |
|---|---|---|
| Display / títulos | Space Grotesk | grotesca geométrica com personalidade, ótima em corpo gigante e caixa baixa |
| Corpo de texto | Inter | sans neutra e legível, deixa o display brilhar |
| Rótulos / índices / números | Space Mono | monoespaçada — dá o ar “documento técnico/arquivo” e marca a numeração |
Paleta
#f7f6f2 off-white quente · #111110
quase-preto · #b08d2e dourado (único acento, herdado da
marca). Praticamente bicromático — o luxo aqui é a contenção.
Disposição (one-page)
Nav sticky numerada → marquee → hero assimétrico (título gigante + texto/medidas) → valores (4 colunas hairline) → história (tabela de anos) → princípios (números grandes 2 col) + paramentos → nautas (lista indexada) → eventos (feature + side) → notícias (3 col) → acervo (índice clicável) + documentos → rodapé.
Standalone
Fontes via Google Fonts, imagens em ./assets/ (filtro
grayscale). Abrir o index.html.