Japandi Minimal

---
name: japandi-minimal
description: Apply the Japandi Minimal visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Japandi Minimal, mentions japandi, japanordic, zen scandi, or describes layered greige neutrals, crisp black accents, wood and linen material tones — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Japandi Minimal Design System

The Japanese-Scandinavian hybrid: layered greige neutrals, crisp sumi-black accents, wood and linen tones, and a calm, structured product grid. Warmer and more furniture-catalog functional than pure wabi-sabi, quieter and earthier than Nordic white.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Japandi Minimal.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (japandi, japanordic, zen scandi, wabi-hygge, japanese scandinavian fusion), or describes its traits: layered greige neutrals; crisp black accents; wood and linen material tones; structured functional grid; low-contrast calm; craft-object photography.

## Design tokens

### Color palette

- Greige page ground — warmer than Nordic white, grayer than cream: `#eeebe4` (--color-bg)
- Raised cards and product tiles: `#f6f4ef` (--color-surface)
- Primary text, warm near-black: `#26241f` (--color-text)
- Secondary text and captions: `#635f52` (--color-text-muted)
- Sumi black — buttons, rules, logotype; the only emphasis color: `#1c1a16` (--color-accent)
- Oak/walnut tone echoed from photography, for tags and small warm touches: `#b28a5f` (--color-wood)
- Textile neutral for section bands and image placeholders: `#d8d0c0` (--color-linen)
- Hairline separators: `#ddd7cb` (--color-border)

### Typography

- Display / headings: Urbanist (fallback: Futura, Helvetica Neue, sans-serif)
- Body: Hanken Grotesk (fallback: Helvetica Neue, Arial, sans-serif)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 300, line-height 1.2, letter-spacing 0.01em
- Body: line-height 1.65, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 32, 48, 64, 96, 128 — Generous but structured: consistent large gaps on a strict grid — calm through order rather than through wabi-sabi's asymmetric emptiness.
- Border radius: none 0px, sm 2px, md 8px — Mostly square, echoing joinery and furniture edges; 8px only on soft product tiles.
- Border treatment: 1px solid #ddd7cb — Hairlines only; a single 1px black rule under the nav or a heading is the strongest border on the page.

### Shadows

- whisper: `0 1px 2px rgba(28, 26, 22, 0.06)` — Default card lift, barely perceptible
- lift: `0 8px 24px rgba(28, 26, 22, 0.08)` — Hover state on product tiles and modals

### Layout

- Max content width: 1320px
- Strict 12-column grid with wide gutters; products in calm 2-3 column rows
- Full-width linen-tone bands separate editorial sections from commerce sections
- Photography does the coloring: large wood/ceramic/textile images inside square frames
- One black rule under the nav anchors the whole page

### Effects

- Very subtle linen or paper texture on section bands (2-3% opacity)
- Images fade in with a slow opacity-only transition

### Motion

- Easing: cubic-bezier(0.25, 0.1, 0.25, 1); durations 200ms / 400ms / 700ms
- Opacity-only fades; almost no translation
- Hover on product tiles swaps to a second photograph with a slow crossfade
- No parallax, no scroll-triggered choreography

## CSS variables (drop-in)

```css
:root {
  --color-bg: #eeebe4;
  --color-surface: #f6f4ef;
  --color-text: #26241f;
  --color-text-muted: #635f52;
  --color-accent: #1c1a16;
  --color-wood: #b28a5f;
  --color-linen: #d8d0c0;
  --color-border: #ddd7cb;
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 8px;
  --shadow-whisper: 0 1px 2px rgba(28, 26, 22, 0.06);
  --shadow-lift: 0 8px 24px rgba(28, 26, 22, 0.08);
  --border-default: 1px solid #ddd7cb;
  --font-display: Urbanist, Futura, "Helvetica Neue", sans-serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.65;
  --tracking-heading: 0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@300;500&family=Hanken+Grotesk:wght@400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Airy 72px bar on the greige ground, logotype in light Urbanist, 1px black rule beneath; links in small Hanken Grotesk with wide spacing
- **Hero:** Light-weight Urbanist headline over greige, one large square-cropped photograph of wood or ceramic, one black text link with underline
- **Card:** Surface tile, square corners, whisper shadow, photograph on linen ground, name and price in small text with wide tracking
- **Button (primary):** Sumi-black fill, greige (#eeebe4) text, square corners, 14px 28px padding
- **Button (secondary):** No fill, 1px black border, black text; underlined text-link style also acceptable
- **Form fields:** Surface fill, 1px hairline border, square corners; focus darkens the border to sumi black without a glow

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

Greige-on-greige layering punctuated by a few decisive sumi-black elements — a thin black rule, a black logotype, one black button — while warm wood-tone photography carries all the remaining color. Spend boldness here; keep everything else quiet.

## Do

- Layer at least three warm neutrals per view — the greige-on-greige depth is the style
- Spend black sparingly: one button, one rule, one logotype per viewport
- Let wood, ceramic, and linen photography carry all saturation
- Keep headings light-weight (300) and slightly letterspaced

## Don't

- Don't use cool grays or blue-tinted whites — that drifts into Nordic functionalism
- Don't add a color accent; if it needs emphasis, it gets black
- Don't use Japanese typefaces or vertical text — that belongs to wabi-sabi, not the hybrid
- Don't round corners past 8px; softness comes from the palette, not the geometry

## Accessibility notes

- The greige layers (bg/surface/linen) are close in luminance — never use them to encode meaning, and keep all text at #26241f or #635f52
- Light 300-weight headings need generous sizes (28px+) to stay readable on the low-contrast ground

## Reference sites

- Kinfolk: https://www.kinfolk.com
- Muji: https://www.muji.com
- Minimal Gallery: https://minimal.gallery

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip japandi-minimal.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/japandi-minimal.json

Settings → Capabilities → Skills → Upload skill → japandi-minimal.zip