Stylogeny combining Japanese Dense Web Design × Ma

Try

Style combination · Contrasts

Japanese Dense Web Design × Ma

Japan's minimalism in the traditional arts and design is what writers on these sites (Zeldman, 2010; Hongkiat) set against them; leave one deliberately empty module in a dense page to make the tension a choice.

From the research on Japanese Dense Web Design

Mix them and make something Japanese Dense Web Design Ma

CalmJapanese Dense × Ma1999 · 1500
A sample layout drawn from the recipe: shapes from Japanese Dense Web Design, their arrangement from Japanese Dense Web Design, the finish from Ma. Not a real work, and not an image of either style.

01

What each style brings

Each part of the design comes from the style with the stronger say in it, and each style gives at least two.

Japanese Dense Web Design Ma & Wabi-sabi Aesthetics

Type from Japanese Dense Web Design
Colour from Ma
Form from Japanese Dense Web Design
Composition from Japanese Dense Web Design
Surface from Ma

02

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · Japanese Dense Web Design

Calm

Zen Kaku Gothic New, standing in for Hiragino Kaku Gothic (Jiyukobo; the Hiragino family from 1993), the Apple system gothic, first in the stacks of mhlw.go.jp ('ヒラギノ角ゴ Pro W3') and Rakuten Travel (ProN)

Text · Ma

A Japanese aesthetic rooted in Zen and the wabi tea ceremony that prizes austerity, imperfection, impermanence and the charged interval (ma) between things. In graphic design it appears as vast empty grounds, a single off-centre element, muted natural colours, visible material texture and the unrepeatable brush mark, from ink painting to Muji's 'emptiness'.

Shippori Mincho; Ma used Bokuseki and Sōsho cursive kana and kanji

03

The colours

The ground and leading colours come from Ma, with a counter-accent from Japanese Dense Web Design. The ink reads on the ground at 4.5:1 or more.

Japanese Dense Web Design Ma & Wabi-sabi Aesthetics

  • #e9e4d8 ground · 36%
  • #2b2a28 ink · 14%
  • #7d4e3a accent · 18%
  • #0650cb accent · 14%
  • #b9a88a accent · 10%
  • #bf0000 accent · 8%

As CSS

:root {
  --ground: #e9e4d8;
  --ink: #2b2a28;
  --accent-1: #7d4e3a;
  --accent-2: #0650cb;
  --accent-3: #b9a88a;
  --accent-4: #bf0000;
  --font-display: "Zen Kaku Gothic New", sans-serif;
  --font-text: "Shippori Mincho", serif;
}

Use it with care

Japanese Dense Web Design: Treat this as one Japanese web convention among several, not as a national essence or simply as bad design: commentators argue the density serves readers who want complete information before deciding (McGowan, 2018; Fujitsu Benelux, 2025), and many Japanese brands (MUJI, UNIQLO, POLA) choose minimal sites. Similar density appears on Korean portals such as Naver, which Fujitsu Benelux sets beside Yahoo! JAPAN, and Cruz found other regions that write in CJK characters close to Japan, so do not present it as uniquely Japanese. Dense pages still need accessibility work: offer a text-size control and a pause button for rotating banners, as mhlw.go.jp does, and give headlines lettered as images real text or alt text.

05

More combinations

With Japanese Dense Web Design

With Ma

All 26 combinations with Ma

Every style combination