Caderno.
Cahier d'écolier : pages à lignes avec marge rouge et spirale, washi tape, post-it, autocollants et surligneur jaune et rose sur les mots-clés. Studieux et affectueux.
- Type
- Landing page
- Thème
- Clair
- Titres
- Patrick Hand
- Texte
- Lexend
PourParents d'élèves du primaire, du collège et du lycée, candidats aux concours d'entrée et acheteurs de papeterie et d'articles personnalisés
Sections de la page01/09nav
O caderno de estudante aberto na mesa: folha pautada com margem vermelha, espiral, fita washi, post-it, adesivo redondo e marca-texto. Estudioso e afetuoso, nunca infantil.
Extrait du DESIGN.md, en portugais pour l'instant.
PourParents d'élèves du primaire, du collège et du lycée, candidats aux concours d'entrée et acheteurs de papeterie et d'articles personnalisés
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Patrick Hand pour les titres, Lexend pour le texte.
TitresPatrick Hand
Aag!
Caderno en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteLexend
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.
- activité d'un professeur ou d'une petite équipe
- marque bleue, jaune ou rose
- accueil sur rendez-vous avec planning hebdomadaire
- papeterie avec produits faits main
- grande école ou université au ton institutionnel
- petite enfance très ludique
- marque de luxe ou sobre
- tech/SaaS
- santé et juridique
Ton
Ce qui fait Caderno
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 01
Grifo: uma palavra-chave por título passada no marca-texto (
caderno-grifo). No hero grifa na entrada (caderno-grifo-ja); abaixo da dobra grifa ao rolar (caderno-grifo-rola). Rosa comcaderno-grifo-rosa. - 02
Espiral na lateral esquerda dos cards (
caderno-espiral): furos + argolas em CSS. O card não pode teroverflow-hidden. - 03
Texto na pauta: dentro de folha pautada, tudo em
leading-8e espaços múltiplos de 2rem, para as letras sentarem na linha. - 04
Post-its levemente girados (amarelo e
caderno-postit-rosa), fita washi (caderno-washi) segurando blocos, adesivos redondos com borda branca (caderno-adesivo) para numeração e símbolos. - 05
Rabiscos em SVG: seta à mão, círculo em volta da palavra, visto de caneta, traço sob o rótulo e a estrelinha "10" vermelha.
- 06
Botões azul-caneta com sombra dura deslocada (
4px 4px 0), como papel recortado. - 07
Cartões inclinam de leve no hover (
caderno-solto, ângulo em--giro).
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
Identidade
- Fundo branco-azulado
#f3f7fccom pauta bem clara na página inteira (caderno-fundo). - Folhas brancas com pauta azul-clara
#cfe0f3a cada 2rem e margem vermelha#e0676b(caderno-pauta). - Texto grafite
#2b3038; secundário#5a6472. Nada de preto puro. - Primária azul-caneta
#1d4fbf: botões, títulos de card, tudo que é "escrito à caneta". - Marca-texto amarelo
#ffe04a(principal) e rosa#ff9ccb(segundo). Só atrás de palavra, adesivo e post-it. - Fontes: Patrick Hand (letra de mão) em títulos, anotações, preços e rótulos; Lexend em todo texto corrido.
Regras
- Um grifo por título. Grifo demais vira caderno de véspera de prova.
- Giro sempre pequeno (±1° a ±6°). Nada de colagem bagunçada.
- Estrela "10" é enfeite de caderno, não nota de aluno: nunca junto de número, resultado ou nome.
- Animações (grifo, rabisco, hover) param com movimento reduzido; o grifo aparece inteiro.
- Grade de horários fica dentro de
overflow-x-autocom paimin-w-0.
Adaptar à marca do cliente
- Cor própria: troque
--d-primarye a cor da sombra dura dos botões (#0f2c70, versão escura da primária). - Papelaria / personalizados / gráfica: "Matérias" vira categorias de produto (adesivo com o símbolo), "Como funciona" vira pedido → arte → aprovação → entrega, "Horários" vira prazos de produção ou retirada.
- Marca rosa: inverta os marca-textos (rosa principal, amarelo segundo). Mantenha a pauta azul e a margem vermelha.
- Marca escura, sóbria ou de luxo? Esse design não é o certo.
Deux fichiers.
Un prompt.
Caderno 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 Caderno.
