Design for AI

Stil Japanisch minimal: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für japanisch minimal. Auch bekannt als japanischer Minimalismus, Ma-Design, Wabi-Sabi-Web, Zen-UI, Muji-Stil, Kanso. traditionell; Web-Nutzung ab 2015 (Muji, japanische Studios, Tee- und Handwerksmarken).

Merkmale

  • Ma: Leere ist das primäre Element; Inhalt belegt nur einen kleinen Teil der Fläche
  • vertikaler Rhythmus und vertikaler Text (writing-mode) bewusst eingesetzt
  • natürliche, gedämpfte Palette: Washi-Weiß, Sumi-Tinte, ein Erd- oder Indigoton
  • dünne Schrift, kleine Größen, weites Tracking; oft Mincho-Serif mit einer leichten Gothic-Sans
  • Asymmetrie, außermittige Platzierung, ein einzelnes Bild mit viel Raum
  • Texturen aus Papier und natürlichen Materialien, kaum sichtbar
  • Motion ist langsam und leise: 800ms+ Fades, kein Bounce

Palette

#f4f1ea Washi, #1c1c1c Sumi, #8c8478 Stein, #2b3a55 Indigo, #b7a58f Ton, #dcd6cb Linie

Schrift

Noto Serif JP oder Shippori Mincho für Überschriften (300-400 bei 28-48px, 0.08em Tracking), Noto Sans JP oder Zen Kaku Gothic New für Fließtext (300-400 bei 15-16px, line-height 1.9); Latein: Cormorant oder EB Garamond mit Geist Light

Do

  • lass 60 % oder mehr des Viewports im Hero leer; platziere die Headline außermittig
  • nutze writing-mode: vertical-rl für ein Label oder Nav-Element, um die Referenz zu signalisieren
  • halte jede Transition bei 800-1200ms mit ease-out; nichts snappt

Don't

  • füge keine Karten, Schatten oder dicken Ränder hinzu; nutze Weißraum und Haarlinien
  • nutze keine fetten Schnitte; nur 300-400, Hierarchie über Größe und Abstand
  • fülle den leeren Raum nicht mit Dekoration; die Leere ist das Design

Bekannt dafür: Muji, Seite von Ryuichi Sakamoto, Nendo, Ippodo Tea, Arbeiten von Kenya Hara

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

Baue die Seite im japanisch-minimalen Stil (Ma). Hintergrund #f4f1ea, Text #1c1c1c, gedämpft #8c8478, einziger Akzent #2b3a55 Indigo, Haarlinien #dcd6cb. Schriften: Shippori Mincho 400 für Überschriften bei 40/28/20px mit 0.08em letter-spacing und line-height 1.4; Noto Sans JP 300 bei 15px, line-height 1.9, für Fließtext, max-width 34em. Hero: Viewport-Höhe, eine Headline bei 15 % von links und 60 % von oben, ein einzelnes kleines Bild (max 360px breit) oben rechts; mindestens 60 % des Hero bleiben leer. Ein Nav-Label oder der Abschnittsindex in writing-mode: vertical-rl, am rechten Rand positioniert. Abschnitte getrennt durch 160px Abstand und eine einzelne 1px #dcd6cb Haarlinie, 80px breit, linksbündig. Keine Karten, keine Schatten, kein Radius, kein Fett. Buttons sind Text mit 1px Unterstreichung und 0.1em Tracking. Bilder haben keinen Rand und blenden beim Scrollen über 1000ms ease-out ein. Alle Transitions 800ms.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im japanisch-minimalen Stil (Ma). Hintergrund #f4f1ea, Text #1c1c1c, gedämpft #8c8478, einziger Akzent #2b3a55 Indigo, Haarlinien #dcd6cb. Schriften: Shippori Mincho 400 für Überschriften bei 40/28/20px mit 0.08em letter-spacing und line-height 1.4; Noto Sans JP 300 bei 15px, line-height 1.9, für Fließtext, max-width 34em. Hero: Viewport-Höhe, eine Headline bei 15 % von links und 60 % von oben, ein einzelnes kleines Bild (max 360px breit) oben rechts; mindestens 60 % des Hero bleiben leer. Ein Nav-Label oder der Abschnittsindex in writing-mode: vertical-rl, am rechten Rand positioniert. Abschnitte getrennt durch 160px Abstand und eine einzelne 1px #dcd6cb Haarlinie, 80px breit, linksbündig. Keine Karten, keine Schatten, kein Radius, kein Fett. Buttons sind Text mit 1px Unterstreichung und 0.1em Tracking. Bilder haben keinen Rand und blenden beim Scrollen über 1000ms ease-out ein. Alle 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 }

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.