Files
teamai-test/.teamai/skills/common/web-design-engineer/references/style-recipes/muji-kenya-hara.md
T

53 lines
2.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# muji-kenya-hara — MUJI / Kenya Hara
- **School**: Editorial / Minimalist
- **Vibe**: Emptiness as fullness, off-white as a value, near-silence
- **Best for**: Premium quiet positioning, lifestyle goods, "everyday craft" identity
- **Touchstone**: muji.com (any region), Kenya Hara's book *White*, MUJI ryokan signage
**Palette**
- Ground: `#F4F2EC` (warm paper off-white — never `#FFFFFF`)
- Ink: `#2A2A28` (warm ink, never `#000000`)
- Secondary text: `#7C7B76`
- Hairline: `#D9D6CD`
- Accent: there is none. If you must add one, a single brand red `#C8161D` used only as a tiny corner mark or rule.
**Typography**
- Display: a humanist sans like Söhne, Inter Tight, or Klim's Calibre — weight 400, never bolder than 500. Letterspacing slightly open (0.01em–0.02em).
- Body: same family at 15–16px, line-height ~1.8
- Japanese-bilingual deployments: Noto Sans CJK JP paired weight-for-weight
**Spacing**: 8 / 16 / 32 / 48 / 96 / 160 / 240. The big numbers matter — 240px between sections is normal.
**Radius**: 0. Hard, honest edges. Maybe 2px on form fields.
**Shadow**: none.
**Motion**: imperceptible. Fades over 600–900ms. Nothing translates more than a few px. Never bouncy.
**Signature moves**
- 60–80% of the page is empty space — content lives in a narrow column, far from edges
- One product image per "screen", small relative to the page, captioned plainly
- Tiny labels (10–11px, letter-spaced) describing what each section is — "01 — Cotton" — never headlines that shout
- Square-bracket-style asides, kept neutral
- Rules (1px hairlines) are the only ornament
**Avoid**
- Any saturated color other than the MUJI red as a corner mark
- Drop shadows, glows, gradients of any kind
- Tabs, accordions, mega-menus, sticky banners
- "Above the fold" thinking — MUJI lets the eye start in the middle of the page
**AI prompt seed**
> Single household object on warm off-white #F4F2EC paper ground, raked daylight from upper left, very long quiet space around the object, 3:2, photographed on film, no shadow drama, neutral tone.
**Don't use when**
- The product needs to communicate feature density (specs, pricing tiers, comparison tables) — MUJI's quietness will hide the message
- The audience scrolls fast and demands signal density (news / SaaS / dashboard) — they'll bounce
- The brand is in a noisy competitive set and needs to shout — quietness is luxury, but luxury isn't always what's needed
---
> **Same school — Editorial / Minimalist**: [`apple-hig`](./apple-hig.md) · [`aesop`](./aesop.md) · [`dieter-rams-braun`](./dieter-rams-braun.md) · [`monocle-magazine`](./monocle-magazine.md)
> **Browse all 25 recipes**: [INDEX.md](./INDEX.md)