nav.luxury-centered-crest · Centred crest

A nav pattern from Luxury Fashion, 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.luxury-centered-crest". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Tiny caps links on 1–4, the wordmark centred on 5–8, a tiny caps text action right-aligned on 9–12; no rule.
Slots
pages, siteName, cta
Grid areas
links 1-4 · logo 5-8 · action 9-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FAF8F4 · text #1A1A1A · heading #0A0A0A · accent #111111 · accent2 #5C4311 · Bodoni Moda / Jost · radius 0px · space unit 8px (full list in design/tokens.json)
Section
vertical padding step 3

Pattern notes

  • Tiny caps links on 1–4 (hidden on phone, moved to a full-screen menu), the wordmark centred on 5–8 in the heading Didone, and a caps text action ("Bag", "Appointments") right-aligned on 9–12 (also hidden on phone). No divider, no background.
Northfold
Layout tree (as in design/layout.json)
{
  "pattern": "nav.luxury-centered-crest",
  "kind": "nav",
  "grid": {
    "links": "1-4",
    "logo": "5-8",
    "action": "9-12"
  },
  "slots": [
    "pages",
    "siteName",
    "cta"
  ],
  "tree": {
    "el": "grid",
    "gap": 3,
    "align": "center",
    "children": [
      {
        "el": "nav-links",
        "span": "1-4",
        "mobile": "hide",
        "slot": "pages",
        "dir": "row",
        "style": "plain"
      },
      {
        "el": "box",
        "span": "5-8",
        "align": "center",
        "children": [
          {
            "el": "logo",
            "slot": "siteName",
            "style": "wordmark"
          }
        ]
      },
      {
        "el": "box",
        "span": "9-12",
        "mobile": "hide",
        "align": "end",
        "children": [
          {
            "el": "button",
            "slot": "cta",
            "variant": "link",
            "size": "sm"
          }
        ]
      }
    ]
  }
}
Component example: reference/nav.luxury-centered-crest.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>nav.luxury-centered-crest — Luxury Fashion</title>
<link rel="stylesheet" href="base.css">
<style>
  nav { padding: calc(var(--unit) * 3) 0; align-items: center; }
  .links { grid-column: 1 / 5; display: flex; gap: calc(var(--unit) * 4); list-style: none; padding: 0; }
  .links a { color: var(--heading); text-decoration: none; }
  .links a[aria-current="page"] { border-bottom: 1px solid currentColor; padding-bottom: 4px; }
  .logo { grid-column: 5 / 9; justify-self: center; font: 400 28px/1 var(--font-heading); letter-spacing: 0.12em; text-transform: uppercase; color: var(--heading); text-decoration: none; }
  .action { grid-column: 9 / 13; justify-self: end; color: var(--heading); text-decoration: none; }
  @media (max-width: 640px) { .links { display: none; } nav.grid { display: flex; justify-content: space-between; } }
</style>
</head>
<body>
<div class="wrap">
  <nav class="grid" aria-label="Main">
    <ul class="links caps">
      <li><a href="/women" aria-current="page">Women</a></li>
      <li><a href="/men">Men</a></li>
      <li><a href="/maison">Maison</a></li>
    </ul>
    <a class="logo" href="/">Vaudrey</a>
    <a class="action caps" href="/appointments">Appointments</a>
  </nav>
</div>
</body>
</html>

Other patterns in this design

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