Design System

Colour system

Eight tokens form the William Morris palette. They are defined as CSS custom properties on every scoped page wrapper. Reference them by token name, never by raw hex value, inside scoped page CSS.

Extended palette

These colours exist in the colour system but are not part of the WM editorial token set. Use sparingly and contextually.

Primary

Tyler Blue

#494A65

Joseph Yellow

#F5EC8A

Dickey Orange

#D97814

Information & Warning

Verde

#006341

Verkehrsrot

#FF0000

Obra Blue

#E5FFFF

Blacks & Tints

Tintenschwarz

#000000

Daring Gray

#4A525A

Dinn Grey

#36361F

Lake District Slate

#333A3F

Additional & Alternative Blues

Cornflower Blue

#6495ED

Edison Motors Blue

#042069

Weyland Blue

#2998B5

Yellows

Yutani Yellow

#FCCC0B

Typography

All pages use Crimson Pro by Sebastian Kosch, served via Google Fonts. It is set globally via --bs-body-font-family in dickey.css. Scoped page wrappers explicitly declare font-family: 'Crimson Pro', Georgia, serif to ensure inheritance is explicit.

Headings

<!-- Page h1: large, italic, weight 300 -->
<h1>Page Title</h1>

<!-- Section h2: inline-block, orange underline rule -->
<h2>Section Heading</h2>

<!-- Sub-heading h3 -->
<h3>Sub-heading</h3>

Blockquote / epigraph

<figure>
  <blockquote class="blockquote">
    <p class="mb-0 hanging-quote">&ldquo;Quote text.&rdquo;</p>
  </blockquote>
  <figcaption class="blockquote-footer">Attribution</figcaption>
</figure>

Entry meta

Small italic attribution or date line. Appears below a heading or after a short piece of prose. Never inside a paragraph.

<span class="entry-meta">&mdash;Tyler Dickey, February 2020</span>

Pull quote

<p class="pull-quote">&ldquo;Quote text.&rdquo;</p>

Code

body {
  font-size: 1.125rem;
}

<code>inline code</code>

<pre><code>block code</code></pre>

Ornaments

Three ornamental elements are used across the site. Each has a specific function — do not substitute one for another.

Page header bracket

A matching pair of hedera leaves brackets the page title. Dickey Orange, centred, above the <h1>. Used on every WM redesigned page.

<header class="[page]-header">
  <span class="[page]-bracket" aria-hidden="true">&#10086;&nbsp;&nbsp;&#10087;</span>
  <h1>Page Title</h1>
</header>

Asterism dinkus

Section break between major content blocks. Never used inside a section — only between them. Always aria-hidden="true".

<p class="dinkus" aria-hidden="true">&#8258;</p>

Closing colophon leaf

A single hedera closes every page. The last element before the footer include.

<p class="colophon" aria-hidden="true">&#10087;</p>

CSS architecture

File location

All custom CSS lives in /stylesheets/dickey.css. No <style> blocks in PHP files. No separate per-page CSS files.

Scoped page wrapper pattern

Every page has a single wrapper <div> with a unique class: .about-page, .podcasts-page, etc. All CSS for that page is nested under that class. This prevents rules bleeding across pages.

/* ══ [pagename].php — William Morris editorial layout ══ */

.[pagename]-page {
  --ink:       #36361F;
  --ink-deep:  #000000;
  --forest:    #006341;
  --orange:    #D97814;
  --grey:      #4A525A;
  --slate:     #494A65;
  --rule:      #D9D0BF;
  --parchment: #F7F3EB;

  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 19px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 680px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.[pagename]-header {
  text-align: center;
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--orange);
}

.[pagename]-bracket {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.5rem;
  color: var(--orange);
  letter-spacing: 0.6em;
  display: block;
  margin-bottom: 0.75rem;
  line-height: 1;
}

.[pagename]-header h1 {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 3.25rem;
  font-weight: 300;
  font-style: italic;
  color: var(--ink-deep);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
}

.[pagename]-page a {
  color: var(--forest);
}

.[pagename]-page a:hover,
.[pagename]-page a:focus {
  color: var(--orange);
}

@media (max-width: 600px) {
  .[pagename]-page { font-size: 17px; padding: 2rem 1rem 4rem; }
  .[pagename]-header h1 { font-size: 2.4rem; }
}

Global utilities already in dickey.css

These are defined globally and available on all pages. Do not redefine them inside scoped page blocks.

Known global rules to work with, not against

• a { text-decoration: none } — override at scoped level: .[page]-page a { text-decoration: underline }
• body { font-size: 1.125rem } — scope your font-size to the page wrapper
• .navbar, .navbar * { font-size: 20px !important } — never touch this

Content patterns

Section link + description

Used for resource lists, podcast entries, telephony references — anywhere a link title is followed by a short description. The link uses the global .section-link class; the paragraph uses .section-desc.

<a href="URL" target="_blank" rel="noopener noreferrer"
   class="external section-link">Title</a>
<p class="section-desc">Description text.</p>

Podcast / list entry with star badge

A .podcast-entry wraps a section-link and optional editor's choice star. Entries are separated by a var(--rule) bottom border.

<div class="podcast-entry">
  <a href="URL" class="external section-link">Title</a>
  <span class="podcast-star" aria-label="Editor's choice">
    <i class="bi bi-star-fill"></i>
  </span>
  <!-- With year: -->
  <span class="podcast-star" aria-label="Editor's choice, 2025">
    <i class="bi bi-star-fill"></i>
    <span class="podcast-year">2025</span>
  </span>
  <p class="section-desc">Description.</p>
</div>

Page header

Standard header structure used on every WM redesigned page. The bracket span is purely ornamental; always aria-hidden="true".

<header class="[page]-header">
  <span class="[page]-bracket" aria-hidden="true">
    &#10086;&nbsp;&nbsp;&#10087;
  </span>
  <h1>Page Title</h1>
  <!-- Optional subtitle: -->
  <p class="[page]-sub">Subtitle or tagline</p>
</header>

Collapse footnote (Bootstrap)

Used on the About page for inline footnotes. The superscript link toggles a .collapse div below the paragraph.

<p>Text with a footnote.<sup><a data-bs-toggle="collapse"
   href="#fn-1" role="button" aria-expanded="false"
   aria-controls="fn-1">1</a></sup></p>
<div class="collapse about-footnote" id="fn-1">
  <p><sup>1</sup> Footnote content.</p>
</div>

Sidenotes

Tufte-style margin notes: a note set into the wide margin beside the text, where the eye can cross to it and back without leaving its place. A static-CSS engine—counters for numbering, a hidden checkbox for the mobile pop-in, notes floated into the gutter with a negative margin. No JavaScript.

Two kinds, two jobs. A sidenote is numbered and anchored to a point in the text—the direct replacement for a footnote. A margin note is unnumbered—free-floating text, used as a one-line paragraph summary that lets a reader skim the page by its margins.

The engine needs a two-part width structure so a margin exists to float into: a wide .sn-article wrapping a narrower .sn-body reading measure (~700px). Behaviour is fixed by screen width—wide screens use both margins (author places each note left or right); medium screens move every note to one right-hand gutter; on mobile notes collapse, and tapping the marker pops the note open in place.

Three treatments

Set the treatment with data-tr="a|b|c" on the .sn-doc wrapper. A (Numeral) is the default and the recommendation—lightest, reads as type rather than UI, survives reader-mode and print. B (Hedera) suits short, sparsely-noted essays where the house ornament has room to breathe; C (Ruled aside) earns its keep on citation-heavy pages where a firmer boundary aids scanning.

The markup

Three elements in source order: the label.sn-num marker, a hidden input.sn-check (the mobile toggle), and the note span. The note sits immediately after its anchor, so a screen reader meets it in the right place; markers are aria-hidden decoration and the toggle is a native checkbox, so it works by keyboard.

<!-- page wrapper: wide outer, narrow measure -->
<article class="sn-article">
  <div class="sn-body">
    <div class="sn-doc" data-tr="a">

      <!-- numbered sidenote -->
      <p>Text that needs a note.<label for="sn-1"
         class="sn-num" aria-hidden="true"></label><input
         type="checkbox" id="sn-1" class="sn-check"><span
         class="sidenote">This is a sidenote.</span></p>

      <!-- same, opted onto the LEFT gutter -->
      <span class="sidenote left">…</span>

      <!-- unnumbered margin note -->
      <label for="mn-1" class="mn-toggle"
         aria-hidden="true">❧</label><input type="checkbox"
         id="mn-1" class="sn-check"><span
         class="marginnote">A summary of this paragraph.</span>

    </div>
  </div>
</article>

Figures in the margin

A diagram or photograph sits in the gutter exactly as a sidenote does—a thumbnail with a caption, tapping opens it full-size in a pure-CSS lightbox. Figures carry their own Fig. N numbering, independent of the sidenote sequence, and never collapse on mobile—they drop inline at full width.

<label for="fig-1" class="fig-ref">(fig. 1)</label><input
   type="checkbox" id="fig-1" class="fig-check">
<span class="sidenote figure">
  <label for="fig-1" class="fig-thumb">
    <img src="earthrise.jpg" alt="…"></label>
  <span class="fig-cap">‘Earthrise’, Apollo 8, 1968.</span>
  <label for="fig-1" class="fig-lightbox">
    <img src="earthrise.jpg" alt="…">
    <span class="fig-x">×</span></label>
</span>

Authoring. Notes aren't written by hand—they're ordinary Markdown footnotes rewritten into these spans at build time (a Pandoc workflow with pandoc-sidenote does exactly this), so existing posts gain sidenotes with no change to how they're written. Reach for the JavaScript fallback (in the spirit of gwern’s sidenotes.js) only on a genuinely note-dense page, where static notes could collide.

Adding a new page

Follow this sequence. Do not skip steps — particularly step 3, which prevents CSS bleed.

1. Read the source page in full before writing anything. Note all headings, links with class="external", PHP includes, and any media embeds.
2. Choose a page class name — lowercase, hyphenated, unique: .about-page, .syllabi-page. Every CSS rule for the page nests under this.
3. Create [pagename]_redesigned.php as a standalone review file — not a direct replacement. Structure:
   • Bootstrap 5 CSS (keep existing integrity hash)
   • Bootstrap Icons CSS
   • dickey.css link — no <style> block
   • <div class="[page]-page"> wrapper
   • Header → sections → dinkus breaks → closing colophon leaf
4. Append the CSS block to the bottom of /stylesheets/dickey.css under a section divider comment. Use the token + layout template above.
5. Verify content completeness against the original: all headings, all links (with correct href, target, rel, and class="external"), all PHP includes verbatim, no missing prose.
6. Copy the redesigned file to ~/sites/tylerdickeycom/zz/[pagename].php with the _redesigned suffix removed.
7. Upload both the new PHP file and the updated dickey.css to the live server, then purge Cloudflare cache if needed.

Elements of style

Full rules are in CLAUDE.md. This section summarises the most frequently applied conventions.

British English

• Always -ise/-yse/-isation, never -ize/-ize/-ization: organise, analyse, recognise.
• programme (schedule/events); program (software only).
• colour, honour, favour — never the American spellings.
• Retain diacritics always: château, résumé, façade. Stripping them is a sloppy Americanism.

Punctuation

• Em-dash: unspaced — like this. Never spaced ( – like this ).
• Oxford comma: omit unless needed to prevent ambiguity.
• Quotation marks: single for direct speech; double for a quote within a quote. Punctuation outside closing quote unless it belongs to the quoted material.
• Apostrophes: never for plurals. CDs, MPs, 1970s — not CD's, MP's, 1970's.

Numerals

• Spell out one through ten; figures for 11 and above.
• Figures always for percentages, measurements, and currency: 10%, 1.61m, £5.99.
• Dates: day before month, no ordinal suffix — "13 April" not "13th April".

Links

• Exclude trailing punctuation from linked text: <a href="...">Read more</a>.
• External links always carry target="_blank" rel="noopener noreferrer" class="external".
• Internal links: no target, no rel, no class="external".

Capitalisation

• General rule: do not capitalise unless required.
• Lower case: government, internet, seasons, general job descriptions.
• Upper case: proper names, specific titles preceding a name, acronyms.
• UI labels: sentence case throughout — "Save document" not "Save Document".

Chyrons (on-screen text)

• Font must be sans-serif.
• Font colour: white, with contrasting highlight or outline as needed.
• Must always use sentence case.
• 42 characters per line for most Latin alphabet languages.
• Place only within the title-safe area.

Logos & iconography

Additional resources

The current style guide for all BBC News output — spelling, punctuation, grammar, accuracy, and impartiality.

The Purdue Online Writing Lab. Writing resources, citation formats, and instructional material covering most style guides.