Retícula.
A printed magazine in bento: paper, ultra-heavy grotesque type, halftone photos with off-register CMYK plates, crop marks and a print color bar. Bold, authorial and full of detail.
- Type
- Landing page
- Theme
- Light
- Headings
- Schibsted Grotesk 900
- Body
- Instrument Sans
ForBrands and people who hire creatives and value design, 22-45
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForBrands and people who hire creatives and value design, 22-45
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Schibsted Grotesk 900 for headings, Instrument Sans for body text.
HeadingsSchibsted Grotesk 900
Aag!
Retícula in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyInstrument Sans
The reading font carries long paragraphs without tiring the eye.
Running text, buttons, forms and captions. Headings get the display font; this is the page's everyday voice.
0123456789 · $1,234.56 · Sep 25, 7:30 PM
Who it's for
What the AI compares with your client to pick the design.
- studio or creative professional with a portfolio
- brand with strong colors or CMYK
- business that wants to look like a magazine, not a corporate site
- healthcare and clinics
- law and accounting
- older, conservative audience
- business with no images of its own to show
Tone
What makes it Retícula
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Retícula becomes your coding agent's design system: it builds any screen with this look, not just the sample landing.
Prompt for the agent Use with AI
Read the DESIGN.md at the project root and follow its rules on every screen. Import sistema.css once at the project's entry point and use its classes and tokens instead of creating new styles. Before every UI change, reread DESIGN.md.
- 01Download the two filesDESIGN.md (the visual rules) and sistema.css (tokens, components and the design's signatures).
- 02Add them to the projectDESIGN.md at the root. sistema.css imported once at the entry point: works with React, Vue, Svelte, HTML or WordPress.
- 03Paste the prompt into your agentIt reads the rules and builds any screen (login, pricing, dashboard) with the design's look.
- 04Make the rule stickPut the prompt in your agent's project rules so every new screen follows the same colors, fonts and spacing.
Similar
Landings that share a tone or niche with Retícula.