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
Running text on the 3–9 measure (centred small-caps label, h2, a lead with a three-line drop cap, body), and in the outer margin 10–12 an italic note above a small bordered plate with its italic caption.
Slots
sectionLabel, title, lead, meta, image, body2, caption
Grid areas
measure 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, ≤26 ch) on 3–9. Then one column on 3–9: the lead with a three-line drop cap, the body (indented paragraphs) and a 1 px footnote rule a third of the measure wide. Beside it in the outer margin 10–12, top-aligned: an italic muted marginal note (†), a small 3:4 grayscale plate with a 1 px border (hidden on phones), and its italic caption.

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.

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

Booking projects from June 2026

Corvid Robotics — identity

Layout tree (as in design/layout.json)
{
  "pattern": "content.bookish-marginalia",
  "kind": "content",
  "grid": {
    "measure": "3-9",
    "margin": "10-12"
  },
  "slots": [
    "sectionLabel",
    "title",
    "lead",
    "meta",
    "image",
    "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": 26
      },
      {
        "el": "box",
        "span": "3-9",
        "rowSpan": "3-3",
        "gap": 3,
        "children": [
          {
            "el": "text",
            "slot": "lead",
            "role": "lead",
            "maxCh": 62,
            "dropCap": 3
          },
          {
            "el": "text",
            "slot": "body2",
            "role": "body",
            "maxCh": 66
          },
          {
            "el": "box",
            "maxCh": 22,
            "children": [
              {
                "el": "divider",
                "weight": 1
              }
            ]
          }
        ]
      },
      {
        "el": "box",
        "span": "10-12",
        "rowSpan": "3-3",
        "gap": 2,
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "meta",
            "role": "small",
            "italic": true,
            "maxCh": 24
          },
          {
            "el": "media",
            "mobile": "hide",
            "slot": "image",
            "aspect": "3/4",
            "treatment": "grayscale",
            "frame": "border"
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "caption",
            "role": "small",
            "italic": true,
            "maxCh": 30
          }
        ]
      }
    ]
  }
}
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