Japanese interfaces often feel different: calmer, more restrained, with a sense of space and subtle hierarchy. That’s not by accident. A few core ideas from Japanese aesthetics translate directly into UI and CSS — and into the prompts you use with AI tools.
1. Ma (間) — Negative space that does the work
Ma is the space between elements: the pause, the breath, the silence. In UI terms, it’s margin, padding, and gap used deliberately instead of filling every pixel.
In practice: Use a small, consistent spacing scale (e.g. 4, 8, 16, 32, 64px). Avoid one-off values. The Shizen spec calls this the ma-ratio scale.
2. Wabi-sabi — Restraint and imperfection
Wabi-sabi values simplicity, asymmetry, and the beauty of imperfection. In UI: muted palettes, light typography, minimal decoration.
In practice: Prefer a limited palette. Keep shadows under 1px or omit them. See the Wabi-Sabi pack.
3. Kisetsukan (季節感) — Seasonal feeling
Japanese design often reflects the season. Shizen’s aesthetic packs (Sakura, Yoru, Edo Ink, Shinto) are built around these moods.
In practice: Pick one mood per screen. The Prompt Builder combines aesthetic + season + mood into one prompt.
4. Typography — Rhythm and clarity
Use a modular scale for font sizes. Prefer light or regular for body; medium or semibold only for emphasis. Keep line-height around 1.5–1.7.
5. Motion — Stillness first
Prefer opacity and light transform over big movements. Use ~400ms ease. Avoid animation on load unless it’s very subtle.
6. From principles to tokens and prompts
- Color tokens — Named palettes with hex values
- Spacing scales — Named scales so you don’t invent numbers
- Ready-to-paste prompts — One block for Cursor, Figma AI, Webflow AI, and more