Clipping.
A journalist's clippings folder: newsprint, headline in Abril Fatface, torn clippings taped on, yellow highlighter and a red stamp. Dense, asymmetric and with a newsroom voice.
- Type
- Landing page
- Theme
- Light
- Headings
- Abril Fatface
- Body
- Lora
ForEditors, publications and brands that hire writers; freelance writing professionals
Page sections01/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).
From DESIGN.md, which is in Portuguese for now.
ForEditors, publications and brands that hire writers; freelance writing professionals
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Abril Fatface for headings, Lora for body text.
HeadingsAbril Fatface
Aag!
Clipping in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyLora
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.
- portfolio of someone who lives off writing
- published work to show
- one-person professional
- brand with black, yellow or red
- tech/SaaS
- healthcare and aesthetics
- minimalist or quiet-luxury brand
- business with no writing of its own to show
- children's audience
Tone
What makes it Clipping
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Clipping 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 Clipping.