Retícula.
Revista impressa em bento: papel, tipografia grotesca ultrapesada, fotos em meio-tom com chapas CMYK fora de registro, marcas de corte e barra de cor de gráfica. Ousado, autoral e cheio de detalhe.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Schibsted Grotesk 900
- Texto
- Instrument Sans
ParaMarcas e pessoas que contratam criativo e valorizam design, 22-45
Seções da página01/08Topo e navegação
Revista impressa montada em bento. Papel cru, grotesca 900 apertada, fotos em meio-tom com as chapas de ciano e magenta escapando do preto, marcas de corte e barra de cor de gráfica. Tem que parecer prova de impressão bem feita, não template de agência.
ParaMarcas e pessoas que contratam criativo e valorizam design, 22-45
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Schibsted Grotesk 900 nos títulos, Instrument Sans no texto.
TítulosSchibsted Grotesk 900
Aag!
Retícula em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInstrument Sans
A fonte de leitura carrega parágrafos longos sem cansar.
Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.
0123456789 · R$ 1.234,56 · 25/09 às 19h30
Para quem serve
O que a skill /escolher-design compara com o cliente.
- estúdio ou profissional criativo com portfólio
- marca com cores fortes ou CMYK
- negócio que quer parecer revista, não site corporativo
- saúde e clínica
- advocacia e contabilidade
- público mais velho e conservador
- negócio sem nenhuma imagem própria para mostrar
Tom
O que faz ser Retícula
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Hero em bento de 12 colunas: título gigante, foto em meio-tom alta, cartão de paleta CMYK, manifesto em magenta e lista em preto.
- 02
Meio-tom de verdade:
<Reticula>gera os pontos no servidor, com duas chapas (ciano e magenta) deslocadas atrás do preto. No hover as chapas entram em registro. - 03
Título "fora de registro" (
.reticula-registro): sombra ciano e magenta que abre no hover. - 04
Marcas de corte (
<Corte>) em volta das fotos de projeto, alvo de registro e barra de cor. - 05
Rótulos editoriais: "pl. 01", "Prova 1 de 4", "02 — Serviços", sempre em mono minúsculo.
- 06
Selo circular girando com texto no caminho.
- 07
Sombra dura preta (6px) no hover dos cartões, nunca sombra desfocada.
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo papel
#e9e5dccom retícula fina (.reticula-papel); cartões#f6f3ec. - Texto e bordas preto tinta
#121212. Bordas de 1.5px em tudo: cartão, chip, botão. - Tintas de processo: magenta
#f0287a(primária), amarelo#ffdf2e(destaque), ciano#00a6e0(só em detalhe, cartão de serviço e chapa). Preto é a quarta tinta. - Fontes: Schibsted Grotesk 900 com tracking bem negativo (
.reticula-peso) nos títulos, Instrument Sans no texto, Martian Mono em rótulos minúsculos caixa-alta.
Regras
- Bento com
gap-3: cartões juntos, como página diagramada. Cantosrounded-d-lg(22px). - Cada linha do bento mistura fundos (papel, magenta, preto, amarelo, ciano). Nunca dois cartões vizinhos da mesma cor.
- Máximo de 2 botões por tela; botões em pílula com borda preta.
- Animação:
data-sobe,data-revela, faixa correndo, selo girando e chapas. Tudo para emprefers-reduced-motion.
Adaptar à marca do cliente
- Cor da marca vira
--d-primary(no lugar do magenta); mantenha amarelo e ciano como tintas de apoio ou troque pelas cores secundárias da marca. - Marca sóbria, de uma cor só e sem imagem própria: esse design fica vazio. Use Vitrine ou Forma.
Dois arquivos.
Um prompt.
O Retícula vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.
Prompt para o agente
Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.
- 01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
- 02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
- 03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
- 04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.
Parecidos
Landings com tom ou nicho em comum com Retícula.