Caderno.
A student's notebook: ruled pages with a red margin and spiral, washi tape, sticky notes, stickers and yellow and pink highlighter marking the keywords. Studious and affectionate.
- Type
- Landing page
- Theme
- Light
- Headings
- Patrick Hand
- Body
- Lexend
ForParents of elementary and high school students, university entrance exam candidates and people who buy stationery and personalized items
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForParents of elementary and high school students, university entrance exam candidates and people who buy stationery and personalized items
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Patrick Hand for headings, Lexend for body text.
HeadingsPatrick Hand
Aag!
Caderno in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyLexend
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.
- business run by one teacher or a small team
- blue, yellow or pink brand
- service by appointment with a weekly schedule
- stationery store with handmade products
- large school or university with an institutional tone
- very playful early childhood education
- luxury or sober brand
- tech/SaaS
- healthcare and legal
Tone
What makes it Caderno
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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).
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Caderno 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 Caderno.
