# Japanese minimal (ma)

Also called: Japanese minimalism, ma design, wabi-sabi web, zen UI, Muji style, kanso  
Era: traditional; web usage 2015 onward (Muji, Japanese studios, tea and craft brands)  
Page: https://designforai.dev/style/japanese-minimal

## Traits

- ma: emptiness is the primary element; content occupies a small part of the canvas
- vertical rhythm and vertical text (writing-mode) used deliberately
- natural, muted palette: washi white, sumi ink, one earth or indigo tone
- thin type, small sizes, wide tracking; often Mincho serif paired with a light gothic sans
- asymmetry, off-centre placement, a single image given a lot of room
- textures from paper and natural materials, barely visible
- motion is slow and quiet: 800ms+ fades, no bounce

Palette: #f4f1ea washi, #1c1c1c sumi, #8c8478 stone, #2b3a55 indigo, #b7a58f clay, #dcd6cb line

Type: Noto Serif JP or Shippori Mincho for headings (300-400 at 28-48px, 0.08em tracking), Noto Sans JP or Zen Kaku Gothic New for body (300-400 at 15-16px, line-height 1.9); Latin: Cormorant or EB Garamond with Geist light

## Do

- leave 60% or more of the viewport empty in the hero; place the headline off-centre
- use writing-mode: vertical-rl for one label or nav element to signal the reference
- keep every transition at 800-1200ms with ease-out; nothing snaps

## Don't

- do not add cards, shadows or thick borders; use whitespace and hairlines
- do not use bold weights; 300-400 only, hierarchy by size and spacing
- do not fill the empty space with decoration; the emptiness is the design

Known for it: Muji, Ryuichi Sakamoto site, Nendo, Ippodo Tea, Kenya Hara's work

## CSS seed

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

Build the site in Japanese minimal (ma) style. Background #f4f1ea, text #1c1c1c, muted #8c8478, single accent #2b3a55 indigo, hairlines #dcd6cb. Fonts: Shippori Mincho 400 for headings at 40/28/20px with 0.08em letter-spacing and line-height 1.4; Noto Sans JP 300 at 15px, line-height 1.9, for body, max-width 34em. Hero: viewport height, one headline placed at 15% from the left and 60% from the top, a single small image (max 360px wide) placed top-right; at least 60% of the hero stays empty. One nav label or the section index in writing-mode: vertical-rl, positioned on the right edge. Sections separated by 160px of space and a single 1px #dcd6cb hairline 80px wide, left-aligned. No cards, no shadows, no radius, no bold. Buttons are text with a 1px underline and 0.1em tracking. Images have no border and fade in over 1000ms ease-out on scroll. All transitions 800ms.