Clipping.
Carpeta de recortes de periodista: papel prensa, titular en Abril Fatface, recortes rotos pegados con cinta, resaltador amarillo y sello rojo. Denso, asimétrico y con voz de redacción.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Abril Fatface
- Texto
- Lora
ParaEditores, medios y marcas que contratan texto; profesionales independientes de la escritura
Secciones de la página01/07Topo e navegação
A pasta de recortes de uma jornalista. Papel-jornal, tinta preta, marca-texto amarelo e carimbo vermelho. Composição de jornal impresso: densa, em colunas, assimétrica. Portfólio de quem vive de texto (jornalista, redator, copywriter, revisor, ghostwriter).
Del DESIGN.md, que por ahora está en portugués.
ParaEditores, medios y marcas que contratan texto; profesionales independientes de la escritura
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Abril Fatface en los títulos, Lora en el texto.
TítulosAbril Fatface
Aag!
Clipping en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoLora
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.
- portafolio de quien vive del texto
- trabajo publicado para mostrar
- profesional de una sola persona
- marca con negro, amarillo o rojo
- tech/SaaS
- salud y estética
- marca minimalista o de lujo silencioso
- negocio sin texto propio que mostrar
- público infantil
Tono
Lo que lo hace Clipping
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 01
Cabeçalho de jornal: linha de expediente (cidade, edição, tiragem), nome em Abril Fatface enorme, orelha à esquerda, carimbo à direita, menu entre fios duplos (
border-double). - 02
Primeira página: manchete sobre a própria pessoa em 3ª pessoa, linha fina itálica, byline em mono, lead em duas colunas com capitular (
.clipping-capitular) e retrato em retícula com legenda. - 03
Recortes: cada trabalho publicado é um recorte com borda rasgada ou picotada (função
borda(),clip-pathcom semente fixa), preso com.clipping-fita, levemente girado (rotate, que endireita no hover). Veículo, editoria, data, título, linha fina, "por", trecho real e carimbo "Publicado em". - 04
Marca-texto
.clipping-marcaem UMA frase-chave por bloco; no topo ele "passa" ao carregar. Caneta.clipping-canetasublinha links e notas. - 05
Carimbo
.clipping-carimbocom tinta falhada (máscara de ruído) e--bateao rolar. - 06
Classificados para serviços: colunas estreitas com fio, código, abreviações (c/, p/, incl.) e legenda de abreviações embaixo. Um anúncio em box é o destaque.
- 07
Pauta aberta datilografada em folha pautada, com notas à mão em vermelho na margem.
- 08
Ghostwriting aparece como recorte com tarjas pretas e carimbo "Confidencial".
- 09
Cartas à redação: cupom com borda tracejada e tesoura, campos em linha pontilhada.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
Identidade
- Fundo papel-jornal
#efeadfcom grão fino (.clipping-papel). Recortes em#f8f5ec, faixa de classificados emsurface-2(#e5ddcb). Nunca branco puro. - Tinta
#141414para texto, fios e blocos de título; secundário#59534a. - Marca-texto
#f5e14a: só como marca-texto (fundo irregular atrás de uma frase), nunca botão ou fundo grande. - Carimbo
#c8322a: carimbos, sublinhado a caneta, notas na margem e número de item. Botão fica preto e só vira vermelho no hover. - Fontes: Abril Fatface para manchete, nome e veículo; Lora para o corpo (itálico na linha fina e nas notas à mão); Special Elite (máquina de escrever) para datas, retrancas, códigos, carimbos e a pauta.
- Raio quase zero. Papel não tem canto arredondado.
Regras
- Colunas, fios e densidade: é jornal, não landing arejada. Mas cada bloco tem só um marca-texto.
- Texto com voz de redação: lead que responde o quê, quem, onde; frases curtas; nada de "conteúdo que conecta". Números só se forem do cliente.
- Rotação sempre pequena (até 2°). Recorte com
rotateno invólucro; a animaçãodata-revelausatransforme fica no elemento de fora. clip-pathcorta sombra: a sombra vai no pai (.clipping-sombra,drop-shadow) e a fita fica fora do elemento recortado.- Um botão por bloco. Links viram texto em mono sublinhado a caneta ("Continua na pág. 2").
- Animações (marca-texto, carimbo) param com
prefers-reduced-motion.
Adaptar à marca do cliente
- Cor própria: troque
--d-accent(carimbo e caneta). Mantenha papel, tinta e marca-texto amarelo. - Marca-texto em outra cor (verde, rosa) funciona se contrastar com a tinta preta; troque os
rgb(245 225 74)de.clipping-marcae--d-primaryjuntos. - Veículos do cliente: use o nome do veículo em Abril Fatface como texto, não o logo (logo é marca de terceiro).
- Foto real no retrato:
<img>comobject-coverno mesmoaspect-[4/5], em preto e branco (grayscale) para manter o clima de jornal.
Dos archivos.
Un prompt.
Clipping 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 Clipping.