cta.bookish-ex-libris · Ex libris

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

Rule
A bookplate: one double-bordered, unfilled panel centred in 3–10, padded 48 px with 32 px section padding, holding a small-caps label, a fleuron, an italic step-5 h2, a short line and the primary button, all centred.
Slots
eyebrow, headline, body, cta
Grid areas
plate 3-10 (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)
Section
vertical padding step 4

Pattern notes

  • One bookplate centred in 3–10 with a `double` border, padded 48 px, and only 32 px of section padding around it (the plate is the block): small-caps "Ex libris", a fleuron, an italic h2 at step 5 (two or three lines), one lead-size line and the primary button (square, accent fill, small-caps label). No fill inside the plate.

Brand & product studio

Have a hard thing to explain?

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.

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "cta.bookish-ex-libris",
  "kind": "cta",
  "grid": {
    "plate": "3-10"
  },
  "slots": [
    "eyebrow",
    "headline",
    "body",
    "cta"
  ],
  "tree": {
    "el": "grid",
    "gap": 4,
    "children": [
      {
        "el": "box",
        "span": "3-10",
        "gap": 3,
        "pad": [
          6,
          6
        ],
        "align": "center",
        "border": "all",
        "children": [
          {
            "el": "text",
            "slot": "eyebrow",
            "role": "eyebrow",
            "align": "center",
            "transform": "uppercase",
            "tracking": "wide"
          },
          {
            "el": "shape",
            "kind": "star",
            "size": "sm",
            "fill": "accent"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "h2",
            "step": 5,
            "align": "center",
            "weight": 400,
            "italic": true,
            "maxCh": 22
          },
          {
            "el": "text",
            "slot": "body",
            "role": "lead",
            "align": "center",
            "maxCh": 40
          },
          {
            "el": "button",
            "slot": "cta",
            "variant": "primary"
          }
        ]
      }
    ]
  }
}
Component example: reference/cta.bookish-ex-libris.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.bookish-ex-libris — Classical Bookish</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: calc(var(--unit) * 4) 0; } /* the plate is the block */
  .plate { grid-column: 3 / 11; border: 3px double var(--border); padding: calc(var(--unit) * 6); display: grid; gap: 18px; justify-items: center; text-align: center; }
  .plate h2 { font-size: var(--step-5); font-weight: 400; font-style: italic; line-height: 1.05; max-width: 22ch; }
  .plate p { max-width: 40ch; }
</style>
</head>
<body>
<section class="wrap">
  <div class="grid">
    <div class="plate">
      <p class="sc">Ex libris</p>
      <p class="fleuron" aria-hidden="true">❦</p>
      <h2>Receive the quarterly catalogue</h2>
      <p>Printed on cream laid paper and posted free to any address in the kingdom.</p>
      <a class="btn" href="#subscribe">Request a copy</a>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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