Clipping.
Pasta de recortes de jornalista: papel-jornal, manchete em Abril Fatface, recortes rasgados presos com fita, marca-texto amarelo e carimbo vermelho. Denso, assimétrico e com voz de redação.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Abril Fatface
- Texto
- Lora
ParaEditores, veículos e marcas que contratam texto; profissional autônomo de escrita
Seções da 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).
ParaEditores, veículos e marcas que contratam texto; profissional autônomo de escrita
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Abril Fatface nos títulos, Lora no texto.
TítulosAbril Fatface
Aag!
Clipping em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoLora
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.
- portfólio de quem vive de texto
- trabalho publicado para mostrar
- profissional de uma pessoa só
- marca com preto, amarelo ou vermelho
- tech/SaaS
- saúde e estética
- marca minimalista ou de luxo silencioso
- negócio sem texto próprio para exibir
- público infantil
Tom
O que faz ser Clipping
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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.
Regras do jogo
Direto do DESIGN.md.
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.
Dois arquivos.
Um prompt.
O Clipping 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 Clipping.