Caderno.
Cuaderno de estudiante: hojas rayadas con margen rojo y espiral, cinta washi, post-its, stickers y resaltador amarillo y rosa marcando las palabras clave. Estudioso y cariñoso.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Patrick Hand
- Texto
- Lexend
ParaPadres de alumnos de primaria y secundaria, aspirantes a exámenes de ingreso y quienes compran papelería y personalizados
Secciones de la página01/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.
Del DESIGN.md, que por ahora está en portugués.
ParaPadres de alumnos de primaria y secundaria, aspirantes a exámenes de ingreso y quienes compran papelería y personalizados
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Patrick Hand en los títulos, Lexend en el texto.
TítulosPatrick Hand
Aag!
Caderno en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoLexend
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.
- negocio de un profesor o equipo pequeño
- marca azul, amarilla o rosa
- atención con horario marcado y grilla semanal
- papelería con producto hecho a mano
- escuela grande o universidad con tono institucional
- educación inicial muy lúdica
- marca de lujo o sobria
- tech/SaaS
- salud y servicios jurídicos
Tono
Lo que lo hace Caderno
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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).
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Caderno 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 Caderno.
