hero.bookish-title-page · Title page

A hero pattern from Classical Bookish, 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.bookish-title-page". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A book's title page, centred on one axis: author line at the top, title, fleuron and italic subtitle in the middle, and the imprint (CTA, rule, publisher line) at the foot.
Slots
eyebrow, headline, subhead, cta, meta
Notes
The three groups are spaced top / middle / bottom over at least 90 vh, like a printed title page. Title at step 6, weight 400, in the heading face; everything centred.
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #7C1C1D · accent2 #B2635D · Libre Caslon Text / Libre Caslon Text · radius 0px · space unit 6px (full list in design/tokens.json)
Section
vertical padding step 8

Pattern notes

  • A printed title page over at least 90 vh, everything centred: at the top the small-caps eyebrow (author or house); in the middle the title at step 6 (weight 400, ≤18 ch), a fleuron, and the italic subtitle (≤44 ch); at the foot an underlined CTA, a 1 px rule and the imprint line in small caps ("London · MMXXVII"). Space the three groups evenly top to bottom.

Brand & product studio

We make complicated companies simple to choose

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

Booking projects from June 2026

Layout tree (as in design/layout.json)
{
  "pattern": "hero.bookish-title-page",
  "kind": "hero",
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "cta",
    "meta"
  ],
  "notes": "The three groups are spaced top / middle / bottom over at least 90 vh, like a printed title page. Title at step 6, weight 400, in the heading face; everything centred.",
  "tree": {
    "el": "box",
    "gap": 8,
    "align": "center",
    "justify": "between",
    "minVh": 0.9,
    "children": [
      {
        "el": "text",
        "slot": "eyebrow",
        "role": "eyebrow",
        "align": "center",
        "transform": "uppercase",
        "tracking": "wide"
      },
      {
        "el": "box",
        "gap": 4,
        "align": "center",
        "children": [
          {
            "el": "text",
            "slot": "headline",
            "role": "display",
            "step": 6,
            "align": "center",
            "weight": 400,
            "leading": "tight",
            "maxCh": 18
          },
          {
            "el": "shape",
            "kind": "star",
            "size": "sm",
            "fill": "accent"
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "lead",
            "align": "center",
            "italic": true,
            "maxCh": 44
          }
        ]
      },
      {
        "el": "box",
        "gap": 2,
        "align": "center",
        "children": [
          {
            "el": "button",
            "slot": "cta",
            "variant": "underline"
          },
          {
            "el": "divider",
            "weight": 1
          },
          {
            "el": "text",
            "slot": "meta",
            "role": "small",
            "align": "center",
            "transform": "uppercase",
            "tracking": "wide"
          }
        ]
      }
    ]
  }
}
Component example: reference/hero.bookish-title-page.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>hero.bookish-title-page — Classical Bookish</title>
<link rel="stylesheet" href="base.css">
<style>
  .title-page { min-height: 90vh; padding: calc(var(--unit) * 8) 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: calc(var(--unit) * 8); text-align: center; }
  .middle { display: grid; gap: calc(var(--unit) * 4); justify-items: center; }
  h1 { font-size: var(--step-6); line-height: 1.05; max-width: 18ch; }
  .subtitle { font-size: var(--step-1); max-width: 44ch; }
  .imprint { display: grid; gap: 12px; justify-items: center; }
  .imprint hr { width: 4rem; border: 0; border-top: 1px solid var(--border); }
  @media (max-width: 640px) { h1 { font-size: var(--step-4); } .title-page { min-height: 80vh; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="title-page">
    <p class="sc">Hartwell &amp; Daughters, Booksellers</p>
    <div class="middle">
      <h1>A Shop of Second-hand Books</h1>
      <p class="fleuron" aria-hidden="true">❦</p>
      <p class="subtitle it">being a catalogue of rare, out-of-print and merely well-loved volumes, kept in good order since 1891</p>
    </div>
    <div class="imprint">
      <a href="#catalogue">Browse the catalogue</a>
      <hr>
      <p class="sc small">Bath · Walcot Street · MDCCCXCI</p>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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