1. Vision
Shizen (自然) means nature, naturalness — the effortless quality at the heart of Japanese aesthetics. This specification defines named token palettes, spacing rooted in ma, typography and motion vocabulary, and AI-ready prompt templates.
2. What Shizen provides
- Color token palettes — Wabi-sabi, Shinto, Edo ink, sakura, yoru
- Spacing scales — Based on ma (間)
- Typography — Ratios and weight guidance
- Motion vocabulary — Duration, easing, opacity-first styles
- Prompt templates — Copy-paste prompts embedding token values
3. Color tokens
Common semantic names: bg, text, accent, muted, border. Use CSS custom properties with a --shizen- prefix.
4. Spacing (ma)
Ma is intentional negative space. Scales like 4/8/16/32/64px (ma-ratio) create rhythm for margin, padding, and gap.
5. Typography
Each pack specifies a ratio (e.g. 1.618), weight, and a short note. Prefer restrained weight and clear hierarchy.
6. Motion vocabulary
- Duration — Typically 300–500ms
- Easing — ease or ease-in-out
- Style — Opacity-first, or transform + opacity
7. Naming conventions
Token names are lowercase and semantic. Use --shizen-<token> in CSS. In prompts, spell out token and hex.
8. Prompt template format
Use [aesthetic] palette: [token list with hex]. Spacing scale: [scale] ([name]). Typography: [ratio] ratio, [weight] weight. Transitions: [duration] [easing], [style]. Style: [short style rule].
9. Aesthetic packs (v1.0)
Five core packs: Wabi-Sabi Neutral, Shinto Ceremonial, Edo Ink, Sakura Season, Yoru (Night).
10. Version and license
Shizen Design System specification v1.0, licensed under CC BY 4.0.