Slopless Design

content.japanese-vertical-essay · Vertical essay

A content pattern from Japanese Minimal, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 2; about page, section 1. Give the section root data-pattern="content.japanese-vertical-essay". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule

Read right to left: a vertical title (step 7) in 11–12, a 1 px vertical rule in 10, a lead paragraph and a body paragraph stacked in 6–9, and a muted 4:5 photograph bottom-aligned in 1–4.

Slots

title, body, body2, image

Grid areas

title 11-12 · rule 10-10 · text 6-9 · image 1-4 (12-column grid, 1-based inclusive spans)

Notes

At phone width: title (horizontal), the two paragraphs, then the photograph.

Tokens

bg #F4F1EA · text #2B2925 · heading #1F1D1A · accent #A63A28 · accent2 #D78575 · Shippori Mincho / Zen Kaku Gothic New · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

Read right to left: a vertical title (step 7) in columns 11–12, a 1 px vertical rule in column 10, the first paragraph at lead size (step 1, max 34 ch) and the second at body size stacked in 6–9, and a muted 4:5 grayscale photograph in 1–4, bottom-aligned with the second paragraph. At phone width: title (horizontal), first paragraph, second paragraph, photograph.

How we think

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

We hand over everything — source files, a living brand system and a website your team can edit without calling us.