Caso.
Portfólio de designer de produto em papel creme, com cada projeto como capítulo de estudo de caso e a página inteira marcada por redlines de handoff: medidas, guias pontilhadas e anotações numeradas.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Newsreader
- Texto
- Geist
ParaRecrutadores, heads de produto e clientes que contratam design de produto e querem ver processo, não só telas bonitas
Seções da página01/07Topo e navegação
Portfólio de designer de produto como revista de estudos de caso, com a página inteira marcada pelas redlines de um handoff. Papel creme, tinta quase preta, um vermelho de marcação. Parece um documento de trabalho bem diagramado, não um template de portfólio.
ParaRecrutadores, heads de produto e clientes que contratam design de produto e querem ver processo, não só telas bonitas
Paleta
As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.
Tipografia
Newsreader nos títulos, Geist no texto.
TítulosNewsreader
Aag!
Caso em uma linha
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoGeist
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.
- profissional que vende raciocínio e processo
- casos longos com contexto e decisões
- marca pessoal sóbria, de uma pessoa só
- áreas reguladas (saúde, finanças, governo)
- portfólio de fotografia ou ilustração (imagem em primeiro lugar)
- loja ou produto com preço
- marca infantil ou muito colorida
- quem não tem casos para escrever
Tom
O que faz ser Caso
As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.
- 01
Redlines (
Medida,Guia,Nota): medida com pontas e número em mono, caixa pontilhada com etiqueta de seleção, bolinha vermelha numerada. Ficam a 30% (.caso-rl) e vão a 100% no hover/foco do.caso-alvomais próximo..caso-rl--ocultocomeça invisível (linhas do sumário, títulos). - 02
Chave "Inspecionar" na nav (checkbox +
:has(), sem JS): acende todas as redlines, mostra as colunas da grade no topo e revela os "depois". - 03
Sumário de revista: nº do capítulo em mono, título em serifa grande, cliente, ano, papel. Casos fechados em tom apagado com cadeado "Sob NDA".
- 04
Capítulo: número gigante em itálico, título, ficha técnica em 5 colunas, anotações "À margem" à esquerda (sticky), contexto com capitular, problema em uma frase dentro de uma guia, decisões numeradas
1.1, 1.2com "Por quê" em verde, e "O que mudou". - 05
Antes/depois em wireframe de div: o depois fica sob uma capa de papel manteiga hachurada que recolhe no hover/foco (a capa é um
<button>, então o toque no celular também revela). - 06
Tela de handoff com as medidas reais (24, 8, 48, 16) e a tabela de medidas ao lado.
- 07
Caderno de pesquisa para "Como eu trabalho": pauta de 32px, margem dupla vermelha, furos, entradas datadas, post-its, esboço em SVG e contagem em tracinhos.
Regras do jogo
Direto do DESIGN.md.
Identidade
- Fundo papel creme
#f4efe6;surface#fbf8f2(ficha, capítulos alternados, caderno);surface-2#ebe4d6(fundo dos mockups). - Texto tinta
#1b1a17; secundário#6a645a. Fios de seção em tinta cheia (border-text), fios internos emborder-border. - Vermelho redline
#e5484d: SÓ para marcas de especificação (medidas, guias, notas numeradas, margem do caderno), sublinhado de link e hover. Nunca em fundo grande nem em texto corrido. - Verde
#2d5b46: estado escolhido nos wireframes, "Por quê", disponibilidade. Pouco. - Fontes: Newsreader para títulos (itálico só na ênfase e nos números de capítulo), Geist para texto, Red Hat Mono para rótulos, metadados e números das medidas.
- Raio pequeno (3px/6px). Sem sombra difusa, sem gradiente, sem vidro.
Regras
- Composição assimétrica em grade de 12: texto nunca centralizado, coluna de leitura até 560px.
- Um botão cheio na página (topo). O resto é link sublinhado em vermelho ou lista com seta.
- Redline sempre com número de verdade: se escrever "24", o espaço mede 24px.
- Medida nunca pode tapar texto: fica em respiro (entre blocos, margem, padding).
- Animação:
data-sobeno topo,data-revelaabaixo, transições curtas; tudo para emprefers-reduced-motion. - Sem ícone decorativo. Lucide só em setas e cadeado,
size-4.
Adaptar à marca do cliente
- A cor da pessoa entra em
--d-accent(o verde). O vermelho de redline fica: ele é a linguagem. Se a marca já for vermelha, mude a redline para magenta#d6336ce mantenha uma só. - Fundo pode ir para branco-gelo, nunca para branco puro nem escuro.
- Outra serifa editorial com itálico (Fraunces, Source Serif) substitui a Newsreader sem perder o tom.
Dois arquivos.
Um prompt.
O Caso 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 Caso.