# Japandi > Japanese restraint meets Scandinavian warmth: oat paper, charcoal ink, muted sage, hairlines, enso circles and slatted wood — balanced off-centre, with lots of air. - Nickname: Oat & charcoal calm - Also called: Japanese-Scandinavian, Wabi-Nordic, Japandi minimal - Category: Organic & Natural - Moods: Calm, Luxury, Natural, Serious - Industries: Fitness & Wellness, Real Estate, Luxury & Premium, Travel & Hospitality, Creative & Portfolio - Style page: https://uilingo.dev/styles/japandi/ 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 ## Audit Passed after 4 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Japandi" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Japanese restraint meets Scandinavian warmth: oat paper, charcoal ink, muted sage, hairlines, enso circles and slatted wood — balanced off-centre, with lots of air. Design keywords: oat and charcoal, muted sage accent, hairline 1px lines, enso brush circle, wood slat texture, asymmetric balance, generous whitespace, light mincho serif. ## Visual language Japanese restraint meets Nordic warmth: a warm oat paper ground (#EDE8DF) with a barely-there vertical fibre, soft charcoal ink (#2A2926), and colour limited to muted sage (#7E8C74) and a touch of walnut. Everything is drawn with 1px hairlines and 2px corners; there are almost no shadows (one long faint shadow under the hero shot). Compositions are deliberately asymmetric — hero copy, section heads and the feature list are indented one column (1/12 of the container) from the left, list items are staggered, and a single tapered ensō brush circle and thin strips of wood slats are the only ornaments. Type is a light mincho serif over a quiet geometric sans, with very generous spacing. ## Signature details (must be visible) - Hairlines instead of shadows: 1px #D3CBBE on surfaces, 1px charcoal on emphasised edges (feature tops, testimonial left rules, KPI tops). shadow-lg is the only shadow: used once, under the floating hero product shot; everything else box-shadow none - Asymmetric balance on one shared 1/12 mark: define --col: calc(min(1200px, 100vw - 62.4px) / 12) once on :root (1200px container, 31.2px page gutters = 3 × the 10.4px density unit) and use it for every indent — hero copy column, section heads, the showcase copy column, the feature list, the form intro and the CTA copy all start exactly var(--col) from the container's left edge, and a faint 1px vertical guide line (#D3CBBE at 55%) runs down landing, form and article pages on that edge (not on dashboards, the component sheet or mobile) - Tapered ensō: inline SVG, viewBox 0 0 200 200, r=70, centre 100,100, butt caps; angles in SVG convention (0° = 3 o'clock, clockwise). Three separate strokes with a 5° brush-lift between them: arc 1 (13px) from -40° to 80° starting on a dot of radius 6.5px, arc 2 (8.5px) from 85° to 160°, arc 3 (4px) from 165° to 295°, leaving the open gap at the top-right. Charcoal version: group opacity .85, used as is on the onboarding panel and article figures. Behind the hero shot: a square element 112% of the shot's width (ring diameter ≈ 78% of the shot's width), centred on the shot's top edge 16% in from its left edge, rotated 150deg at element opacity .4, so the thick left arc and the top arcs show above and left of the card as a faded mid-grey mark, never black - Pale ensō: the same SVG stroked in oat #EDE8DF with no group opacity, faded only by the element's opacity: .12 on the charcoal CTA (380px, 60px off the right edge, vertically centred) and .35 on the mobile featured card (200px, right -90px, top -60px, so it bleeds off the top-right corner and clears the title and progress bar) - Wood slats: repeating-linear-gradient(90deg, #B58C64 0 9px, #8E6844 9px 10px, #A97F58 10px 18px, #6F4F34 18px 20px), used only as thin strips: a 26px slat column at opacity .8, 8px clear of the hero shot's right edge and extending 15% above and below it — the shot ends on the container edge, so this column hangs in the right page gutter (clip the hero with overflow-x: clip so it never causes sideways scroll); a 7px band only on the showcase card's top edge (its right third) and on the left third of the footer's top hairline; a panel in article figures and a strip on the onboarding panel. The slats are material, not an accent colour - Light mincho serif headings at weight 400, tracking 0.01em; line-height 1.18 for Latin-only pages; any page with lang=th uses 1.4 for all headings - Fibre background (web only): SVG feTurbulence fractalNoise baseFrequency .55 .02 (vertical streaks), 2 octaves, recoloured to #4D4538 by an feColorMatrix whose alpha row is 0 0 0 .06 0 — an alpha multiplier of .06 on the noise's own alpha, so the fibre peaks at .06 and averages about half that; 200px tile; mobile uses flat oat - Wide-tracked tiny labels: Latin labels 0.7rem, uppercase, 0.32em tracking, preceded by a 36px hairline; Latin buttons 0.08em. With lang=th, section labels are Thai, 0.85rem, untracked and not uppercased, still preceded by the 36px hairline; Thai buttons, labels and headings are never tracked - Density 1.3 (10.4px unit): sections padded about 135px top and bottom (13 units), generous padding inside cards and lists; even feature items and the middle testimonial drop by 48px - Corners 2px on every surface, input, badge, chip and button. Circles (50%) only for 40px outlined icon rings (1px charcoal), avatars, step numbers, radios and 4–8px dots (status, legend, tab-bar marker). The switch is the only pill. Never pill-shaped buttons, badges or chips ## Design tokens — use these exact values Colours (light mode): - background #EDE8DF - surface #F5F2EC - surface-2 #E3DCD0 - text #2A2926 - text-muted #625E56 - primary #2E2D2A (text on it #F2EEE7) - secondary #7E8C74 (text on it #1E1F1C) - accent #9F7149 - border #D3CBBE - success #5D7354 · warning #946A2E · danger #9C4A3A - chart series #2E2D2A, #7E8C74, #9F7149, #B5AC9C, #5F6B70 Radius: sm 2px, md 2px, lg 3px, xl 4px, pill 999px Border width: 1px Shadows: sm `none`, md `none`, lg `0 40px 80px -50px rgba(42, 41, 38, 0.35)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.3 density Motion: 420ms cubic-bezier(.4,0,.2,1) ## Typography (Latin + Thai) - Headings: Shippori Mincho 400/500 with Thai fallback Noto Serif Thai 400/500 - Body: Jost 300/400/500 with Thai fallback Athiti 300/400/500 - Google Fonts URL: 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 - CSS stacks: heading `"Shippori Mincho", "Noto Serif Thai", system-ui, sans-serif`; body `"Jost", "Athiti", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.5rem, 5vw, 4.25rem), heading weight 400, heading tracking 0.01em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Primary button: charcoal #2E2D2A fill, oat #F2EEE7 text, 2px radius, 0.08em tracking (Latin), no shadow and no lift; hover blends 14% sage into the fill; pressed (:active) fill #1F1E1C with transform none - Secondary button: transparent with a 1px charcoal outline, hover fills it with 16% sage; ghost buttons are text with a 1px underline offset 6px that turns sage on hover - Keyboard focus (:focus-visible) on buttons, inputs, selects and textareas: 2px solid sage #7E8C74 outline, offset 3px - Cards: #F5F2EC surface, 1px hairline, 2px radius, no shadow; hover only darkens the border to charcoal - Feature list: no card boxes — two columns, each item a 1px charcoal top rule, a 40px circular icon ring (1px charcoal outline, transparent fill) and a serif title; even items drop by 48px - Inputs: 2px radius, surface fill, hairline border; focus turns the border charcoal and shows the 2px sage focus outline (offset 3px). In the CTA the email field is a bare 1px oat underline on the charcoal - Badges and chips: transparent with a 1px border in the badge's own text colour at 45%, muted or tone-coloured text, 2px corners (never pills); the solid badge is sage with dark text; active chip and selected segment are solid charcoal with oat text - Pricing: three hairline cards; the charcoal plan uses an oat (#F2EEE7) button with charcoal text and an outlined oat badge (transparent, 1px oat border, oat text); the other plans use charcoal primary buttons - Switch: outlined charcoal track, small charcoal thumb; checked track turns sage - Charts: 1.5px charcoal and sage lines with no area fill, stretched to fill the plot height; solid hairline grid; 10px-thin square-topped vertical bars; 2.5px donut strokes; sage heatmap. Bar labels never break inside a Thai word (nowrap) - Dashboard sidebar: transparent with a hairline right edge; active item marked only by a 2px sage inset line - Tab bar: plain oat strip with a hairline top; active item charcoal with a 4px sage dot below - Footer: a hairline-top oat strip with a 7px slat band on its left third, light-serif logo, muted links in quiet columns - Showcase: copy column on the 1/12 line beside a hairline surface card of the product (tabs plus a session panel), with a 7px slat band on the right third of the card's top edge ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: oversized flush-left headline on a wide column with a narrow supporting column. Navigation: minimal style. Sections in order: hero → features → showcase → testimonials → pricing → cta. Feature section as list. Editorial hero: copy column (7 parts) starting on the 1/12 guide line with a large light serif headline, a single charcoal primary and an outlined secondary; the product shot takes the remaining 4 parts at right, ending on the container edge (for wellness: a session card with a 2-line chart and two KPI cards below), and floats on the one shadow-lg over the faded charcoal ensō, with the 26px wood-slat column in the right gutter. Sections are few and far apart — a staggered two-column feature list, the showcase, testimonials as left-ruled quotes with the middle one dropped 48px, hairline pricing cards with one charcoal plan, and a charcoal CTA whose copy starts on the guide line beside a pale ensō at .12. Forms put the intro copy on the 1/12 line too. Article pages keep a 720px reading column; pull quotes there are light serif 1.5rem with no border, indented one twelfth of that column with a 1px sage hairline across the indent. Footer is a hairline-top oat strip with a 7px slat band on its left third, light-serif logo and muted links. Dashboards are mostly empty oat space, KPIs as open columns with a top rule, and hairline cards; tables use 12px × 8px cells so status badges never clip. Responsive: below 960px the guide line, every --col indent and the 48px drops are removed, and copy sits flush on the 31.2px page gutter. ## Content Use realistic product copy (fictional brand) suited to: Spas, onsen, tea houses and meditation apps. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Rounded cards over 4px, pill-shaped buttons, badges or chips (the switch is the only pill) and soft drop shadows (reads as Scandinavian Nordic) - Bright white, pastels or any saturated accent; more than one accent colour inside a single component - Bold grotesque headlines on a strict centred grid or a signal-red accent (reads as Swiss) - Terracotta, paper grain and colourful earth palettes (reads as Nature Distilled) - Filling empty space with extra cards, icons or decoration, or adding slat bands to every section - Clip-art Japanese motifs (cherry blossoms, torii, waves) — the ensō and slats are enough ## Stack notes One self-contained HTML file with a