Caso.
Product designer portfolio on cream paper, each project a case study chapter and the whole page marked with handoff redlines: measurements, dotted guides and numbered annotations.
- Type
- Landing page
- Theme
- Light
- Headings
- Newsreader
- Body
- Geist
ForRecruiters, heads of product and clients hiring product design who want to see process, not just pretty screens
Page sections01/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.
From DESIGN.md, which is in Portuguese for now.
ForRecruiters, heads of product and clients hiring product design who want to see process, not just pretty screens
Palette
The four colors that define the design and every variable in tokens.css. Click to copy.
Typography
Newsreader for headings, Geist for body text.
HeadingsNewsreader
Aag!
Caso in one line
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
BodyGeist
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.
- professional who sells thinking and process
- long case studies with context and decisions
- sober, one-person personal brand
- regulated fields (health, finance, government)
- photography or illustration portfolio (image comes first)
- store or product with pricing
- children's or very colorful brand
- anyone with no cases to write
Tone
What makes it Caso
The signatures from DESIGN.md: what must be there when you apply it.From DESIGN.md, which is in Portuguese for now.
- 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.
House rules
Straight from DESIGN.md.From DESIGN.md, which is in Portuguese for now.
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.
Two files.
One prompt.
Caso 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 Caso.
