Caso.
Portfolio de designer produit sur papier crème, chaque projet étant un chapitre d'étude de cas et toute la page marquée de redlines de handoff : cotes, repères en pointillés et annotations numérotées.
- Type
- Landing page
- Thème
- Clair
- Titres
- Newsreader
- Texte
- Geist
PourRecruteurs, responsables produit et clients qui engagent du design produit et veulent voir le processus, pas seulement de jolis écrans
Sections de la page01/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.
Extrait du DESIGN.md, en portugais pour l'instant.
PourRecruteurs, responsables produit et clients qui engagent du design produit et veulent voir le processus, pas seulement de jolis écrans
Palette
Les quatre couleurs qui définissent le design et toutes les variables de tokens.css. Cliquez pour copier.
Typographie
Newsreader pour les titres, Geist pour le texte.
TitresNewsreader
Aag!
Caso en une ligne
ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789
TexteGeist
La police de lecture porte les longs paragraphes sans fatiguer.
Texte courant, boutons, formulaires et légendes. Les titres prennent la police d'affichage ; celle-ci fait le quotidien de la page.
0123456789 · 1 234,56 € · 25/09 à 19h30
Pour qui
Ce que l'IA compare avec le client pour choisir le design.
- professionnel qui vend sa réflexion et son processus
- longues études de cas avec contexte et décisions
- marque personnelle sobre, d'une seule personne
- secteurs réglementés (santé, finance, administration)
- portfolio de photographie ou d'illustration (l'image d'abord)
- boutique ou produit avec prix
- marque enfantine ou très colorée
- ceux qui n'ont pas de cas à raconter
Ton
Ce qui fait Caso
Les signatures du DESIGN.md : ce qui ne doit pas manquer à l'application.Extrait du DESIGN.md, en portugais pour l'instant.
- 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.
Règles du jeu
Directement du DESIGN.md.Extrait du DESIGN.md, en portugais pour l'instant.
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.
Deux fichiers.
Un prompt.
Caso devient le design system de votre agent de code : il construit n'importe quel écran avec ce style, pas seulement la landing d'exemple.
Prompt pour l'agent Utiliser avec l'IA
Lis le DESIGN.md à la racine du projet et suis ses règles sur chaque écran. Importe sistema.css une seule fois au point d'entrée du projet et utilise ses classes et tokens au lieu de créer de nouveaux styles. Avant chaque changement d'interface, relis le DESIGN.md.
- 01Téléchargez les deux fichiersDESIGN.md (les règles visuelles) et sistema.css (tokens, composants et signatures du design).
- 02Ajoutez-les au projetDESIGN.md à la racine. sistema.css importé une fois au point d'entrée : fonctionne avec React, Vue, Svelte, HTML ou WordPress.
- 03Collez le prompt dans votre agentIl lit les règles et construit n'importe quel écran (connexion, tarifs, dashboard) avec le style du design.
- 04Fixez la règleMettez le prompt dans les règles du projet de l'agent pour que chaque nouvel écran suive les mêmes couleurs, polices et espacements.
Similaires
Des landings qui partagent un ton ou un secteur avec Caso.