Japanese web design: 7 principles

Seven principles

01Ma (間) — negative space as content, not absence

Ma is the space between things, and in Japanese design it isn't empty. It's doing work. A page with more space around an idea reads as more confident than a page that fills every inch, because restraint signals you didn't need to convince anyone twice. The instinct to fill white space is usually fear, not design: fear that the page looks unfinished, or that the client won't feel like they got enough for their money. Apply it by giving each section one idea per screen. If a section needs a headline, a sentence, and an image, let those three things breathe. Don't stack a fourth thing next to them because the space "looks empty." It isn't empty. It's doing its job.

02Paper and ink, not black and white

Pure white (#FFFFFF) reads as sterile. Pure black (#000000) reads as harsh, almost aggressive on screen. Neither exists in the physical materials this aesthetic draws from (washi paper, sumi ink, aged wood), so neither should exist on your site. Apply it with a warm off-white for backgrounds and a soft near-black for text. The difference is small in a screenshot and obvious in five minutes of actually reading the page. It's the difference between a site that feels printed and one that feels like a hospital form.

03Vertical type as an anchor, not decoration

A single vertical line of type, a few kanji, or a short label run top to bottom, works like a seal stamped on a document. It's a mark of intention, not a font flex. Most sites that use vertical type make it the hero: centered, huge, doing nothing but announcing "we know about Japanese design." That's backwards. Apply it small, at a screen edge, quiet enough that it rewards a second look instead of demanding a first one. Think stamp, not billboard.

04Serif with intent

A serif with real character (visible stroke contrast, a personality you could describe in one word) carries stillness that a generic system serif can't fake. Georgia and Times New Roman are furniture. They don't carry mood, they just render text, and no amount of size or spacing will make them feel considered. Apply a characterful serif to headlines only, where its personality has room to show, and pair it with a plainer grotesque sans for body copy, where legibility matters more than mood. Two voices, one page: one for weight, one for reading. Using the display serif everywhere just makes the page tired by paragraph three.

05Asymmetry over the grid

Three equal columns is the fastest way to make a page look like it came from a template, because it usually did. Perfect symmetry reads as default, not deliberate: it's what happens when nobody made a call about what matters most. Apply asymmetry by giving one element real weight: one large feature next to two smaller supporting elements, instead of three cards fighting for the same attention. The imbalance is the point. It tells the reader where to look first without a headline that says "look here first," and it's a small, low-cost change that separates a considered layout from a component library default.

06Let photography carry color; let the UI stay quiet

A warm, saturated photo and a saturated UI accent color are two loud things on the same page, and they cancel each other out. The photo loses first, because a button competes for attention in a way a photo can't fight back against, and the eye ends up bouncing between the two instead of settling on either. Apply this by keeping buttons, labels, and UI chrome in ink and a single restrained accent tone, and letting photography be the only genuinely saturated color on the page. Your interface's job is to get out of the way of the thing you're actually selling.

07Slowness as a luxury

Dense paragraphs and rushed copy signal a site that's trying to close you fast, which is its own kind of cheap. Unhurried pacing signals a business that isn't worried you'll leave, because it already knows what it's worth. Apply it with one idea per screen, short declarative sentences, and generous line spacing: copy that takes its time, and doesn't ask you to rush through it either. This is the principle that ties the other six together: space, color, type, and layout can all be quiet, but if the copy is still shouting, none of it lands. Read your homepage out loud. If you're out of breath, so is the reader.

The failure mode — costume, not craft

Most "Japanese-style" sites reach for the same shelf of props: a red circle dropped on the hero as a logo mark, cherry blossom clip art drifting across the header, a brush-stroke display font for the headline, a red-and-white palette borrowed from a flag rather than any actual material. None of this is wrong because it's inauthentic in some abstract sense. It's wrong because it's decoration bolted onto a generic template — the underlying grid, spacing, and type hierarchy are unchanged, and a red circle is doing the job that structural decisions should be doing. Strip the props off one of these sites and what's left is the same three-column SaaS layout you'd find anywhere else. That's the whole difference between costume and craft: a costume goes on top of the body; craft changes the shape of the body itself.

A starting palette and type system you can use today

Here are real values, not placeholders:

• Paper: #F5F1EA, a warm off-white, not pure white.
• Ink: #2B2926, a soft near-black, not pure black.
• Accent (pick one): a clay/earth tone like #8A6350 for warmth, or a dark forest green for something more botanical. Choose one. Never run both at once.
• Typefaces: a serif with character for headlines (Noto Serif JP or Shippori Mincho if the project uses Japanese type, or an equivalent characterful serif for Latin-only projects), paired with a plain grotesque sans for body copy.

One rule of thumb, stated plainly: never fill an entire section background with your accent color. It belongs in type, rules, links, and small accents, never as a wash across a whole section. The moment it becomes a background, it stops being an accent and starts being wallpaper. If you're tempted to use it for a full-bleed banner, use paper or ink instead and let the accent show up in the details.

See it applied

These aren't theoretical. Two live templates apply all seven principles: MOTO, for a Japanese skincare brand, and ASAGIRI, for a Japanese tea brand. Both are free to study even if you never buy one — open them on your phone and see which principle you'd steal first.

FAQ