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 stands vertically in Mincho at step 8 in columns 9–12 from the top edge; a seal, the eyebrow, a lead-size subhead and a text link sit bottom-left in 1–5. Columns 6–8 stay empty.
Slots
headline, eyebrow, subhead, cta
Grid areas
headline 9-12 · text 1-5 (12-column grid, 1-based inclusive spans)
Notes
Set the headline with writing-mode: vertical-rl (not a rotated line) so it reads top to bottom, columns right to left; it is the one large thing on the screen. At phone width it turns horizontal (about 48 px) 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 8, weight 400, tight leading, max 16 ch per column) in columns 9–12, starting at the top edge of the hero; it is the one large thing on the screen. At the bottom of columns 1–5: a small vermilion seal beside the muted eyebrow on one line, the subhead at lead size (step 1, loose leading, max 32 ch) and a text link with an arrow. Columns 6–8 stay empty. At phone width the headline turns horizontal (about 48 px) above the text.

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": "9-12",
    "text": "1-5"
  },
  "slots": [
    "headline",
    "eyebrow",
    "subhead",
    "cta"
  ],
  "notes": "Set the headline with writing-mode: vertical-rl (not a rotated line) so it reads top to bottom, columns right to left; it is the one large thing on the screen. At phone width it turns horizontal (about 48 px) above the text.",
  "tree": {
    "el": "grid",
    "gap": 4,
    "align": "stretch",
    "minVh": 0.92,
    "children": [
      {
        "el": "text",
        "span": "9-12",
        "rowSpan": "1-2",
        "alignSelf": "start",
        "slot": "headline",
        "role": "display",
        "step": 8,
        "weight": 400,
        "leading": "tight",
        "maxCh": 16,
        "vertical": "down"
      },
      {
        "el": "box",
        "span": "1-5",
        "rowSpan": "2-2",
        "alignSelf": "end",
        "gap": 5,
        "children": [
          {
            "el": "box",
            "mobile": "keep",
            "dir": "row",
            "gap": 3,
            "align": "center",
            "children": [
              {
                "el": "shape",
                "kind": "square",
                "size": "sm",
                "fill": "accent"
              },
              {
                "el": "text",
                "color": "textMuted",
                "slot": "eyebrow",
                "role": "small"
              }
            ]
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "lead",
            "step": 1,
            "leading": "loose",
            "maxCh": 32
          },
          {
            "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: 92vh; padding: calc(var(--unit) * 8) 0; grid-template-rows: auto 1fr; row-gap: calc(var(--unit) * 4); }
  .hero h1 { grid-column: 9 / 13; grid-row: 1 / 3; font-size: var(--step-8); line-height: 1.15; justify-self: end; max-block-size: 8em; }
  .hero .text { grid-column: 1 / 6; grid-row: 2; align-self: end; display: grid; gap: calc(var(--unit) * 5); justify-items: start; }
  .hero .eyebrow { display: flex; align-items: center; gap: calc(var(--unit) * 3); }
  .hero .lead { font-size: var(--step-1); line-height: 1.9; max-width: 32ch; }
  @media (max-width: 640px) { .hero { min-height: auto; } .hero h1 { justify-self: start; line-height: 1.3; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="hero grid">
    <h1 class="vertical">静かな器、毎日の食卓に。</h1>
    <div class="text">
      <p class="eyebrow small muted"><span class="seal" aria-hidden="true"></span>Kiln and studio — Mashiko, Tochigi</p>
      <p class="lead">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