muji-design 是做什么的？
A design skill for generating and refactoring UI. It places the foundation of Japanese design in the philosophy of MUJI (無印良品), with optimization as its core. The spatial grammar is drawn from the architecture of a Japanese room (washitsu), and the color palette is based on 46 colors.
Core — Optimization
The three perspectives of MUJI are translated and used in UI work.
- Selection of Materials — Colors and textures are used directly from material sources. Oatmeal (generi), bare wood, tatami, stone, moss, cherry blossoms. Colors are selected from this palette range.
- Review of Processes — Waste is eliminated from operational steps and screen transitions. Target operations are placed within easy reach with few steps.
- Simplification of Packaging — Reduce "wrapping" such as frames, badges, and decorations, showing the content directly.
There is one decision axis: "Does this screen feel natural when placed on a MUJI shelf or display?" When in doubt, decide by this question.
Process
- Decide on the main subject — Each screen has one main subject (the tokonoma alcove). All other elements play supporting roles.
- Secure "ma" (negative space) — First, reserve areas where nothing is placed. White space is not leftover; it is an element placed first.
- Draw the skeleton — Divide using wooden slats (san) and lattice (koushi). Divider lines, list rows, and navigation lines are thin; their colors are taken from wood tones.
- Place surfaces — Sections are indicated by thresholds and levels. Use a one-step change in surface color to divide, avoiding reliance on strong borders and shadows.
- Add one accent color — Like flower arrangement (ikebana), place one accent color and design element per screen, off-center.
- Self-check — Go through the checklist below, make one round of reductions, then submit.
Layer 1 — Numeric Values (Fixed Values)
Colors
The palette is the base. For actual screens, use these values assigned to roles, and adjust slightly according to the project. When adjusting, keep saturation low, stay within warm neutrals, and maintain the lightness steps and roles.
Role Assignments (Default)
| Role | Color | HEX |
|---|---|---|
| Background | Oatmeal (generi-iro) | #FBFAF5 |
| Surface (cards, panels) | Shoji white | #F5F5F4 |
| Surface (one level down) | Diffuse light | #E5DCD7 |
| Section level | Light tatami shadow | #D5C0B0 |
| Body text | Dark beam tea | #2E1E12 |
| Supporting text | Rikyū rat (gray) | #888E7E |
| Divider lines / slats | Wood slat (san) | #9F7153 |
| Wood elements | Wood grain | #B3987E |
| Strong surfaces / heading bands | Medium beam tea | #745E4A |
Full 46-Color Palette
- Measured from reference images: Shoji white
#F5F5F4/ Diffuse light#E5DCD7/ Light tatami shadow#D5C0B0/ Tatami#BEB09A/ Wood grain#B3987E/ Wood slat#9F7153/ Medium beam tea#745E4A/ Dark beam tea#2E1E12 - Tatami Morning Light:
#F7F3EA/#E0D2B5/#C1A879/#8E6B3F/#5A4A38 - Japanese Minimalism: White paste
#F5F0E8/ Straw color#E8DFC8/ Oatmeal#EDE0C4/ Matcha#7A8C5E/ Ink dye#6B6B6B/ Victory color#1C1F2B - Wa Colors: Oatmeal
#FBFAF5/ Kneaded color#EDE4CD/ White tea#DDBB99/ Walnut color#A86F4C/ Rikyū tea#A59564/ Rikyū rat#888E7E - Misty Tatami:
#F2EFE6/#D9D1C1/#B7B0A2/#7C776E/#3F3C37 - Plants: Pine needle green
#839B5C/ Moss green#6C8253/ Young bamboo#6B9362/ Nightingale color#928C36/ Pine shadow#3D4F3C - Water / Sky / Stone / Earth: Water light blue
#80ABA9/ Indigo#165E83/ Sand gravel#E8E3D6/ Wet basalt#35393B/ Earth color#BC763C - Cherry blossoms: Cherry blossom pink
#FEF4F4/ Pale cherry#FDEFF2/ Cherry blossom gray#E9DFE5/ Gray cherry#E8D3D1/ Pink carnation#EEBBCB/ Red plum color#F2A0A1
How to Use Colors
- The main subjects of the screen are neutrals: shoji, tatami, wood. Natural colors (plants, water, cherry blossoms) are used as accent colors — only 1 color per screen, covering no more than 10% of the total area. Cherry blossom series are the most restricted in area.
- Color surfaces are applied flat. Relationships between colors are created using lightness steps; gradients are used only where light expression is needed.
- A set of CSS variables is available in
references/design-tokens.css.
Spacing / Dimensions
- Spacing steps: 4 / 8 / 16 / 24 / 40 / 64 (px). Choose margins between elements from these steps.
- Take wide margins at screen edges. Do not compress content width; maintain proportional spacing.
- Keep element heights low (low horizon). Align line heights and control heights in steps within the screen.
Lines / Corners / Shadows
- Divider lines are 1px, using the wood slat color
#9F7153series lightly. - Corner radius is max 4px. Roundness is limited to the subtle rounding of material edges.
- Create shadows using lightness differences between surfaces. When casting shadows, make them soft like diffused light: broad, wide, and light.
Typography
- Headings: Mincho serif (
'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif). - Body text and operation systems: Gothic sans-serif (
'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif). - Font size steps: 12 / 13 / 15 / 17 / 22 / 28 (px). Bold is used only for headings and main subjects. Slightly expand letter spacing for headings; keep body text at standard spacing.
Motion
- Screen transitions follow the motion of a sliding door (shoji). Use quiet horizontal slides as the base, with duration of 200–300ms and a smooth deceleration easing (
cubic-bezier(0.22, 1, 0.36, 1)). - Apply motion only to areas that convey state changes.
Layer 2 — Judgment (Non-Numeric Aspects)
Numbers are the foundation. The final quality is determined by the following judgments.
- Ma (Negative Space) — Check if the empty areas carry meaning. Before adding elements, verify that the "ma" is not disrupted.
- Tranquility — See if the entire screen is quiet. The more colors, lines, and motions, the more tranquility is lost.
- Material Feel and Light — Do not stop at color code reproduction; include the warmth of tatami or wood grain and the feeling of softly diffused light. Express through surface color selection and lightness contrast.
- Subtraction — The decision of what not to place determines the quality more than what to place. When in doubt, choose not to place the element.
Comparison of Good and Broken States
| Aspect | Good State | Broken State |
|---|---|---|
| Main subject | Main subject is immediately obvious | Everything is equally prominent |
| White space | There is breathing room (ma) | Elements are packed to the edges |
| Color | Neutrals dominate, one accent color shines | Multiple accent colors compete |
| Division | Quietly divided by surface level differences | Frames and shadows overlap, creating noise |
| Gaze flow | Flows smoothly from top to bottom without hesitation | Multiple places for the eye to land |
Self-Check (Must Be Passed Before Submission)
- Is the main subject clearly defined as one?
- Is there a feeling of clutter? Are elements packed to the edges?
- Does the gaze not wander? Is there a clear first point of focus and a flow direction?
- Is the screen quiet? Count the number of colors, lines, and motions; reduce if many.
- Is the accent color limited to one color, one location, and within 10% of area?
- Does it pass the decision axis (does it feel natural when placed on a MUJI shelf or display)?
Fix problems found during the check by reducing rather than adding elements, make one round of corrections, then submit.
References
references/design-tokens.css— CSS variables for role colors, spacing, typography, and motionassets/japanese-color-palette.png— Sample of the 46-color paletteassets/cover-mincho.png— Symbolic image of the style (shoji, tatami, low table, a single ikebana arrangement)