nav.japanese-quiet-corner · Quiet corner

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

Rule
Wordmark in 1–3, page links in small type in 9–12. No rule, no button, no background.
Slots
siteName, pages
Grid areas
logo 1-3 · links 9-12 (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 4

Pattern notes

  • The wordmark in 1–3 and the page links in small type in 9–12, on one baseline. No rule, no button, no background. At phone width the links scroll horizontally.
Northfold
  • Services
  • Work
  • About
  • Contact
Layout tree (as in design/layout.json)
{
  "pattern": "nav.japanese-quiet-corner",
  "kind": "nav",
  "grid": {
    "logo": "1-3",
    "links": "9-12"
  },
  "slots": [
    "siteName",
    "pages"
  ],
  "tree": {
    "el": "grid",
    "gap": 4,
    "align": "baseline",
    "children": [
      {
        "el": "logo",
        "span": "1-3",
        "slot": "siteName",
        "style": "wordmark"
      },
      {
        "el": "nav-links",
        "span": "9-12",
        "mobile": "scroll-x",
        "slot": "pages",
        "dir": "row",
        "style": "plain"
      }
    ]
  }
}
Component example: reference/nav.japanese-quiet-corner.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>nav.japanese-quiet-corner — Japanese Minimal</title>
<link rel="stylesheet" href="base.css">
<style>
  nav { padding: calc(var(--unit) * 4) 0; }
  nav .grid { align-items: baseline; }
  .mark { grid-column: 1 / 4; font: 400 var(--step-1)/1 var(--font-heading); color: var(--heading); text-decoration: none; letter-spacing: 0.08em; }
  ul { grid-column: 9 / 13; display: flex; gap: calc(var(--unit) * 3); list-style: none; padding: 0; justify-content: end; }
  ul a { color: var(--text); text-decoration: none; font-size: calc(var(--base) * 0.82); }
  ul a[aria-current] { color: var(--link); }
  @media (max-width: 640px) { ul { justify-content: start; overflow-x: auto; white-space: nowrap; margin-top: calc(var(--unit) * 2); } }
</style>
</head>
<body>
<nav class="wrap" aria-label="Main">
  <div class="grid">
    <a class="mark" href="#">Hirano Kiln</a>
    <ul><li><a href="#" aria-current="page">Pieces</a></li><li><a href="#">Studio</a></li><li><a href="#">Journal</a></li><li><a href="#">Visit</a></li></ul>
  </div>
</nav>
</body>
</html>

Other patterns in this design

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