Agence WagnerAgence Wagner
FRENDEELS
Zurück zu den Designs
MinimalisteMonochromeSpirituelClassique
Vorschau

Ink Wash Design Reference

Overview

Ink Wash is a web design aesthetic rooted in the centuries-old East Asian tradition of ink wash painting, known as sumi-e (墨絵) in Japanese, shui-mo hua (水墨画) in Chinese, and sumukhwa (수묵화) in Korean. This art form, which originated during the Tang Dynasty in China and later flourished in Japan under the influence of Zen Buddhism, distills visual expression down to its barest essentials: black ink, water, a brush, and paper. In sumi-e, the artist captures the spirit or essence (called ki-in or 気韻) of a subject rather than its photographic likeness, using fluid brush strokes that range from bold and decisive to gossamer-thin washes of diluted ink. An ancient aphorism states that "sumi is black and yet it is not black," meaning that the monochromatic ink paradoxically suggests the full spectrum of color through its infinite gradations of tone.

Translated into digital design, the Ink Wash aesthetic embraces radical restraint. Color palettes are overwhelmingly monochromatic, built from graduated shades of ink-black, warm grays, cool grays, and the luminous white of untouched paper. Typography draws from calligraphic traditions, favoring serifs and brush-influenced letterforms that honor the shared heritage of East Asian calligraphy and painting. Layouts are governed by the Japanese concept of ma (間) -- the meaningful void between elements -- where negative space is not emptiness but a deliberate compositional force that gives weight and significance to every stroke that does appear. Compositions tend toward asymmetry, echoing the traditional ink painting principle that perfect symmetry is lifeless while deliberate imbalance creates visual tension and energy.

The emotional register of Ink Wash design is one of meditative calm, intellectual clarity, and quiet sophistication. It rejects visual noise, gratuitous decoration, and saturated color in favor of atmospheric depth, tonal subtlety, and the beauty of imperfection. Surfaces feel like handmade paper. Transitions evoke the slow diffusion of ink into wet fibers. Interactions are gentle and unhurried. The result is a digital experience that feels closer to a contemplative scroll painting than a commercial billboard -- an invitation to slow down, breathe, and perceive the essential nature of content stripped of all excess.

Visual Characteristics

Core Design Traits

  • Monochromatic ink gradients -- the entire visual language is built on graduated shades of black, from the deepest concentrated sumi ink to the palest diluted wash, with white paper serving as a luminous counterpoint
  • Fluid brush stroke textures -- visible, organic brushwork replaces mechanical precision; strokes carry varying pressure, speed, and ink load, creating natural thick-to-thin transitions and dry-brush ragging at the edges
  • Deliberate negative space (ma) -- vast areas of untouched white or near-white are not empty but are active compositional elements; the void defines the form as much as the ink does
  • Asymmetric composition -- layouts avoid bilateral symmetry in favor of intentional imbalance, placing visual weight off-center to create dynamic tension and natural flow, as in traditional hanging scroll composition
  • Atmospheric depth through ink tone -- rather than using color or shadow to suggest spatial depth, Ink Wash design uses tonal variation: darker, more saturated tones advance while pale washes recede, creating a sense of mist, distance, and layered space
  • Boneless forms (mogu) -- shapes defined by washes of tone rather than hard outlines; edges bleed softly into surrounding space, suggesting form through value rather than line
  • Calligraphic line quality -- when line is used, it carries the expressive variation of a loaded brush: confident, gestural, alive with the energy of the hand that made it
  • Wabi-sabi imperfection -- intentional irregularities, rough edges, uneven ink distribution, and organic textures that celebrate the beauty of the handmade and the transient
  • Minimalist content hierarchy -- each section or screen presents a single focused idea, mirroring the sumi-e principle of capturing essence with the fewest possible strokes
  • Wet-on-wet diffusion effects -- soft, blurred transitions where elements appear to bleed into each other like ink applied to damp paper, creating gentle halos and atmospheric softness
  • Seasonal and natural subject matter -- imagery and motifs drawn from the natural world: bamboo, pine, plum blossoms, mountains, water, cranes, and koi, reflecting the traditional "Four Gentlemen" and landscape subjects of ink painting

Design Principles

  • Economy of means -- express the maximum with the minimum; every element must earn its presence on the page, and what is removed is as important as what remains
  • Ki-in (spirit resonance) -- design should convey the living essence of content, not merely its surface appearance; prioritize feeling and atmosphere over literal illustration
  • Ichigo ichie (one time, one meeting) -- each composition is a unique, unrepeatable moment; avoid templates that feel mass-produced and instead craft layouts that feel singular and considered
  • Notan (light-dark harmony) -- the interplay of light and dark is the foundational structure; master the balance between inked and uninked areas before introducing any other design element
  • Fukinsei (asymmetry) -- controlled irregularity and off-center balance create visual interest and natural rhythm; perfect symmetry reads as static and artificial
  • Kanso (simplicity) -- eliminate all that is unnecessary; clutter is the enemy of contemplation, and every extraneous element dilutes the power of those that remain
  • Datsuzoku (freedom from convention) -- allow for unexpected moments of spontaneity: a splash of ink, an irregular edge, a break in the grid that surprises and delights
  • Seijaku (tranquility) -- the overall emotional experience should be one of profound calm; animations are slow, transitions are gentle, and the pace invites stillness

Color Palette

The Ink Wash palette is built on a monochromatic foundation of ink tones, from the deepest concentrated black to the faintest diluted gray, set against the warm luminosity of traditional East Asian paper. Occasional warm or cool undertones in the grays reflect the natural chemistry of sumi ink, which shifts subtly between warm brown-blacks and cool blue-blacks depending on concentration and the grinding of the ink stick. A single restrained accent -- traditionally a vermilion red drawn from the artist's seal stamp (hanko/rakkan) -- provides the only chromatic punctuation.

Swatch Hex Role/Usage
#0D0D0D #0D0D0D Concentrated ink -- headings, primary text, strongest visual anchors
#1A1A1A #1A1A1A Rich ink -- subheadings, navigation text, active states
#333333 #333333 Dark wash -- body text, secondary content, strong borders
#4D4D4D #4D4D4D Medium-dark wash -- supporting text, icon fills
#6B6B6B #6B6B6B Medium wash -- tertiary text, captions, metadata
#8A8A8A #8A8A8A Light-medium wash -- placeholders, disabled states
#A8A8A8 #A8A8A8 Pale wash -- subtle dividers, ghost text
#C4C4C4 #C4C4C4 Faint wash -- card borders, hairline rules
#DCDCDC #DCDCDC Mist wash -- section dividers, hover backgrounds
#EDECE8 #EDECE8 Warm paper -- alternate surface, card backgrounds
#F5F4F0 #F5F4F0 Rice paper -- primary background, the luminous ground
#FAF9F6 #FAF9F6 Pure xuan paper -- lightest surface, modal backgrounds
#C23B22 #C23B22 Vermilion seal (rakkan) -- sole chromatic accent, CTAs, links, alerts
#8B2500 #8B2500 Dark vermilion -- hover/active accent, emphasis borders
#4A3728 #4A3728 Warm ink (sepia undertone) -- alternate text color for warm compositions

CSS Custom Properties

:root {
  /* Ink tones (dark to light) */
  --ink-concentrated:    #0D0D0D;
  --ink-rich:            #1A1A1A;
  --ink-dark-wash:       #333333;
  --ink-medium-dark:     #4D4D4D;
  --ink-medium:          #6B6B6B;
  --ink-light-medium:    #8A8A8A;
  --ink-pale:            #A8A8A8;
  --ink-faint:           #C4C4C4;
  --ink-mist:            #DCDCDC;

  /* Paper tones (warm whites) */
  --paper-warm:          #EDECE8;
  --paper-rice:          #F5F4F0;
  --paper-xuan:          #FAF9F6;

  /* Accent */
  --vermilion:           #C23B22;
  --vermilion-dark:      #8B2500;
  --ink-warm:            #4A3728;

  /* Semantic aliases */
  --color-bg:            var(--paper-rice);
  --color-surface:       var(--paper-warm);
  --color-text:          var(--ink-dark-wash);
  --color-text-heading:  var(--ink-concentrated);
  --color-text-muted:    var(--ink-medium);
  --color-border:        var(--ink-faint);
  --color-accent:        var(--vermilion);
  --color-accent-hover:  var(--vermilion-dark);
}

Typography

Ink Wash typography bridges two worlds: the calligraphic tradition of East Asian brush writing, where each character is a gestural painting, and the Western typographic tradition of structured, readable text. The ideal typeface selections echo the qualities of brush-written letterforms -- visible stroke modulation, organic contrast between thick and thin, and a sense of the hand behind the form -- while remaining fully legible in digital contexts. Weight usage skews toward light and regular; bold weights feel antithetical to the restrained, meditative spirit of the aesthetic. Generous line height and letter spacing honor the principle of ma, allowing each word breathing room.

Google Fonts Recommendations

Font Category Weight Range Role Character
Noto Serif JP Serif (CJK) 200-900 Headings, bilingual content Bridges Japanese and Latin with harmonious proportions
Zen Old Mincho Serif (CJK) 400-900 Display, editorial headings Classical Japanese printing aesthetic with brush heritage
Cormorant Garamond Serif 300-700 Headings, pull quotes High stroke contrast, calligraphic origins, elegant at large sizes
EB Garamond Serif 400-800 Body text, long-form reading Renaissance humanist serif with organic, pen-derived forms
Crimson Pro Serif 200-900 Body text, editorial Refined book face with gentle stroke modulation
Zen Kaku Gothic New Sans-serif (CJK) 300-900 UI text, bilingual labels Clean Japanese gothic with subtle brush influence
Inter Sans-serif 100-900 UI, meta text, captions Neutral, highly legible sans for functional elements
Cormorant Serif (display) 300-700 Large display, hero text Dramatic stroke contrast that echoes brush calligraphy

Font Pairings

Pairing Heading Body Best For
Classical Scroll Cormorant Garamond (300) EB Garamond (400) Editorial, long-form, literary content
East Meets West Zen Old Mincho (400) Crimson Pro (300) Bilingual sites, cultural content
Contemplative Modern Cormorant (300) Inter (300) Portfolios, galleries, minimal sites
Zen Digital Noto Serif JP (300) Zen Kaku Gothic New (400) Japanese-focused sites, apps

CSS Typography Example

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500&family=Zen+Old+Mincho:wght@400;500&display=swap');

/* Base typography */
body {
  font-family: 'EB Garamond', 'Crimson Pro', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink-dark-wash);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
  font-weight: 300;
  line-height: 1.2;
  color: var(--ink-concentrated);
  letter-spacing: 0.02em;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  letter-spacing: 0.04em;
}

h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: 0.03em;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 400;
}

/* Captions and metadata */
.meta, .caption, figcaption {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-medium);
}

/* Calligraphic accent text */
.brush-text {
  font-family: 'Zen Old Mincho', serif;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* Pull quotes */
blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-medium-dark);
  border-left: 2px solid var(--ink-faint);
  padding-left: 1.5rem;
  margin: 2.5rem 0;
}

Layout Principles

  • Ma-driven spacing -- whitespace is the primary structural element; generous margins (80-120px between sections), wide padding, and open gaps in grids create the contemplative pauses that define the aesthetic
  • Asymmetric grid composition -- avoid perfectly centered, symmetrical layouts; offset content blocks, use unequal column ratios (1:2, 2:3, 1:3), and allow images to break alignment for organic visual rhythm
  • Single-focus sections -- each viewport or section presents one thought, one image, one idea; resist the urge to pack multiple messages into a single view, just as a sumi-e painting captures a single moment
  • Vertical scroll as scroll painting -- treat the page as an unrolling scroll (makimono or kakejiku); content reveals itself gradually and sequentially as the user scrolls, each section a new scene in a continuous visual narrative
  • Landscape-oriented image containers -- favor wide, horizontal image compositions that echo the panoramic format of East Asian landscape scroll paintings; tall, portrait-format images feel less native to the aesthetic
  • Narrow content measure -- text blocks should be constrained to 600-780px maximum width, honoring the focused, intimate quality of ink painting compositions
  • Floating, anchored elements -- key visual elements should feel like they are placed on the paper with intention, not locked into rigid grid cells; allow for items that float with apparent freedom but are anchored by underlying structure
  • Breathing headers and footers -- navigation and footer areas should be minimal, with extreme whitespace; a header might contain only a single wordmark and one or two links, widely spaced
  • Tonal layering for depth -- use progressively lighter or darker background values to create a sense of receding planes, mimicking the atmospheric perspective of ink landscape painting
  • Minimal dividers -- sections are separated by whitespace alone, or by the subtlest of hairline rules that taper to nothing at their ends, like a single brush stroke across the page
  • Responsive scaling with preserved emptiness -- on smaller screens, maintain proportional whitespace rather than collapsing it; the negative space is as important as the content and should not be the first thing sacrificed

CSS / Design Techniques

Card Component

.card-ink {
  background: var(--paper-xuan);
  border: 1px solid var(--ink-faint);
  border-radius: 2px;
  padding: 2.5rem;
  position: relative;
  transition: all 0.4s ease;
  overflow: hidden;
}

/* Ink bleed edge -- subtle top border that mimics brush contact */
.card-ink::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ink-pale) 20%,
    var(--ink-medium) 50%,
    var(--ink-pale) 80%,
    transparent 100%
  );
  opacity: 0.5;
}

.card-ink:hover {
  border-color: var(--ink-pale);
  box-shadow: 0 8px 32px rgba(13, 13, 13, 0.06);
  transform: translateY(-2px);
}

.card-ink h3 {
  margin-bottom: 0.75rem;
}

.card-ink p {
  color: var(--ink-medium-dark);
  line-height: 1.75;
}

/* Seal stamp accent on card */
.card-ink .card-seal {
  width: 28px;
  height: 28px;
  background: var(--vermilion);
  border-radius: 2px;
  opacity: 0.8;
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
}

Button Styles

/* Primary -- ink stroke button */
.btn-ink {
  background: var(--ink-concentrated);
  color: var(--paper-rice);
  border: none;
  border-radius: 1px;
  padding: 14px 36px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.btn-ink:hover {
  background: var(--ink-rich);
  box-shadow: 0 4px 16px rgba(13, 13, 13, 0.15);
}

.btn-ink:active {
  transform: scale(0.98);
}

/* Secondary -- ghost button with ink border */
.btn-ink-ghost {
  background: transparent;
  color: var(--ink-dark-wash);
  border: 1px solid var(--ink-medium);
  border-radius: 1px;
  padding: 13px 35px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-ink-ghost:hover {
  border-color: var(--ink-concentrated);
  background: rgba(13, 13, 13, 0.03);
}

/* Vermilion accent button -- for primary CTAs */
.btn-vermilion {
  background: var(--vermilion);
  color: var(--paper-xuan);
  border: none;
  border-radius: 1px;
  padding: 14px 36px;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-vermilion:hover {
  background: var(--vermilion-dark);
  box-shadow: 0 4px 16px rgba(194, 59, 34, 0.2);
}

.nav-ink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 3rem;
  background: var(--paper-rice);
  border-bottom: 1px solid var(--ink-mist);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-ink .wordmark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--ink-concentrated);
  text-decoration: none;
}

/* Seal stamp logo element */
.nav-ink .seal-logo {
  width: 32px;
  height: 32px;
  background: var(--vermilion);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper-xuan);
  font-family: 'Zen Old Mincho', serif;
  font-size: 0.9rem;
}

.nav-ink ul {
  list-style: none;
  display: flex;
  gap: 2.5rem;
  margin: 0;
  padding: 0;
}

.nav-ink a {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-medium-dark);
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}

.nav-ink a:hover {
  color: var(--ink-concentrated);
}

/* Brush stroke underline on hover */
.nav-ink a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    var(--ink-concentrated) 0%,
    var(--ink-medium) 70%,
    transparent 100%
  );
  transition: width 0.4s ease;
}

.nav-ink a:hover::after {
  width: 100%;
}

Hero Section

.hero-ink {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 6rem 3rem;
  position: relative;
  overflow: hidden;
  background: var(--paper-rice);
}

/* Atmospheric ink wash background */
.hero-ink::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  background: radial-gradient(
    ellipse at 70% 40%,
    rgba(13, 13, 13, 0.04) 0%,
    rgba(13, 13, 13, 0.02) 30%,
    transparent 70%
  );
  pointer-events: none;
}

/* Distant mountain silhouette */
.hero-ink::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(13, 13, 13, 0.015) 40%,
    rgba(13, 13, 13, 0.03) 100%
  );
  pointer-events: none;
}

.hero-ink h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--ink-concentrated);
  margin-bottom: 1.5rem;
  max-width: 14ch;
  letter-spacing: 0.02em;
}

.hero-ink .subtitle {
  font-family: 'EB Garamond', serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ink-medium);
  max-width: 36ch;
  line-height: 1.7;
  margin-bottom: 3rem;
}

.hero-ink .scroll-hint {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-light-medium);
  position: absolute;
  bottom: 3rem;
  left: 3rem;
}

Ink Wash Gradient Backgrounds

/* Horizontal mist -- like fog rolling across a valley */
.wash-horizontal {
  background: linear-gradient(
    90deg,
    var(--paper-rice) 0%,
    rgba(13, 13, 13, 0.025) 40%,
    rgba(13, 13, 13, 0.04) 60%,
    var(--paper-rice) 100%
  );
}

/* Vertical atmospheric depth -- distant mountains */
.wash-vertical {
  background: linear-gradient(
    180deg,
    var(--paper-rice) 0%,
    rgba(13, 13, 13, 0.02) 30%,
    rgba(13, 13, 13, 0.05) 70%,
    rgba(13, 13, 13, 0.03) 100%
  );
}

/* Radial ink bleed -- centered ink drop diffusion */
.wash-radial {
  background: radial-gradient(
    circle at 50% 50%,
    rgba(13, 13, 13, 0.06) 0%,
    rgba(13, 13, 13, 0.03) 30%,
    rgba(13, 13, 13, 0.01) 60%,
    transparent 80%
  );
}

/* Corner ink spill -- asymmetric wash pooling in one corner */
.wash-corner {
  background: radial-gradient(
    ellipse at 85% 15%,
    rgba(13, 13, 13, 0.05) 0%,
    rgba(13, 13, 13, 0.02) 30%,
    transparent 60%
  );
}

Brush Stroke Dividers

/* Tapered horizontal rule -- mimics a single brush stroke */
.brush-divider {
  border: none;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--ink-pale) 15%,
    var(--ink-medium) 45%,
    var(--ink-dark-wash) 50%,
    var(--ink-medium) 55%,
    var(--ink-pale) 85%,
    transparent 100%
  );
  max-width: 200px;
  margin: 5rem auto;
  opacity: 0.4;
}

/* Asymmetric brush stroke -- thicker start, trailing end */
.brush-divider-asym {
  border: none;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--ink-dark-wash) 0%,
    var(--ink-medium) 20%,
    var(--ink-pale) 50%,
    var(--ink-faint) 75%,
    transparent 100%
  );
  max-width: 180px;
  margin: 4rem 0 4rem 10%;
  opacity: 0.5;
}

/* Enso circle divider */
.enso-divider {
  text-align: center;
  margin: 5rem auto;
}

.enso-divider::before {
  content: '';
  display: inline-block;
  width: 48px;
  height: 48px;
  border: 2px solid var(--ink-medium);
  border-radius: 50%;
  border-top-width: 1px;
  border-right-width: 3px;
  border-bottom-width: 2px;
  border-left-width: 1px;
  border-top-color: transparent;
  opacity: 0.25;
  transform: rotate(-25deg);
}

Paper Texture Overlay

/* Rice paper grain -- subtle fibrous texture */
.paper-texture {
  position: relative;
}

.paper-texture::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='1' height='1' x='2' y='1' fill='%23333' opacity='0.4'/%3E%3Crect width='1' height='1' x='5' y='4' fill='%23333' opacity='0.3'/%3E%3Crect width='1' height='1' x='1' y='6' fill='%23333' opacity='0.5'/%3E%3Crect width='1' height='1' x='7' y='2' fill='%23333' opacity='0.2'/%3E%3C/svg%3E");
  background-size: 8px 8px;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Wet edge bleed effect for containers */
.ink-bleed {
  box-shadow:
    0 0 20px rgba(13, 13, 13, 0.03),
    0 0 60px rgba(13, 13, 13, 0.02);
  border: 1px solid rgba(13, 13, 13, 0.06);
}

Full Page Scaffold

:root {
  --ink-concentrated:    #0D0D0D;
  --ink-rich:            #1A1A1A;
  --ink-dark-wash:       #333333;
  --ink-medium-dark:     #4D4D4D;
  --ink-medium:          #6B6B6B;
  --ink-light-medium:    #8A8A8A;
  --ink-pale:            #A8A8A8;
  --ink-faint:           #C4C4C4;
  --ink-mist:            #DCDCDC;
  --paper-warm:          #EDECE8;
  --paper-rice:          #F5F4F0;
  --paper-xuan:          #FAF9F6;
  --vermilion:           #C23B22;
  --vermilion-dark:      #8B2500;
  --ink-warm:            #4A3728;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'EB Garamond', Georgia, serif;
  background-color: var(--paper-rice);
  color: var(--ink-dark-wash);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  color: var(--ink-concentrated);
}

a {
  color: var(--ink-dark-wash);
  text-decoration: underline;
  text-decoration-color: var(--ink-faint);
  text-underline-offset: 3px;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

a:hover {
  color: var(--vermilion);
  text-decoration-color: var(--vermilion);
}

.container {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 2rem;
}

section {
  padding: 6rem 0;
}

img {
  max-width: 100%;
  height: auto;
  filter: grayscale(100%) contrast(1.05);
}

::selection {
  background: rgba(194, 59, 34, 0.15);
  color: var(--ink-concentrated);
}

Design Do's and Don'ts

Do's

  • Do use generous whitespace as a primary design element -- empty space is the breathing room that gives every stroke meaning; aim for at least 40-50% negative space in any composition
  • Do vary ink tones for visual hierarchy -- use the full tonal range from concentrated black to pale mist; hierarchy should be readable through value contrast alone, without needing color or size differences
  • Do embrace organic imperfection -- allow edges to be slightly rough, gradients to be subtly uneven, and alignments to carry the controlled irregularity of handmade work
  • Do use the vermilion accent sparingly -- like the red seal stamp on a traditional painting, chromatic color should appear in only one or two places per page for maximum impact
  • Do let images breathe -- place photographs and illustrations in expansive whitespace with generous margins; avoid cramped image grids or tightly packed galleries
  • Do slow down animations and transitions -- durations of 400ms-800ms with gentle easing feel contemplative; quick, snappy animations break the meditative atmosphere
  • Do apply grayscale filters to photography -- convert full-color images to monochrome to maintain tonal harmony with the ink palette; add subtle contrast adjustments for depth

Don'ts

  • Don't use saturated colors -- aside from the single vermilion accent, avoid introducing blues, greens, purples, or any chromatic hue; they shatter the monochromatic discipline
  • Don't fill every available space -- resist the urge to add more content, more images, more elements; the power of Ink Wash comes from what is absent, not what is present
  • Don't use heavy drop shadows or 3D effects -- the aesthetic is flat, atmospheric, and painterly; skeuomorphic shadows and embossing feel alien to the ink-and-paper foundation
  • Don't use rounded corners generously -- border-radius should be 0-3px at most; the aesthetic favors crisp, decisive edges that echo the clean cut of handmade paper
  • Don't pair multiple bright accents -- one seal red, used surgically, is the maximum chromatic allowance; multiple accent colors destroy the monochromatic integrity
  • Don't use busy patterns or dense textures -- if a texture is visible enough to notice consciously, it is too strong; paper grain should be felt, not seen
  • Don't center everything -- rigid centering creates static, lifeless compositions; offset elements, use asymmetric layouts, and let the eye move naturally across the page
  • Don't use display fonts with heavy weights -- bold, black, or ultra-heavy type weights contradict the light, fluid quality of brush calligraphy; keep weights at 300-400 for display text
Aesthetic Relationship
Japandi Shares Zen minimalism and ma (negative space); Japandi is warmer with Scandinavian material influence
Wabi-Sabi Philosophical foundation -- embracing imperfection, transience, and incompleteness
Minimalism Parallel commitment to reduction and essentialism, though Ink Wash is more atmospheric and organic
Zen Design Spiritual sibling; Zen design applies the same Buddhist principles across all media and materials
Chinoiserie Western interpretation of Chinese aesthetic motifs; Ink Wash is the authentic source tradition
Monochrome Design Shares the single-hue constraint, though Ink Wash is specifically rooted in East Asian ink painting tradition
Dark Academia Shares intellectual, literary atmosphere and muted tones, but differs in warmth and cultural reference
Brutalism (Web) Shares the raw, unadorned quality and embrace of stark contrast, though Brutalism is aggressive where Ink Wash is contemplative
Earth Tones Related through natural material palette; Earth Tones uses warm chromatic range, Ink Wash limits to achromatic with warm undertones
Flat Design Shares rejection of 3D effects and gradients-as-decoration, though Flat Design uses bold color where Ink Wash uses tonal gray

Quick-Start HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ink Wash -- Sumi-e Design</title>

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@300;400;500&family=Zen+Old+Mincho:wght@400;500&display=swap" rel="stylesheet">

  <style>
    /* ============================================
       CSS CUSTOM PROPERTIES
       ============================================ */
    :root {
      /* Ink tones */
      --ink-concentrated:    #0D0D0D;
      --ink-rich:            #1A1A1A;
      --ink-dark-wash:       #333333;
      --ink-medium-dark:     #4D4D4D;
      --ink-medium:          #6B6B6B;
      --ink-light-medium:    #8A8A8A;
      --ink-pale:            #A8A8A8;
      --ink-faint:           #C4C4C4;
      --ink-mist:            #DCDCDC;

      /* Paper tones */
      --paper-warm:          #EDECE8;
      --paper-rice:          #F5F4F0;
      --paper-xuan:          #FAF9F6;

      /* Accent */
      --vermilion:           #C23B22;
      --vermilion-dark:      #8B2500;
      --ink-warm:            #4A3728;

      /* Spacing */
      --space-xs:  0.5rem;
      --space-sm:  1rem;
      --space-md:  2rem;
      --space-lg:  4rem;
      --space-xl:  6rem;
      --space-2xl: 8rem;
    }

    /* ============================================
       RESET & BASE
       ============================================ */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body {
      font-family: 'EB Garamond', Georgia, serif;
      font-size: 1.125rem;
      line-height: 1.8;
      color: var(--ink-dark-wash);
      background-color: var(--paper-rice);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Paper texture overlay on body */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      opacity: 0.018;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='1' height='1' x='2' y='1' fill='%23333' opacity='0.4'/%3E%3Crect width='1' height='1' x='5' y='4' fill='%23333' opacity='0.3'/%3E%3Crect width='1' height='1' x='1' y='6' fill='%23333' opacity='0.5'/%3E%3Crect width='1' height='1' x='7' y='2' fill='%23333' opacity='0.2'/%3E%3C/svg%3E");
      background-size: 8px 8px;
      pointer-events: none;
      z-index: 9999;
      mix-blend-mode: multiply;
    }

    ::selection {
      background: rgba(194, 59, 34, 0.15);
      color: var(--ink-concentrated);
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    /* ============================================
       TYPOGRAPHY
       ============================================ */
    h1, h2, h3, h4 {
      font-family: 'Cormorant Garamond', Georgia, serif;
      font-weight: 300;
      color: var(--ink-concentrated);
      line-height: 1.2;
    }

    h1 {
      font-size: clamp(2.75rem, 6vw, 4.5rem);
      letter-spacing: 0.03em;
    }

    h2 {
      font-size: clamp(1.75rem, 3.5vw, 2.75rem);
      letter-spacing: 0.02em;
    }

    h3 {
      font-size: clamp(1.25rem, 2vw, 1.5rem);
      font-weight: 400;
      letter-spacing: 0.02em;
    }

    p {
      max-width: 38em;
      margin-bottom: 1.5em;
    }

    a {
      color: var(--ink-dark-wash);
      text-decoration: underline;
      text-decoration-color: var(--ink-faint);
      text-underline-offset: 3px;
      transition: color 0.3s ease, text-decoration-color 0.3s ease;
    }

    a:hover {
      color: var(--vermilion);
      text-decoration-color: var(--vermilion);
    }

    .meta {
      font-family: 'Inter', sans-serif;
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-light-medium);
    }

    blockquote {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
      font-weight: 300;
      font-style: italic;
      line-height: 1.6;
      color: var(--ink-medium-dark);
      border-left: 2px solid var(--ink-faint);
      padding-left: 1.5rem;
      margin: var(--space-lg) 0;
    }

    /* ============================================
       LAYOUT
       ============================================ */
    .container {
      max-width: 780px;
      margin: 0 auto;
      padding: 0 var(--space-md);
    }

    .container--wide {
      max-width: 1100px;
    }

    section {
      padding: var(--space-xl) 0;
    }

    /* ============================================
       NAVIGATION
       ============================================ */
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-md) var(--space-lg);
      background: var(--paper-rice);
      border-bottom: 1px solid var(--ink-mist);
      position: sticky;
      top: 0;
      z-index: 100;
    }

    .nav__brand {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      text-decoration: none;
    }

    .nav__seal {
      width: 30px;
      height: 30px;
      background: var(--vermilion);
      border-radius: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--paper-xuan);
      font-family: 'Zen Old Mincho', serif;
      font-size: 0.85rem;
      line-height: 1;
    }

    .nav__wordmark {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.35rem;
      font-weight: 300;
      letter-spacing: 0.06em;
      color: var(--ink-concentrated);
    }

    .nav__links {
      list-style: none;
      display: flex;
      gap: var(--space-md);
    }

    .nav__links a {
      font-family: 'Inter', sans-serif;
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-medium-dark);
      text-decoration: none;
      position: relative;
      transition: color 0.3s ease;
    }

    .nav__links a:hover {
      color: var(--ink-concentrated);
    }

    .nav__links a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 1.5px;
      background: linear-gradient(
        90deg,
        var(--ink-concentrated),
        var(--ink-medium),
        transparent
      );
      transition: width 0.4s ease;
    }

    .nav__links a:hover::after {
      width: 100%;
    }

    /* ============================================
       HERO
       ============================================ */
    .hero {
      min-height: 92vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: var(--space-2xl) var(--space-lg);
      position: relative;
      overflow: hidden;
    }

    /* Atmospheric wash */
    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 55%;
      background: radial-gradient(
        ellipse at 65% 35%,
        rgba(13, 13, 13, 0.045) 0%,
        rgba(13, 13, 13, 0.02) 35%,
        transparent 70%
      );
      pointer-events: none;
    }

    /* Ground mist */
    .hero::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 25%;
      background: linear-gradient(
        180deg,
        transparent,
        rgba(13, 13, 13, 0.02) 50%,
        rgba(13, 13, 13, 0.035)
      );
      pointer-events: none;
    }

    .hero__content {
      position: relative;
      z-index: 1;
      max-width: 680px;
    }

    .hero__label {
      font-family: 'Inter', sans-serif;
      font-size: 0.7rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-light-medium);
      margin-bottom: var(--space-md);
      display: block;
    }

    .hero h1 {
      margin-bottom: var(--space-md);
      max-width: 14ch;
    }

    .hero__subtitle {
      font-family: 'EB Garamond', serif;
      font-size: 1.25rem;
      color: var(--ink-medium);
      max-width: 36ch;
      line-height: 1.7;
      margin-bottom: var(--space-lg);
    }

    .hero__cta {
      display: flex;
      gap: var(--space-sm);
      flex-wrap: wrap;
    }

    .hero__scroll {
      font-family: 'Inter', sans-serif;
      font-size: 0.65rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-pale);
      position: absolute;
      bottom: var(--space-lg);
      left: var(--space-lg);
      z-index: 1;
    }

    .hero__scroll span {
      display: block;
      width: 1px;
      height: 40px;
      background: linear-gradient(180deg, var(--ink-pale), transparent);
      margin-top: var(--space-xs);
    }

    /* ============================================
       BUTTONS
       ============================================ */
    .btn {
      display: inline-block;
      font-family: 'Inter', sans-serif;
      font-size: 0.78rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      text-decoration: none;
      padding: 14px 36px;
      border-radius: 1px;
      cursor: pointer;
      transition: all 0.35s ease;
      border: none;
    }

    .btn--primary {
      background: var(--ink-concentrated);
      color: var(--paper-rice);
    }

    .btn--primary:hover {
      background: var(--ink-rich);
      color: var(--paper-rice);
      box-shadow: 0 4px 20px rgba(13, 13, 13, 0.15);
    }

    .btn--ghost {
      background: transparent;
      color: var(--ink-dark-wash);
      border: 1px solid var(--ink-medium);
    }

    .btn--ghost:hover {
      color: var(--ink-concentrated);
      border-color: var(--ink-concentrated);
      background: rgba(13, 13, 13, 0.025);
    }

    .btn--vermilion {
      background: var(--vermilion);
      color: var(--paper-xuan);
    }

    .btn--vermilion:hover {
      background: var(--vermilion-dark);
      color: var(--paper-xuan);
      box-shadow: 0 4px 20px rgba(194, 59, 34, 0.2);
    }

    /* ============================================
       BRUSH DIVIDER
       ============================================ */
    .divider {
      border: none;
      height: 2px;
      max-width: 180px;
      margin: var(--space-xl) auto;
      opacity: 0.35;
    }

    .divider--center {
      background: linear-gradient(
        90deg,
        transparent,
        var(--ink-pale) 15%,
        var(--ink-medium) 50%,
        var(--ink-pale) 85%,
        transparent
      );
    }

    .divider--asym {
      background: linear-gradient(
        90deg,
        var(--ink-dark-wash),
        var(--ink-medium) 25%,
        var(--ink-pale) 55%,
        transparent
      );
      margin-left: 10%;
      margin-right: auto;
    }

    /* ============================================
       ABOUT / FEATURE SECTION
       ============================================ */
    .about {
      padding: var(--space-2xl) 0;
    }

    .about__grid {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: var(--space-lg);
      align-items: start;
    }

    .about__label {
      font-family: 'Inter', sans-serif;
      font-size: 0.72rem;
      font-weight: 400;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-light-medium);
      padding-top: 0.4rem;
    }

    .about__text p {
      color: var(--ink-medium-dark);
    }

    /* ============================================
       CARDS
       ============================================ */
    .cards {
      padding: var(--space-xl) 0;
    }

    .cards__header {
      text-align: center;
      margin-bottom: var(--space-xl);
    }

    .cards__header .meta {
      margin-bottom: var(--space-sm);
      display: block;
    }

    .cards__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-md);
    }

    .card {
      background: var(--paper-xuan);
      border: 1px solid var(--ink-mist);
      border-radius: 2px;
      padding: var(--space-md) var(--space-md) 3.5rem;
      position: relative;
      transition: all 0.4s ease;
      overflow: hidden;
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 12%;
      right: 12%;
      height: 2px;
      background: linear-gradient(
        90deg,
        transparent,
        var(--ink-pale) 25%,
        var(--ink-medium) 50%,
        var(--ink-pale) 75%,
        transparent
      );
      opacity: 0.4;
    }

    .card:hover {
      border-color: var(--ink-pale);
      box-shadow: 0 8px 32px rgba(13, 13, 13, 0.06);
      transform: translateY(-2px);
    }

    .card__number {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.5rem;
      font-weight: 300;
      color: var(--ink-mist);
      line-height: 1;
      margin-bottom: var(--space-sm);
    }

    .card h3 {
      margin-bottom: 0.6rem;
    }

    .card p {
      font-size: 1rem;
      color: var(--ink-medium);
      line-height: 1.7;
    }

    .card__seal {
      width: 22px;
      height: 22px;
      background: var(--vermilion);
      border-radius: 2px;
      opacity: 0.7;
      position: absolute;
      bottom: var(--space-sm);
      right: var(--space-sm);
    }

    /* ============================================
       QUOTE / BLOCKQUOTE SECTION
       ============================================ */
    .quote-section {
      padding: var(--space-2xl) 0;
      text-align: center;
      position: relative;
    }

    .quote-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(
        ellipse at 50% 50%,
        rgba(13, 13, 13, 0.025),
        transparent 70%
      );
      pointer-events: none;
    }

    .quote-section blockquote {
      border-left: none;
      padding-left: 0;
      max-width: 32ch;
      margin: 0 auto;
      font-size: clamp(1.5rem, 3vw, 2rem);
      position: relative;
      z-index: 1;
    }

    .quote-section cite {
      display: block;
      font-family: 'Inter', sans-serif;
      font-size: 0.75rem;
      font-style: normal;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-light-medium);
      margin-top: var(--space-md);
    }

    /* ============================================
       GALLERY
       ============================================ */
    .gallery {
      padding: var(--space-xl) 0;
    }

    .gallery__grid {
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-template-rows: auto auto;
      gap: var(--space-sm);
    }

    .gallery__item {
      overflow: hidden;
      border-radius: 2px;
      position: relative;
    }

    .gallery__item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(100%) contrast(1.05);
      transition: filter 0.6s ease, transform 0.6s ease;
    }

    .gallery__item:hover img {
      filter: grayscale(80%) contrast(1.1);
      transform: scale(1.02);
    }

    .gallery__item--tall {
      grid-row: span 2;
    }

    /* ============================================
       FOOTER
       ============================================ */
    .footer {
      padding: var(--space-xl) var(--space-lg) var(--space-lg);
      border-top: 1px solid var(--ink-mist);
    }

    .footer__inner {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      max-width: 1100px;
      margin: 0 auto;
    }

    .footer__brand {
      display: flex;
      align-items: center;
      gap: var(--space-xs);
    }

    .footer__seal {
      width: 24px;
      height: 24px;
      background: var(--vermilion);
      border-radius: 2px;
      opacity: 0.7;
    }

    .footer__name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.1rem;
      font-weight: 300;
      letter-spacing: 0.06em;
      color: var(--ink-medium-dark);
    }

    .footer__copy {
      font-family: 'Inter', sans-serif;
      font-size: 0.7rem;
      letter-spacing: 0.08em;
      color: var(--ink-pale);
    }

    /* ============================================
       RESPONSIVE
       ============================================ */
    @media (max-width: 900px) {
      .cards__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
      }

      .about__grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
      }

      .gallery__grid {
        grid-template-columns: 1fr;
      }

      .gallery__item--tall {
        grid-row: span 1;
      }
    }

    @media (max-width: 640px) {
      .nav {
        padding: var(--space-sm) var(--space-md);
      }

      .nav__links {
        gap: var(--space-sm);
      }

      .nav__links a {
        font-size: 0.68rem;
      }

      .hero {
        min-height: 80vh;
        padding: var(--space-xl) var(--space-md);
      }

      .hero h1 {
        font-size: clamp(2rem, 8vw, 3rem);
      }

      .footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
      }
    }

    /* ============================================
       ANIMATION (subtle, contemplative)
       ============================================ */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .animate-in {
      animation: fadeInUp 0.8s ease-out both;
    }

    .animate-in:nth-child(2) { animation-delay: 0.15s; }
    .animate-in:nth-child(3) { animation-delay: 0.3s; }
    .animate-in:nth-child(4) { animation-delay: 0.45s; }
  </style>
</head>

<body>

  <!-- ========== NAVIGATION ========== -->
  <nav class="nav">
    <a href="#" class="nav__brand">
      <div class="nav__seal">墨</div>
      <span class="nav__wordmark">Ink & Wash</span>
    </a>
    <ul class="nav__links">
      <li><a href="#about">About</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="#gallery">Gallery</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

  <!-- ========== HERO ========== -->
  <section class="hero">
    <div class="hero__content">
      <span class="hero__label">Sumi-e Inspired Design</span>
      <h1>The Essence of the Brush</h1>
      <p class="hero__subtitle">
        Where ink meets silence, and the space between strokes
        holds as much meaning as the marks themselves.
      </p>
      <div class="hero__cta">
        <a href="#work" class="btn btn--primary">Explore Work</a>
        <a href="#about" class="btn btn--ghost">Learn More</a>
      </div>
    </div>
    <div class="hero__scroll">
      Scroll
      <span></span>
    </div>
  </section>

  <!-- ========== DIVIDER ========== -->
  <hr class="divider divider--asym">

  <!-- ========== ABOUT ========== -->
  <section class="about container" id="about">
    <div class="about__grid">
      <div class="about__label">Philosophy</div>
      <div class="about__text">
        <h2>Emptiness is Form</h2>
        <p>
          In the tradition of sumi-e, the artist does not seek to reproduce
          what the eye sees but to capture the spirit that animates the subject.
          A bamboo stalk painted in six strokes carries more life than a
          photographic rendering, because the brush conveys ki -- vital energy --
          through its movement.
        </p>
        <p>
          We apply this principle to digital design. Every element earns its
          place through purpose, not decoration. The generous emptiness between
          components is not absence but presence -- the ma that gives each
          element its weight and significance.
        </p>
      </div>
    </div>
  </section>

  <!-- ========== DIVIDER ========== -->
  <hr class="divider divider--center">

  <!-- ========== CARDS ========== -->
  <section class="cards container container--wide" id="work">
    <div class="cards__header">
      <span class="meta">Principles</span>
      <h2>The Four Treasures</h2>
    </div>
    <div class="cards__grid">
      <div class="card animate-in">
        <div class="card__number">01</div>
        <h3>Brush (Fude)</h3>
        <p>
          The tool is an extension of the mind. Every interaction must feel
          as intentional and alive as a loaded brush touching paper.
        </p>
        <div class="card__seal"></div>
      </div>
      <div class="card animate-in">
        <div class="card__number">02</div>
        <h3>Ink (Sumi)</h3>
        <p>
          From a single pigment, infinite expression. Our monochromatic
          palette contains all the tonal depth needed to communicate clearly.
        </p>
        <div class="card__seal"></div>
      </div>
      <div class="card animate-in">
        <div class="card__number">03</div>
        <h3>Paper (Kami)</h3>
        <p>
          The ground receives and transforms. White space is not empty canvas
          waiting to be filled but a luminous presence that shapes every mark.
        </p>
        <div class="card__seal"></div>
      </div>
    </div>
  </section>

  <!-- ========== QUOTE ========== -->
  <section class="quote-section">
    <blockquote>
      "In ink painting, the void speaks louder than the brush."
    </blockquote>
    <cite>Traditional Saying</cite>
  </section>

  <!-- ========== DIVIDER ========== -->
  <hr class="divider divider--asym">

  <!-- ========== GALLERY ========== -->
  <section class="gallery container container--wide" id="gallery">
    <div class="cards__header">
      <span class="meta">Selected Works</span>
      <h2>Impressions</h2>
    </div>
    <div class="gallery__grid">
      <div class="gallery__item">
        <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?w=800&h=500&fit=crop&auto=format"
             alt="Mountain landscape in ink wash style">
      </div>
      <div class="gallery__item gallery__item--tall">
        <img src="https://images.unsplash.com/photo-1513364776144-60967b0f800f?w=400&h=600&fit=crop&auto=format"
             alt="Bamboo grove in morning mist">
      </div>
      <div class="gallery__item">
        <img src="https://images.unsplash.com/photo-1501084817091-a4f3d1d19e07?w=800&h=500&fit=crop&auto=format"
             alt="Still water reflecting mountains">
      </div>
    </div>
  </section>

  <!-- ========== CONTACT CTA ========== -->
  <section class="about container" id="contact" style="padding-bottom: var(--space-2xl);">
    <div class="about__grid">
      <div class="about__label">Connect</div>
      <div class="about__text">
        <h2>Begin a Conversation</h2>
        <p>
          Like the meeting of brush and paper, every collaboration begins
          with a single point of contact. We would welcome the opportunity
          to bring contemplative clarity to your next project.
        </p>
        <a href="#" class="btn btn--vermilion">Get in Touch</a>
      </div>
    </div>
  </section>

  <!-- ========== FOOTER ========== -->
  <footer class="footer">
    <div class="footer__inner">
      <div class="footer__brand">
        <div class="footer__seal"></div>
        <span class="footer__name">Ink & Wash Studio</span>
      </div>
      <span class="footer__copy">&copy; 2026 Ink & Wash. All rights reserved.</span>
    </div>
  </footer>

</body>
</html>

Implementation Tips

  • Start with the tonal scale -- before building any component, establish your ink gradient from concentrated black to the palest mist; this tonal ladder is the backbone of every visual decision and ensures consistency across the entire design
  • Use CSS filter: grayscale(100%) on all imagery -- convert photographs to monochrome at the CSS level so you can adjust the effect without re-exporting assets; pair with contrast(1.05) to compensate for the slight flatness that grayscale introduces
  • Leverage mix-blend-mode: multiply for textures and overlays -- this blending mode naturally mimics how ink interacts with paper, darkening where layers overlap while preserving the luminosity of light areas
  • Set transition durations to 400ms minimum -- the contemplative pace of Ink Wash design demands slow, deliberate motion; ease or ease-out curves feel more organic than linear, mirroring the deceleration of a brush stroke trailing off
  • Test at extreme whitespace -- the biggest temptation is to reduce padding and margins to fit more content; resist this by testing layouts at 1.5x your intended spacing first, then reducing only if absolutely necessary
  • Build a component library from ink tones, not from color -- define every UI state (default, hover, active, disabled, focus) purely in terms of tonal values; this forces a disciplined hierarchy and guarantees that the monochromatic system holds together
  • Use the vermilion accent as a reward -- reserve --vermilion for the single most important action per screen: the primary CTA, the critical alert, the active navigation state; if vermilion appears in more than two places simultaneously, it loses its power
  • Consider a dark ink variant -- invert the palette by using --ink-concentrated as the background and --paper-rice as the text color; the same tonal relationships hold, and the result evokes the dramatic atmosphere of ink painted on dark silk
← Zurück zu den Designs
Agence WagnerAgence Wagner

© 2026 Agence Wagner. Alle Rechte vorbehalten.

Designs von chrislemke/website_designs, lizenziert unter MIT.