Caso.
Portafolio de diseñador de producto en papel crema, con cada proyecto como capítulo de estudio de caso y toda la página marcada con redlines de handoff: medidas, guías punteadas y anotaciones numeradas.
- Tipo
- Landing page
- Tema
- Claro
- Títulos
- Newsreader
- Texto
- Geist
ParaReclutadores, heads de producto y clientes que contratan diseño de producto y quieren ver el proceso, no solo pantallas bonitas
Secciones de la 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.
Del DESIGN.md, que por ahora está en portugués.
ParaReclutadores, heads de producto y clientes que contratan diseño de producto y quieren ver el proceso, no solo pantallas bonitas
Paleta
Los cuatro colores que definen el diseño y todas las variables de tokens.css. Haz clic para copiar.
Tipografía
Newsreader en los títulos, Geist en el texto.
TítulosNewsreader
Aag!
Caso en una línea
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TextoGeist
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.
- profesional que vende razonamiento y proceso
- casos largos con contexto y decisiones
- marca personal sobria, de una sola persona
- áreas reguladas (salud, finanzas, gobierno)
- portafolio de fotografía o ilustración (la imagen va primero)
- tienda o producto con precio
- marca infantil o muy colorida
- quien no tiene casos para escribir
Tono
Lo que lo hace Caso
Las firmas del DESIGN.md: lo que no puede faltar al aplicarlo.Del DESIGN.md, que por ahora está en portugués.
- 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.
Reglas del juego
Directo del DESIGN.md.Del DESIGN.md, que por ahora está en portugués.
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.
Dos archivos.
Un prompt.
Caso 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 Caso.