hero.japanese-vertical-column · Vertical column

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

Rule
The headline runs vertically (top to bottom) in columns 11–12 from the top edge; a small vermilion seal sits in column 10; the subhead and a text link are pinned bottom-left in 2–5. Columns 6–9 stay empty.
Slots
headline, eyebrow, subhead, cta
Grid areas
headline 11-12 · seal 10-10 · text 2-5 (12-column grid, 1-based inclusive spans)
Notes
Set the headline with writing-mode: vertical-rl (not a rotated horizontal line) so it reads top to bottom; at phone width it becomes a horizontal h1 at step 4 above the text.
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 8

Pattern notes

  • The headline stands vertically (`writing-mode: vertical-rl`, step 5, weight 400) in columns 11–12, starting at the top edge of the hero. A small vermilion seal sits at the top of column 10, touching the headline's left side. The eyebrow (small, muted), the subhead (body, loose leading, max 34 ch) and a text link with an arrow are pinned to the bottom of columns 2–5. Columns 6–9 stay empty. At phone width the headline turns horizontal at step 4 and the text follows it.

We make complicated companies simple to choose

Brand & product studio

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "hero.japanese-vertical-column",
  "kind": "hero",
  "grid": {
    "headline": "11-12",
    "seal": "10-10",
    "text": "2-5"
  },
  "slots": [
    "headline",
    "eyebrow",
    "subhead",
    "cta"
  ],
  "notes": "Set the headline with writing-mode: vertical-rl (not a rotated horizontal line) so it reads top to bottom; at phone width it becomes a horizontal h1 at step 4 above the text.",
  "tree": {
    "el": "grid",
    "gap": 4,
    "align": "stretch",
    "minVh": 0.9,
    "children": [
      {
        "el": "text",
        "span": "11-12",
        "rowSpan": "1-3",
        "alignSelf": "start",
        "slot": "headline",
        "role": "display",
        "step": 5,
        "weight": 400,
        "leading": "tight",
        "maxCh": 12,
        "vertical": "down"
      },
      {
        "el": "shape",
        "span": "10-10",
        "rowSpan": "1-1",
        "mobile": "keep",
        "alignSelf": "start",
        "kind": "square",
        "size": "sm",
        "fill": "accent"
      },
      {
        "el": "box",
        "span": "2-5",
        "rowSpan": "3-3",
        "alignSelf": "end",
        "gap": 3,
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "eyebrow",
            "role": "small"
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "body",
            "leading": "loose",
            "maxCh": 34
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "link",
            "arrow": true
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.japanese-vertical-column.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.japanese-vertical-column — Japanese Minimal</title>
<link rel="stylesheet" href="base.css">
<style>
  .hero { min-height: 90vh; padding: calc(var(--unit) * 8) 0; grid-template-rows: auto 1fr auto; row-gap: calc(var(--unit) * 4); }
  .hero h1 { grid-column: 11 / 13; grid-row: 1 / 4; font-size: var(--step-5); line-height: 1.6; justify-self: end; max-block-size: 12em; }
  .hero .seal { grid-column: 10 / 11; grid-row: 1; justify-self: end; }
  .hero .text { grid-column: 2 / 6; grid-row: 3; align-self: end; display: grid; gap: calc(var(--unit) * 3); }
  .hero .text p:not(.small) { max-width: 34ch; }
  @media (max-width: 640px) { .hero { min-height: auto; } .hero h1 { font-size: var(--step-4); justify-self: start; } .hero .seal { order: -1; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="hero grid">
    <h1 class="vertical">静かな器、毎日の食卓に。</h1>
    <span class="seal" aria-hidden="true"></span>
    <div class="text">
      <p class="small muted">Kiln and studio — Mashiko, Tochigi</p>
      <p>Hand-thrown stoneware for everyday tables, glazed in ash and iron from our own hillside.</p>
      <a class="link" href="#shop">View this season's pieces →</a>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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