Home / Cultural and Aesthetic / Japandi
Japandi CSS Template, Free with Live Demo
Free Japandi website template for a ceramics shop. Warm neutrals, oak tones, soft shapes and a calm layout mixing Japanese and Nordic style. Live demo. The example is Mado, a ceramics and homeware shop.
What is japandi?
Japandi mixes Japanese calm with Scandinavian comfort. The colors are rice paper, linen, oak and charcoal, the shapes are soft, and there is a lot of empty space so each object can breathe.
The hero is a still life drawn in CSS: pots on an oak shelf and a single branch. The type pairs Shippori Mincho, a Japanese serif, with a quiet sans, and nothing on the page competes for attention.
Good for
- Homeware, ceramics and furniture shops
- Interior designers
- Tea, skincare and wellness brands
- Architecture and slow living blogs
What you get in this template
- Warm neutral palette with oak and moss accents
- CSS still life of pots and a branch on a shelf
- Shippori Mincho headings for a gentle Japanese feel
- Underline style text link instead of a loud button
- Three category columns with plenty of space
The key CSS
This is the part that makes the japandi look work. Copy it into your own project.
:root {
--rice: #f2ede4; --linen: #e6ddd0; --oak: #b89572;
--char: #2f2b27; --moss: #737a5b;
}
h1 { font-family: "Shippori Mincho", serif; font-weight: 500; line-height: 1.3; }
.pot { border-radius: var(--r); box-shadow: inset -10px -6px 18px rgba(0, 0, 0, .12); }
.btn { border-bottom: 1px solid var(--char); padding-bottom: 4px; }How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
What is Japandi design?
Japandi is a mix of Japanese and Scandinavian design: minimal, calm and natural, with warm neutral colors, wood and handmade objects.
Which colors are Japandi?
Off white, beige, oak, soft grey and charcoal, with a muted green or clay as an accent.
Which fonts suit a Japandi website?
A soft serif like Shippori Mincho or Cormorant for headings, and a light sans such as Zen Kaku Gothic New for text.
More Cultural and Aesthetic designs
082. Scandinavian
Fjell, cabin rentals in Norway
083. Cottagecore
Bramble and Bee, a farm jam shop
084. Dark Academia
Ravenhall, a reading society
085. Vaporwave
Palm Mall FM, a synth music label
086. Solarpunk
Sunroot, a community solar co-op
087. Bauhaus
Weimar Workshop, a design exhibition
088. Art Deco
The Gilded Lily, a cocktail bar
089. Islamic Geometric
Riad Zellige, a guesthouse in Marrakech