content.bookish-marginalia · Text with marginalia

A content pattern from Classical Bookish, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 2; about page, section 1. Give the section root data-pattern="content.bookish-marginalia". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A centred small-caps label and title over a 3–9 text block with a drop-capped lead; a marginal note sits in 10–12 beside it and a footnote closes the block under a short rule.
Slots
sectionLabel, title, lead, meta, body2, caption
Grid areas
text 3-9 · margin 10-12 (12-column grid, 1-based inclusive spans)
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)

Pattern notes

  • Centred small-caps label and h2 (weight 400) on 3–9. Then the lead with a drop cap on 3–9 and, beside it in 10–12, an italic muted marginal note marked with a dagger (†). The body continues on 3–9 with indented paragraphs; a 1 px rule across 3–5 and the footnote in small muted type close the block.

About

How we think

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.

Booking projects from June 2026

We hand over everything — source files, a living brand system and a website your team can edit without calling us.

Corvid Robotics — identity

Layout tree (as in design/layout.json)
{
  "pattern": "content.bookish-marginalia",
  "kind": "content",
  "grid": {
    "text": "3-9",
    "margin": "10-12"
  },
  "slots": [
    "sectionLabel",
    "title",
    "lead",
    "meta",
    "body2",
    "caption"
  ],
  "tree": {
    "el": "grid",
    "gap": 4,
    "rowGap": 3,
    "align": "start",
    "children": [
      {
        "el": "text",
        "span": "3-9",
        "slot": "sectionLabel",
        "role": "eyebrow",
        "align": "center",
        "transform": "uppercase",
        "tracking": "wide"
      },
      {
        "el": "text",
        "span": "3-9",
        "slot": "title",
        "role": "h2",
        "align": "center",
        "weight": 400,
        "maxCh": 30
      },
      {
        "el": "text",
        "span": "3-9",
        "slot": "lead",
        "role": "lead",
        "maxCh": 62,
        "dropCap": 3
      },
      {
        "el": "text",
        "span": "10-12",
        "color": "textMuted",
        "slot": "meta",
        "role": "small",
        "italic": true,
        "maxCh": 24
      },
      {
        "el": "text",
        "span": "3-9",
        "slot": "body2",
        "role": "body",
        "maxCh": 66
      },
      {
        "el": "divider",
        "span": "3-5",
        "weight": 1
      },
      {
        "el": "text",
        "span": "3-9",
        "color": "textMuted",
        "slot": "caption",
        "role": "small",
        "maxCh": 66
      }
    ]
  }
}
Component example: reference/content.bookish-marginalia.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>content.bookish-marginalia — Classical Bookish</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; }
  .grid { row-gap: 18px; align-items: start; }
  .measure { grid-column: 3 / 10; }
  .margin { grid-column: 10 / 13; }
  h2 { font-size: var(--step-4); max-width: 30ch; margin: 0 auto; }
  .lead { font-size: var(--step-1); }
  .body p + p { text-indent: 1.5em; }
  .fn-rule { grid-column: 3 / 6; border-top: 1px solid var(--border); }
  sup { font-size: 0.65em; color: var(--accent); }
  @media (max-width: 640px) { .margin { padding-left: 1em; border-left: 1px solid var(--border); } }
</style>
</head>
<body>
<section class="wrap">
  <div class="grid">
    <p class="measure sc center">Of the shop</p>
    <h2 class="measure center">How a bookshop survives a hundred and thirty years</h2>
    <p class="measure lead dropcap">Mostly by refusing to hurry. The shelves were built by the founder's brother in 1891, and the third from the left still leans, as it has since the Great Frost, against the chimney breast.<sup>1</sup></p>
    <p class="margin small it muted">† The lean is now load-bearing; the surveyor advised against correcting it.</p>
    <div class="measure body">
      <p>We buy libraries whole, catalogue them slowly, and sell them a volume at a time to readers who write to us by post as often as by email.</p>
      <p>Prices are pencilled inside the front board. We are always pleased to be asked about a book, and rarely in a hurry to answer.</p>
    </div>
    <div class="fn-rule" aria-hidden="true"></div>
    <p class="measure small muted"><sup>1</sup> The winter of 1895, when the Avon froze from Bath to Bristol.</p>
  </div>
</section>
</body>
</html>

Other patterns in this design

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