Design for AI

Estilo Minimalismo japonês: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de minimalismo japonês. Também chamado de minimalismo japonês, design ma, web wabi-sabi, UI zen, estilo Muji, kanso. tradicional; uso na web de 2015 em diante (Muji, estúdios japoneses, marcas de chá e artesanato).

Traços

  • ma: o vazio é o elemento primário; o conteúdo ocupa uma parte pequena da tela
  • ritmo vertical e texto vertical (writing-mode) usados deliberadamente
  • paleta natural e atenuada: branco washi, tinta sumi, um tom terroso ou índigo
  • tipografia fina, tamanhos pequenos, tracking largo; muitas vezes serifa Mincho combinada com uma gothic sans leve
  • assimetria, posicionamento fora do centro, uma única imagem com muito espaço
  • texturas de papel e materiais naturais, quase invisíveis
  • movimento lento e silencioso: fades de 800ms+, sem quique

Paleta

#f4f1ea washi, #1c1c1c sumi, #8c8478 pedra, #2b3a55 índigo, #b7a58f argila, #dcd6cb linha

Tipografia

Noto Serif JP ou Shippori Mincho para títulos (300-400 a 28-48px, tracking 0.08em), Noto Sans JP ou Zen Kaku Gothic New para o corpo (300-400 a 15-16px, line-height 1.9); latino: Cormorant ou EB Garamond com Geist light

Faça

  • deixe 60% ou mais da viewport vazia no hero; posicione a manchete fora do centro
  • use writing-mode: vertical-rl num label ou elemento de nav para sinalizar a referência
  • mantenha cada transição em 800-1200ms com ease-out; nada estala

Evite

  • não adicione cards, sombras nem bordas grossas; use espaço em branco e filetes finos
  • não use pesos bold; só 300-400, hierarquia por tamanho e espaçamento
  • não preencha o espaço vazio com decoração; o vazio é o design

Conhecido por: Muji, site de Ryuichi Sakamoto, Nendo, Ippodo Tea, trabalho de Kenya Hara

Semente CSS
:root {
  --bg: #f4f1ea;
   --fg: #1c1c1c;
   --muted: #8c8478;
   --accent: #2b3a55;
   --line: #dcd6cb;
   --radius: 0;
   --tracking: 0.08em;
   --font: 'Noto Sans JP',sans-serif;
   --font-display: 'Shippori Mincho',serif
}
Prompt

Construa o site em estilo minimalismo japonês (ma). Fundo #f4f1ea, texto #1c1c1c, atenuado #8c8478, acento único #2b3a55 índigo, filetes #dcd6cb. Fontes: Shippori Mincho 400 para títulos a 40/28/20px com letter-spacing 0.08em e line-height 1.4; Noto Sans JP 300 a 15px, line-height 1.9, para o corpo, max-width 34em. Hero: altura da viewport, uma manchete posicionada a 15% da esquerda e 60% do topo, uma única imagem pequena (no máximo 360px de largura) no canto superior direito; pelo menos 60% do hero fica vazio. Um label de nav ou o índice da seção em writing-mode: vertical-rl, posicionado na borda direita. Seções separadas por 160px de espaço e um único filete 1px #dcd6cb de 80px de largura, alinhado à esquerda. Sem cards, sem sombras, sem raio, sem bold. Os botões são texto com sublinhado de 1px e tracking 0.1em. As imagens não têm borda e surgem com fade de 1000ms ease-out no scroll. Todas as transições em 800ms.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo minimalismo japonês (ma). Fundo #f4f1ea, texto #1c1c1c, atenuado #8c8478, acento único #2b3a55 índigo, filetes #dcd6cb. Fontes: Shippori Mincho 400 para títulos a 40/28/20px com letter-spacing 0.08em e line-height 1.4; Noto Sans JP 300 a 15px, line-height 1.9, para o corpo, max-width 34em. Hero: altura da viewport, uma manchete posicionada a 15% da esquerda e 60% do topo, uma única imagem pequena (no máximo 360px de largura) no canto superior direito; pelo menos 60% do hero fica vazio. Um label de nav ou o índice da seção em writing-mode: vertical-rl, posicionado na borda direita. Seções separadas por 160px de espaço e um único filete 1px #dcd6cb de 80px de largura, alinhado à esquerda. Sem cards, sem sombras, sem raio, sem bold. Os botões são texto com sublinhado de 1px e tracking 0.1em. As imagens não têm borda e surgem com fade de 1000ms ease-out no scroll. Todas as transições em 800ms.

## Tokens
:root { --bg:#f4f1ea; --fg:#1c1c1c; --muted:#8c8478; --accent:#2b3a55; --line:#dcd6cb; --radius:0; --tracking:0.08em; --font:'Noto Sans JP',sans-serif; --font-display:'Shippori Mincho',serif }

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.