Japandi

Also called: Japanese-Scandinavian, Wabi-Nordic, Japandi minimal

Japanese restraint meets Scandinavian warmth: oat paper, charcoal ink, muted sage, hairlines, enso circles and slatted wood — balanced off-centre, with lots of air.

“Oat & charcoal calm”Organic & NaturalEra: 2020sCalmLuxuryNaturalSeriousNew

Open full screen ↗

japandi / landingEN

japandi / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm2pxRadius md2pxRadius lg3pxRadius xl4pxDensity×1.3Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

oat and charcoalmuted sage accenthairline 1px linesenso brush circlewood slat textureasymmetric balancegenerous whitespacelight mincho serif

Japandi blends wabi-sabi and Nordic function. The ground is warm oat, ink is soft charcoal, and colour is limited to muted sage and a little walnut. Everything is drawn with 1px hairlines and almost-square corners; there are almost no shadows: one long faint shadow under the hero shot. Compositions are deliberately asymmetric — headings sit off-centre, columns are uneven — and spacing is generous so each element can breathe. A brushed enso circle and thin wood-slat strips are the only ornaments, and type pairs a light mincho serif with a quiet geometric sans.

Best for

Spas, onsen, tea houses and meditation apps
Interior, furniture and architecture studios
Boutique hotels and ryokan-style stays
Premium lifestyle and slow-living brands

Avoid for

Promotional e-commerce with many offers
Kids and gaming products
Data-dense operations dashboards

✓ Do

Use 1px charcoal or #D3CBBE hairlines instead of shadows
Offset headings and columns on one shared 1/12-column indent with uneven 7:4 splits rather than centring everything
Keep colour to oat and charcoal plus one sage or walnut accent per component; the wood slats are material, not accent

✕ Don't

Don’t round corners beyond 4px; no pill buttons, badges or chips; circles only for outlined icon rings, avatars, step numbers, radios and small status, legend and tab-bar dots; the switch is the only pill
Don’t fill space just because it is empty
Avoid pure white #FFF and saturated colour

Not to be confused with

Scandinavian Nordic →Scandinavian Nordic is brighter white/birch with pastel accents, friendly rounded sans and soft rounded cards; Japandi is oat and charcoal, square, hairline-thin and serif-led.Minimalism & Swiss Style →Swiss minimalism is a strict grid of bold grotesque type and a signal-red accent; Japandi is warm, asymmetric and uses a light serif, sage and wood textures.Nature Distilled →Nature Distilled is warmer and more colourful — terracotta, sand and grain; Japandi is cooler, emptier and drawn mostly in charcoal lines.

On mobile

Keep generous side margins (24px+) and hairline lists without icon backgrounds; the enso appears once on onboarding and as a faint mark on the featured card. The tab bar is a plain oat strip with a hairline top and a small sage dot under the active item.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinShippori Mincho · 400/500

The quick brown fox

Heading · ThaiNoto Serif Thai · 400/500

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinJost · 300/400/500

Clear words make shared decisions.

Body · ThaiAthiti · 300/400/500

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Noto Serif Thai’s thin, quiet serifs match Shippori Mincho’s light brush-born strokes; Athiti is light and slightly narrow like Jost, so body text stays airy in both scripts.

Colour palette

Light

Dark

Design tokens

Radius	`sm 2px · md 2px · lg 3px · xl 4px · pill 999px`
Border	`1px`
Shadow	`none`
Display	`clamp(2.5rem, 5vw, 4.25rem)`
Motion	`420ms cubic-bezier(.4,0,.2,1)`
Density	`×1.3`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Japandi (japandi) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500&family=Jost:wght@300;400;500&family=Noto+Serif+Thai:wght@400;500&family=Athiti:wght@300;400;500&display=swap
 */
:root {
  --radius: 3px;
  --background: #EDE8DF;
  --foreground: #2A2926;
  --card: #F5F2EC;
  --card-foreground: #2A2926;
  --popover: #F5F2EC;
  --popover-foreground: #2A2926;
  --primary: #2E2D2A;
  --primary-foreground: #F2EEE7;
  --secondary: #7E8C74;
  --secondary-foreground: #1E1F1C;
  --muted: #E3DCD0;
  --muted-foreground: #625E56;
  --accent: #E3DCD0;
  --accent-foreground: #2A2926;
  --destructive: #9C4A3A;
  --border: #D3CBBE;
  --input: #D3CBBE;
  --ring: #2E2D2A;
  --chart-1: #2E2D2A;
  --chart-2: #7E8C74;
  --chart-3: #9F7149;
  --chart-4: #B5AC9C;
  --chart-5: #5F6B70;
  --sidebar: #F5F2EC;
  --sidebar-foreground: #2A2926;
  --sidebar-primary: #2E2D2A;
  --sidebar-primary-foreground: #F2EEE7;
  --sidebar-accent: #E3DCD0;
  --sidebar-accent-foreground: #2A2926;
  --sidebar-border: #D3CBBE;
  --sidebar-ring: #2E2D2A;
}

.dark {
  --background: #1C1B19;
  --foreground: #ECE6DC;
  --card: #24231F;
  --card-foreground: #ECE6DC;
  --popover: #24231F;
  --popover-foreground: #ECE6DC;
  --primary: #E6DFD3;
  --primary-foreground: #1C1B19;
  --secondary: #9AA88F;
  --secondary-foreground: #1C1B19;
  --muted: #2C2A26;
  --muted-foreground: #A9A296;
  --accent: #2C2A26;
  --accent-foreground: #ECE6DC;
  --destructive: #D98572;
  --border: #3B3934;
  --input: #3B3934;
  --ring: #E6DFD3;
  --chart-1: #E6DFD3;
  --chart-2: #9AA88F;
  --chart-3: #C69A72;
  --chart-4: #7C766B;
  --chart-5: #8E9DA3;
  --sidebar: #24231F;
  --sidebar-foreground: #ECE6DC;
  --sidebar-primary: #E6DFD3;
  --sidebar-primary-foreground: #1C1B19;
  --sidebar-accent: #2C2A26;
  --sidebar-accent-foreground: #ECE6DC;
  --sidebar-border: #3B3934;
  --sidebar-ring: #E6DFD3;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Japandi (japandi) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500&family=Jost:wght@300;400;500&family=Noto+Serif+Thai:wght@400;500&family=Athiti:wght@300;400;500&display=swap
 */
@theme {
  --color-bg: #EDE8DF;
  --color-surface: #F5F2EC;
  --color-surface-2: #E3DCD0;
  --color-text: #2A2926;
  --color-text-muted: #625E56;
  --color-primary: #2E2D2A;
  --color-on-primary: #F2EEE7;
  --color-secondary: #7E8C74;
  --color-on-secondary: #1E1F1C;
  --color-accent: #9F7149;
  --color-border: #D3CBBE;
  --color-success: #5D7354;
  --color-warning: #946A2E;
  --color-danger: #9C4A3A;
  --color-chart-1: #2E2D2A;
  --color-chart-2: #7E8C74;
  --color-chart-3: #9F7149;
  --color-chart-4: #B5AC9C;
  --color-chart-5: #5F6B70;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 3px;
  --radius-xl: 4px;
  --radius-pill: 999px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 #0000;
  --shadow-lg: 0 40px 80px -50px rgba(42, 41, 38, 0.35);
  --font-heading: "Shippori Mincho", "Noto Serif Thai", system-ui, sans-serif;
  --font-body: "Jost", "Athiti", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Athiti", monospace;
}

.dark {
  --color-bg: #1C1B19;
  --color-surface: #24231F;
  --color-surface-2: #2C2A26;
  --color-text: #ECE6DC;
  --color-text-muted: #A9A296;
  --color-primary: #E6DFD3;
  --color-on-primary: #1C1B19;
  --color-secondary: #9AA88F;
  --color-on-secondary: #1C1B19;
  --color-accent: #C69A72;
  --color-border: #3B3934;
  --color-success: #9AB58C;
  --color-warning: #D6A766;
  --color-danger: #D98572;
  --color-chart-1: #E6DFD3;
  --color-chart-2: #9AA88F;
  --color-chart-3: #C69A72;
  --color-chart-4: #7C766B;
  --color-chart-5: #8E9DA3;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Japandi (japandi). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500&family=Jost:wght@300;400;500&family=Noto+Serif+Thai:wght@400;500&family=Athiti:wght@300;400;500&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9294,
            0.9098,
            0.8745
          ],
          "hex": "#ede8df"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.949,
            0.9255
          ],
          "hex": "#f5f2ec"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8902,
            0.8627,
            0.8157
          ],
          "hex": "#e3dcd0"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1608,
            0.149
          ],
          "hex": "#2a2926"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3843,
            0.3686,
            0.3373
          ],
          "hex": "#625e56"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.1765,
            0.1647
          ],
          "hex": "#2e2d2a"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.9333,
            0.9059
          ],
          "hex": "#f2eee7"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4941,
            0.549,
            0.4549
          ],
          "hex": "#7e8c74"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.1216,
            0.1098
          ],
          "hex": "#1e1f1c"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6235,
            0.4431,
            0.2863
          ],
          "hex": "#9f7149"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8275,
            0.7961,
            0.7451
          ],
          "hex": "#d3cbbe"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3647,
            0.451,
            0.3294
          ],
          "hex": "#5d7354"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5804,
            0.4157,
            0.1804
          ],
          "hex": "#946a2e"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6118,
            0.2902,
            0.2275
          ],
          "hex": "#9c4a3a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.1765,
            0.1647
          ],
          "hex": "#2e2d2a"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4941,
            0.549,
            0.4549
          ],
          "hex": "#7e8c74"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6235,
            0.4431,
            0.2863
          ],
          "hex": "#9f7149"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7098,
            0.6745,
            0.6118
          ],
          "hex": "#b5ac9c"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3725,
            0.4196,
            0.4392
          ],
          "hex": "#5f6b70"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.1059,
            0.098
          ],
          "hex": "#1c1b19"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1412,
            0.1373,
            0.1216
          ],
          "hex": "#24231f"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1725,
            0.1647,
            0.149
          ],
          "hex": "#2c2a26"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9255,
            0.902,
            0.8627
          ],
          "hex": "#ece6dc"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6627,
            0.6353,
            0.5882
          ],
          "hex": "#a9a296"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.8745,
            0.8275
          ],
          "hex": "#e6dfd3"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.1059,
            0.098
          ],
          "hex": "#1c1b19"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.6588,
            0.5608
          ],
          "hex": "#9aa88f"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.1059,
            0.098
          ],
          "hex": "#1c1b19"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7765,
            0.6039,
            0.4471
          ],
          "hex": "#c69a72"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2314,
            0.2235,
            0.2039
          ],
          "hex": "#3b3934"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.7098,
            0.549
          ],
          "hex": "#9ab58c"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8392,
            0.6549,
            0.4
          ],
          "hex": "#d6a766"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.5216,
            0.4471
          ],
          "hex": "#d98572"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.8745,
            0.8275
          ],
          "hex": "#e6dfd3"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.6588,
            0.5608
          ],
          "hex": "#9aa88f"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7765,
            0.6039,
            0.4471
          ],
          "hex": "#c69a72"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4863,
            0.4627,
            0.4196
          ],
          "hex": "#7c766b"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5569,
            0.6157,
            0.6392
          ],
          "hex": "#8e9da3"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 3,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1647,
              0.1608,
              0.149
            ],
            "hex": "#2a2926",
            "alpha": 0.35
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 40,
            "unit": "px"
          },
          "blur": {
            "value": 80,
            "unit": "px"
          },
          "spread": {
            "value": -50,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Shippori Mincho",
        "Noto Serif Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Jost",
        "Athiti",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Athiti",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 400
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 420,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.4,
      0,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.3
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 4
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!