cta.japanese-ink-seal · Ink seal

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

Rule
On the surface tone: a large vermilion seal in column 2, then the headline (step 6, max 18 ch), a short muted line and a ghost button stacked in 4–10; columns 11–12 stay empty.
Slots
headline, subhead, cta
Grid areas
seal 2-2 · text 4-10 (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
background surface · vertical padding step 10

Pattern notes

  • On the `surface` tone: a vermilion seal square (about 48 px) in column 2, then the headline (step 6, weight 400, max 18 ch), one short muted line and a ghost button stacked in 4–10. Columns 11–12 stay empty.

Have a hard thing to explain?

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.

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "cta.japanese-ink-seal",
  "kind": "cta",
  "grid": {
    "seal": "2-2",
    "text": "4-10"
  },
  "slots": [
    "headline",
    "subhead",
    "cta"
  ],
  "bg": "surface",
  "tree": {
    "el": "grid",
    "gap": 4,
    "children": [
      {
        "el": "shape",
        "span": "2-2",
        "mobile": "keep",
        "alignSelf": "start",
        "kind": "square",
        "size": "md",
        "fill": "accent"
      },
      {
        "el": "box",
        "span": "4-10",
        "gap": 5,
        "children": [
          {
            "el": "text",
            "slot": "headline",
            "role": "h2",
            "step": 6,
            "weight": 400,
            "maxCh": 18
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "subhead",
            "role": "body",
            "leading": "loose",
            "maxCh": 44
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "ghost"
          }
        ]
      }
    ]
  }
}
Component example: reference/cta.japanese-ink-seal.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.japanese-ink-seal — Japanese Minimal</title>
<link rel="stylesheet" href="base.css">
<style>
  .cta { background: var(--surface); padding: calc(var(--unit) * 12) 0; }
  .cta .seal { grid-column: 2 / 3; width: 48px; height: 48px; }
  .cta .text { grid-column: 4 / 11; display: grid; gap: calc(var(--unit) * 5); justify-items: start; }
  .cta h2 { font-size: var(--step-6); line-height: 1.25; max-width: 18ch; }
  .cta p { color: var(--muted); max-width: 44ch; }
  .ghost { color: var(--heading); border: 1px solid var(--heading); padding: 12px 24px; text-decoration: none; font-size: calc(var(--base) * 0.9); }
  .ghost:hover { background: var(--heading); color: var(--bg); }
  @media (max-width: 640px) { .cta .text { margin-top: calc(var(--unit) * 3); } .cta h2 { font-size: var(--step-4); } }
</style>
</head>
<body>
<section class="cta">
  <div class="wrap grid">
    <span class="seal" aria-hidden="true"></span>
    <div class="text">
      <h2>The studio opens to visitors on the first Sunday of each month.</h2>
      <p>Four visitors at a time, tea in the drying room, and the kiln if it is cooling.</p>
      <a class="ghost" href="#visit">Plan a visit</a>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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