Design for AI

Japanese minimal: UI design prompt

Palette, type rules and a pasteable prompt for japanese minimal. Also called Japanese minimalism, ma design, wabi-sabi web, zen UI, Muji style, kanso. traditional; web usage 2015 onward (Muji, Japanese studios, tea and craft brands).

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
: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.
For design.md, .cursorrules or AGENTS.md
## Design direction
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.

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

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.