Colophon

How this site is made

A faithful static build in Bridgetown, migrated off Ghost. Hand-set typography, no trackers, no cookie banners. The design tokens and the writing vocabulary live here.

Colour

Light value, then dark. Terminal colours are the same in both themes.

ruby

#AA0000

#FF6A5C

ruby-dim

#7A0000

#FF8B80

paper

#FBF8F3

#161311

paper-2

#F3EDE3

#201C19

ink

#1C1917

#EDE7DD

ink-2

#57534E

#A19A92

rule

#DDD5C7

#3A342E

code-bg

#FFFDF9

#1B1815

Type scale

Home display Raleway 900 · 86/0.94 · -0.04em The Art && Science

Post h1 Raleway 800 · 62/1.03 · -0.03em Refinements are weird

h2 Raleway 800 · 31/1.2 · -0.02em What a refinement does

Deck / lede Newsreader 300 · 22/1.5 Same power, with a fence around it.

Body Newsreader 400 · 19/1.72 · 75ch There is a particular kind of Ruby code.

Marginalia JetBrains Mono 400 · 12/1.6 the fence is lexical, not dynamic

Meta / label Mono 400 · 11 · 0.12em · caps 14 JUL 2026 · 9 MIN READ

Code JetBrains Mono 400 · 13.5/1.75 refine String do

Rules of the system

·Red is punctuation, not paint: section numbers, links, one rule, one border. Never a filled hero.
·Ordinals are always mono and always red — § numbers, list markers, footnotes, post numbers.
·Dividers are dashed/squiggle runs with && at the centre. No solid full-width rules mid-article.
·Code blocks are the only thing allowed to break the 75ch measure.
·Marginalia lives in the right column, mono, red left border. Hidden below 1100px — it folds inline.
·Prose: sans extrabold headings, serif body, links are underline-on-hover with a ruby border.
·Terminal blocks are always dark in both themes. Prompt red, result green, error salmon.
·One line drawing per page, maximum. It earns its place or it goes.

Writing vocabulary

Live examples of the components new posts can use. The copy-paste snippets are in docs/authoring.md.

This paragraph shows the opening dropcap and the reading measure. Everything below is a component you can drop into a Markdown post as a small piece of HTML.

§ 01A numbered section

Section headings carry a mono red § label. The body stays at the measure while code and terminals break wide.

Margin notes are for asides, definitions, or a stray joke — the kind of thing that would break the main line of thought if it stayed inline.

app/refinements/string_slug.rbruby

module StringSlug
  refine String do
    def to_slug
      downcase.gsub(/[^a-z0-9]+/, "-")
    end
  end
end

shell

❯ bin/console
Loading development environment (Ruby 3.4.2)
irb(main):001> "The Art && Science".to_slug
=> "the-art-science"

Scoped weirdness is not weirdness. It is just a decision with a boundary drawn around it.

Callout

A bordered box for a newsletter pitch, a warning, or a "start here" pointer. One idea per callout.