Retícula.
Revista impresa en bento: papel, tipografía grotesca ultrapesada, fotos en medio tono con planchas CMYK fuera de registro, marcas de corte y barra de color de imprenta. Atrevido, de autor y lleno de detalle.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Schibsted Grotesk 900
- Texto
- Instrument Sans
ParaMarcas y personas que contratan creativos y valoran el diseño, 22-45 años
Secciones de la 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.
Del DESIGN.md, que por ahora está en portugués.
ParaMarcas y personas que contratan creativos y valoran el diseño, 22-45 años
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Schibsted Grotesk 900 en los títulos, Instrument Sans en el texto.
TítulosSchibsted Grotesk 900
Aag!
Retícula en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoInstrument Sans
La fuente de lectura sostiene párrafos largos sin cansar.
Texto corrido, botones, formularios y leyendas. Los títulos usan la fuente destacada; esta es la del día a día.
0123456789 · $1.234,56 · 25/09 a las 19:30
Para quién es
Lo que la IA compara con el cliente para elegir el diseño.
- estudio o profesional creativo con portafolio
- marca con colores fuertes o CMYK
- negocio que quiere parecer revista, no sitio corporativo
- salud y clínicas
- abogacía y contabilidad
- público mayor y conservador
- negocio sin imágenes propias para mostrar
Tono
Lo que lo hace Retícula
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Retícula se vuelve el sistema de tu agente de código: arma cualquier pantalla con este estilo, no solo la landing de ejemplo.
Prompt para el agente Usar con IA
Lee el DESIGN.md en la raíz del proyecto y sigue sus reglas en cada pantalla. Importa sistema.css una sola vez en el punto de entrada del proyecto y usa sus clases y tokens en lugar de crear estilos nuevos. Antes de cada cambio de interfaz, vuelve a leer el DESIGN.md.
- 01Descarga los dos archivosDESIGN.md (las reglas visuales) y sistema.css (tokens, componentes y las firmas del diseño).
- 02Ponlos en el proyectoDESIGN.md en la raíz. sistema.css importado una vez en el punto de entrada: funciona en React, Vue, Svelte, HTML o WordPress.
- 03Pega el prompt en tu agenteLee las reglas y arma cualquier pantalla (login, precios, panel) con el estilo del diseño.
- 04Deja la regla fijaPon el prompt en las reglas del proyecto del agente para que cada pantalla nueva siga los mismos colores, fuentes y espaciados.
Similares
Landings con tono o nicho en común con Retícula.