Style Guide

A reference of the design components used across the site.

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

A regular paragraph. The body type is 18px Helvetica Neue / Arial, with a 1.6 line-height and a max width of 72ch. Text is set in var(--text-color) against var(--bg-color), both supplied by the active theme class on <html>.

Bold text uses <strong>. Italic text uses <em>. You can link to another page — links are underlined, with the underline removed on hover/focus.

Figure

Images use the photo-figure include which emits a <figure> with an <img> and an optional <figcaption>. The figure pulls slightly wider than the text column on desktop and goes edge-to-edge on mobile.

Sunset over the Hagensche Wiek shoreline.
Landscape example — Hagensche Wiek at sunset

Blockquote

A blockquote sets quoted or attributed text apart with a subtle left border and slightly muted color. Useful for lyrics, epigraphs, or pulled quotes.

Lists

Unordered list:

Ordered list:

  1. First step
  2. Second step
  3. Third step

.emoji-list — used on /contact, /follow, and /now to drop the bullet and let an emoji lead each line:

Tables (media-table)

The .media-table layout used on /media and /grounds. Each row is a CSS grid with emoji, title + meta, and date.

Example Film (2024) Director Name May 19
Example Album (2023) Artist Name May 18
Example Show S01 E03 · Pilot May 17

Filter buttons

The inline filter row from /media, built from <button>s styled to look like text links:

Filter by:  , , ,

Code

Inline code looks like bundle exec jekyll serve. Block code:

def media_sync
  entries = fetch_entries
  entries.map { |e| normalize(e) }
end

Call to action

The .cta-button used to drive bookings on /consulting and elsewhere:

Schedule a call

Logo mark

The four-tile brand mark from the site header, rendered with CSS only:

Theme palette

Background, text, and border colors rotate per page-load via one of these classes on <html>: