Koke22 m² · moss court · ¥29,000
J · 10 / 26
J — Japandi
Quiet craft from Japan and Scandinavia.
The style
Two quiet traditions, one room.
Japandi joins Japan and Scandinavia in one word. The word is young: it became a common label in interior design writing in the late 2010s. The kinship it names is older. Both traditions build with natural materials and hand skills, keep rooms sparse, and expect everyday things to last.
From Japan comes ma, the charged interval between things, and wabi-sabi, a beauty found in the plain, the worn and the passing. From the Nordic countries comes a practical warmth: light woods, soft textiles, rooms made for long, dark winters.
On a screen the style keeps that restraint. Warm paper instead of white, one dark ink instead of black, wood and moss as the only accents, hairlines where space alone can’t divide, and motion so slow you barely notice it.
In use
A stay, in very few words.
Haku, a guest house of four rooms, takes a booking on the desktop. Choose two days in November, a room that is free for them, and how many of you are coming. That is all it asks.
- Few wordsDates, a room, how many. The page asks for nothing else until you reserve.
- Warm ground, one inkPaper and linen instead of white, sumi instead of black. Wood and moss only in the pictures.
- Space does the dividingHairlines where they help, and wide margins everywhere else. No shadows, no boxes in boxes.
November
12 – 15 · 3 nightsArrive, leaveFull
Rooms
Guests
Moss, 3 nights·¥87,000with breakfast
The kit
Every part, every state.
The parts that booking is built from: linen sheets, one sumi button, hairline fields, moss for anything switched on. Rows of states hold still for comparison; everything else works.
Button
One dark button per screen; the rest are hairlines
Text field
Only for this stay
Select
Tea is poured when you arrive.
Switch, checkbox, radio
Tea when you arrive
Slider
WarmGentle
Progress
Sencha, steeping6 s
Segments and tabs
Four rooms around one garden. Check in from three.
List rows
Ask at the desk if you need it earlier or later.
Card and loading
Linen on paper, a hairline, no shadowThe skeleton breathes; it doesn’t shimmer
Toast
Modal
A thin sumi veil, not a black scrimSteps
- Done: Dates
- 2Room
- 3Details
- 4Held
Badges and avatars
Garden viewQuiet floorFree tonightFull
Your hostsThree people, one house
Signature
The year in small seasons.
The old almanac splits the year into 24 sekki, and each of those into three kō: 72 microseasons, named as fixed in 1874. Here is the first kō of every sekki. Pick one and the page takes its colours. Then breathe with the ensō for a minute.
Choose a season.
Breathe with the ensō4 s in, 6 s out, for 1 min
Tokens
The system, in numbers.
Nine colours with their contrast, two typefaces, the spacing of the ma, four radii and three speeds. Copy them as custom properties, with the sheet and the button.
Colour
- --washi #efe9dfPaper: the page and its ground
- --linen #f7f3ecLinen: sheets, cards, fields
- --stone #e4ddd0Stone: wells, tracks, skeletons
- --line #cfc5b4Hairlines, never for type
- --sumi #2b2a27Sumi ink: type and buttons, 11.9:1
- --ink-2 #5a554dSecond ink, 6.1:1
- --moss #4f5d43Moss: on and chosen, 5.8:1
- --walnut #7a5a3aWalnut: prices and notes, 5.2:1
- --oak #b8946aOak: wood in pictures only
Type
- A room with a gardenShippori Mincho 500 · headings
- A room with a gardenZen Kaku Gothic New 400 · text
- A room with a gardenZen Kaku Gothic New 500 · labels, spaced
The ma, in pixels
- 4
- 8
- 12
- 16
- 24
- 32
- 48
- 72
- 96
Radii
- Field 4px
- Sheet 6px
- Stone 24px
- Pebble full
Motion
- Settle600msSheets, the page, a season
- Turn300msSwitches, tabs, fills
- Breath4s in, 6s outThe ensō, and nothing else
:root {
/* Paper and ink */
--washi: #efe9df;
--linen: #f7f3ec;
--stone: #e4ddd0;
--line: #cfc5b4;
--sumi: #2b2a27;
--ink-2: #5a554d;
/* Accents: wood and garden */
--moss: #4f5d43;
--walnut: #7a5a3a;
--oak: #b8946a;
/* The ma */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 72px;
--space-9: 96px;
/* Edges */
--hairline: 1px solid var(--line);
--radius-field: 4px;
--radius-sheet: 6px;
--radius-stone: 24px;
/* Motion: slow, and only when asked for */
--settle: 600ms cubic-bezier(0.22, 1, 0.36, 1);
--turn: 300ms cubic-bezier(0.22, 1, 0.36, 1);
/* Type */
--font-display: 'Shippori Mincho', Georgia, serif;
--font-text: 'Zen Kaku Gothic New', system-ui, sans-serif;
}
/* A sheet: linen on paper, a hairline, no shadow */
.sheet {
background: var(--linen);
border: var(--hairline);
border-radius: var(--radius-sheet);
}
/* The one dark thing on the page */
.button {
min-height: 48px;
padding: 0 var(--space-5);
border-radius: var(--radius-field);
background: var(--sumi);
color: var(--linen);
letter-spacing: 0.04em;
}
.button:active {
transform: translateY(1px);
}Do
- Start from a warm paper and one dark ink. Let every other colour come from wood, stone or a garden.
- Leave the space empty. A margin is a decision, not a gap waiting for content.
- Use a hairline only where space alone can’t separate two things.
- Move slowly or not at all. A sheet settles; it never bounces.
Don’t
Don’t fill the shelf
Ten objects is a shop window. Choose two, and give them room.Don’t use pure white and black
At #fff and #000 the room goes cold and the type buzzes. Warm both ends.Don’t gloss it
Gradients, glow and shine read as plastic. Japandi surfaces are matte, like paper and oiled wood.
In the wild
Where the style shows up outside this page.
Katsura Imperial Villa
Kyoto · 17th centuryThe restraint the style borrows: bare timber, paper screens, nothing extra.Wishbone Chair, CH24
Hans J. Wegner · 1949The Danish half: pale wood, a woven seat, one bent line for the back.Muji
Seiyu · 1980No brand on the goods: plain colours, plain names, packaging kept to a minimum.Kinfolk
Nathan Williams · 2011Slow pages: wide margins, quiet type, rooms with one thing in them.