# Minimalismo japonês (ma)

Também chamado de: minimalismo japonês, design ma, web wabi-sabi, UI zen, estilo Muji, kanso  
Era: tradicional; uso na web de 2015 em diante (Muji, estúdios japoneses, marcas de chá e artesanato)  
Página: https://designforai.dev/pt/style/japanese-minimal

## 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

```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.