Clipping.
Dossier de coupures de presse d'un journaliste : papier journal, titre en Abril Fatface, coupures déchirées fixées au ruban adhésif, surligneur jaune et tampon rouge. Dense, asymétrique et avec une voix de rédaction.
- Type
- Landing page
- Thème
- Clair
- Titres
- Abril Fatface
- Texte
- Lora
PourRédacteurs en chef, médias et marques qui commandent des textes ; professionnels indépendants de l'écriture
Sections de la page01/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).
Extrait du DESIGN.md, en portugais pour l'instant.
PourRédacteurs en chef, médias et marques qui commandent des textes ; professionnels indépendants de l'écriture
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Abril Fatface pour les titres, Lora pour le texte.
TitresAbril Fatface
Aag!
Clipping en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteLora
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- portfolio de quelqu'un qui vit de l'écriture
- travaux publiés à montrer
- professionnel d'une seule personne
- marque avec noir, jaune ou rouge
- tech/SaaS
- santé et esthétique
- marque minimaliste ou de luxe discret
- activité sans texte propre à montrer
- public enfant
Ton
Ce qui fait Clipping
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Clipping devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Clipping.