Caderno.
Caderno de estudante: páginas pautadas com margem vermelha e espiral, fita washi, post-its, adesivos e marca-texto amarelo e rosa grifando as palavras-chave. Estudioso e afetuoso.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Patrick Hand
- Texto
- Lexend
ParaPais de alunos do fundamental e médio, vestibulandos e quem compra papelaria e personalizados
Seções da 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.
ParaPais de alunos do fundamental e médio, vestibulandos e quem compra papelaria e personalizados
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Patrick Hand nos títulos, Lexend no texto.
TítulosPatrick Hand
Aag!
Caderno em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoLexend
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.
- negócio de um professor ou equipe pequena
- marca azul, amarela ou rosa
- atendimento com horário marcado e grade semanal
- loja de papelaria com produto feito à mão
- escola grande ou faculdade com tom institucional
- educação infantil muito lúdica
- marca de luxo ou sóbria
- tech/SaaS
- saúde e jurídico
Tom
O que faz ser Caderno
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 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).
Regras do jogo
Direto do DESIGN.md.
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.
Dois arquivos.
Um prompt.
O Caderno 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 Caderno.