nav.blueprint-sheet-header · Sheet header

A nav pattern from Blueprint, 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.blueprint-sheet-header". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
One ruled line: boxed wordmark left, slash-separated mono links, a muted sheet reference and a ghost button right; a 1 px rule closes it.
Slots
siteName, pages, meta, cta
Notes
The sheet reference reads like a drawing number ("DWG 2026-014 · REV C"); it hides on phones.
Tokens
bg #134A86 · text #E6F1FC · heading #FFFFFF · accent #FFFFFF · accent2 #9FDCFF · IBM Plex Sans Condensed / IBM Plex Sans · radius 0px · space unit 4px (full list in design/tokens.json)
Section
vertical padding step 2

Pattern notes

  • One line closed by a 1 px rule: the wordmark boxed in a 1 px frame, slash-separated links, and on the right the muted mono drawing number (`DWG 2026-014 · REV C`, hidden at phone width) and a small ghost button.
Northfold
  • Services
  • Work
  • About
  • Contact

Booking projects from June 2026

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "nav.blueprint-sheet-header",
  "kind": "nav",
  "slots": [
    "siteName",
    "pages",
    "meta",
    "cta"
  ],
  "notes": "The sheet reference reads like a drawing number (\"DWG 2026-014 · REV C\"); it hides on phones.",
  "tree": {
    "el": "box",
    "dir": "row",
    "gap": 6,
    "pad": [
      3,
      0
    ],
    "align": "center",
    "justify": "between",
    "border": "bottom",
    "children": [
      {
        "el": "logo",
        "slot": "siteName",
        "style": "boxed"
      },
      {
        "el": "nav-links",
        "slot": "pages",
        "style": "slash"
      },
      {
        "el": "box",
        "mobile": "keep",
        "dir": "row",
        "gap": 4,
        "align": "center",
        "children": [
          {
            "el": "text",
            "mobile": "hide",
            "color": "textMuted",
            "slot": "meta",
            "role": "small",
            "transform": "uppercase",
            "font": "mono"
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "ghost",
            "size": "sm"
          }
        ]
      }
    ]
  }
}
Component example: reference/nav.blueprint-sheet-header.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>nav.blueprint-sheet-header — Blueprint</title>
<link rel="stylesheet" href="base.css">
<style>
  header { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .logo { font: 700 var(--step-1)/1 var(--f-head); color: var(--heading); text-transform: uppercase; border: 1px solid var(--line); padding: 6px 10px; text-decoration: none; }
  nav ul { display: flex; gap: 0.6em; list-style: none; padding: 0; font-family: var(--f-mono); font-size: calc(var(--base) * 0.85); text-transform: uppercase; }
  nav li + li::before { content: "/"; color: var(--muted); margin-right: 0.6em; }
  nav a { color: var(--text); text-decoration: none; } nav a[aria-current] { color: var(--accent); }
  .right { display: flex; gap: 16px; align-items: center; }
  .btn { padding: 8px 12px; }
  @media (max-width: 640px) { nav { display: none; } }
</style>
</head>
<body>
<div class="wrap">
  <header>
    <a class="logo" href="#">Halden</a>
    <nav aria-label="Main"><ul><li><a href="#" aria-current="page">Products</a></li><li><a href="#">Drawings</a></li><li><a href="#">Pricing</a></li><li><a href="#">Contact</a></li></ul></nav>
    <div class="right"><span class="annot muted hide-sm">DWG 2026-014 · Rev C</span><a class="btn ghost" href="#">Request a quote</a></div>
  </header>
</div>
</body>
</html>

Other patterns in this design

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