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 in columns 11–12, a thin vertical rule in 10, the first paragraph in 7–9 and the second in 3–5, both narrow with loose leading.
Slots
title, body, body2
Grid areas
title 11-12 · rule 10-10 · first 7-9 · second 3-5 (12-column grid, 1-based inclusive spans)
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)
Section
vertical padding step 12

Pattern notes

  • Read right to left: a vertical title in columns 11–12, a 1 px vertical rule in column 10, the first paragraph in 7–9 (top-aligned) and the second in 3–5 (bottom-aligned), both narrow (max 30 ch) with loose leading. At phone width: title (horizontal), first paragraph, second paragraph.

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.

Layout tree (as in design/layout.json)
{
  "pattern": "content.japanese-vertical-essay",
  "kind": "content",
  "grid": {
    "title": "11-12",
    "rule": "10-10",
    "first": "7-9",
    "second": "3-5"
  },
  "slots": [
    "title",
    "body",
    "body2"
  ],
  "tree": {
    "el": "grid",
    "gap": 4,
    "align": "start",
    "children": [
      {
        "el": "text",
        "span": "11-12",
        "rowSpan": "1-1",
        "alignSelf": "start",
        "slot": "title",
        "role": "h2",
        "weight": 400,
        "vertical": "down"
      },
      {
        "el": "divider",
        "span": "10-10",
        "rowSpan": "1-1",
        "mobile": "hide",
        "alignSelf": "stretch",
        "weight": 1,
        "orientation": "v"
      },
      {
        "el": "text",
        "span": "7-9",
        "rowSpan": "1-1",
        "slot": "body",
        "role": "body",
        "leading": "loose",
        "maxCh": 30
      },
      {
        "el": "text",
        "span": "3-5",
        "rowSpan": "1-1",
        "alignSelf": "end",
        "slot": "body2",
        "role": "body",
        "leading": "loose",
        "maxCh": 30
      }
    ]
  }
}
Component example: reference/content.japanese-vertical-essay.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>content.japanese-vertical-essay — Japanese Minimal</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: calc(var(--unit) * 12) 0; }
  .essay { align-items: start; }
  .essay h2 { grid-column: 12 / 13; grid-row: 1; font-size: var(--step-3); }
  .essay .rule { grid-column: 11 / 12; grid-row: 1; justify-self: center; width: 1px; background: var(--rule); align-self: stretch; }
  .essay .first { grid-column: 7 / 10; grid-row: 1; max-width: 30ch; }
  .essay .second { grid-column: 3 / 6; grid-row: 1; max-width: 30ch; align-self: end; }
  @media (max-width: 640px) { .essay .rule { display: none; } .essay > * + * { margin-top: calc(var(--unit) * 5); } }
</style>
</head>
<body>
<section class="wrap">
  <div class="essay grid">
    <h2 class="vertical">土と灰について</h2>
    <span class="rule" aria-hidden="true"></span>
    <p class="first">Every glaze starts as ash from the studio's wood kiln. We sieve it by hand, wash it three times and let it settle for a season before it meets the clay.</p>
    <p class="second">Nothing is matched. Two cups from the same firing will differ in colour and weight; we think that is the point of making them by hand.</p>
  </div>
</section>
</body>
</html>

Other patterns in this design

Whole design · Spec bundle (JSON) · On the style page