Typography
h1 — Signal, var(--step-3), line-height: 1.15
The quick brown fox jumps over the lazy dog
h2 — Signal, var(--step-2), line-height: 1.3
The quick brown fox jumps
h3 — Signal, var(--step-1)
The quick brown fox jumps
h4 — Basis Grotesque Medium, var(--step-0), uppercase, letter-spacing 0.1em
The quick brown fox
Body text — Basis Grotesque Regular, var(--step-0), line-height: 1.9, letter-spacing: 0.02rem
Photography is not merely documentation. It is an argument about value — a mechanical assertion that this moment, this light, this face deserved to be stopped. Every shutter click is a small act of editorial authority, a claim that the world needed one more image added to its already overwhelming supply.
Strong — Basis Grotesque Medium (not bold weight, intentional)
This sentence contains text set in medium weight, which replaces bold to preserve visual rhythm at all sizes.
Italic — Basis Grotesque Italic (separate font file, not slant)
This sentence contains text set in the italic font, rendered via its own dedicated typeface file rather than a synthesized slant.
Blockquote — Basis Grotesque Italic, var(--step--1), left border, padding-left
We no longer have a common world. The images, the stories, the facts we share have fragmented into islands — each island maintaining its own weather system, its own gravitational laws.
Blockquote with strong — yellow highlight on italic text
Photography is always, necessarily, a claim — a claim that something was worth stopping for, worth framing, worth the mechanical finality of the shutter.
Small text — var(--step--1), used for captions and metadata
April 12, 2024 · Berlin · Essay · 8 min read
Superscript — footnote reference, var(--step--2), vertical-align: super
The camera is a machine that delivers certainty1 in a world increasingly suspicious of certainty in any form.
Colors
Background color classes
Applied to body via frontmatter color: — sets --page-bg custom property
Warm neutrals
Soft hues
Accent & UI colors
Links
Five categories. A link's font family and clickability determine which one applies — see the decision each demo below is making.
1. Chrome links
Nav, footer, breadcrumbs, homepage "see all" — Basis Grotesque Medium, small caps, uppercase, no underline, hover: opacity/color shift + red bg
2. Prose links
Inline body copy — Basis Grotesque, underline offset 0.35em, thickness 1px, hover: brand red background
Read the full entry on visual culture and photography →
3. Headline-link
Signal, clickable — search results, tag browser cards, /tagged and /entries lists, blocks/book grid cards, prev/next nav. Same underline treatment as prose links (offset/thickness match exactly), just on Signal instead of Basis. %headline-link in _sass/_variables.scss.
On the Persistence of the Photographic Image
4. Headline-static
Signal, NOT clickable — an entry's own h1, a block's own title in its detail modal, a photo album's own title on its own page. No underline (it isn't a link, so nothing to underline). Base h1/h2/h3 rules already do this — no dedicated class needed.
A block's own title, in its own modal
5. Tag pills
Always real links (a.light / .tagged-name / .tag-browser__pill / .tag-link pattern), or plain text if genuinely non-actionable — never a pill promising an action it can't deliver. .tagged-name shown: Signal, border 1px, padding 2px 6px, hover: dark-grey fill / white text (light fill / dark text in dark mode)
.filter-btn — Basis Grotesque Regular, border, chevron arrow, active state fills. Not a link (it's a filter toggle), included here as the adjacent "pill-shaped control" component.
Components
Tag pills
Photography Berlin Visual culture Memory
Filter bar
Pagination
Two deliberately separate patterns — a numbered index list and a label/value prev-next nav. Different markup shapes (flat repeating list vs. two-column grid), but matched sizing values: font-size var(--step--1), line-height: normal (not the inherited body 1.9), so both sit tight to the text with no oversized clickable padding. Check here before adding a third variant.
.pagination / .pagination__item — numbered index pages (e.g. /blocks). Flex row, gap: var(--space-xs), item padding: 1px 3px, line-height: normal. Current page: border-bottom 1px.
.entry-nav / .prevnext__label — prev/next + backlinks on single entry, block, and photo pages. Grid (7.5em label column + content), Signal-regular links, line stays tight because the link is inline, not a block-level flex item.
Audio player
.audio-player — border 1px, flex row: play/pause button + filename + progress bar + time
Available Light episode card
.al-card — whole card is one link (outline 1px currentColor, full inversion on hover), square image, Lydia Condensed title, Basis meta
Available Light player bar
#al-player — fixed bottom bar, dark background, range scrubber, play/close buttons
Entry card (archive style)
.archive__entry — plain paragraph styles for layout; .archive__title itself is a headline-link (@extend %headline-link, defined once in _sass/_entry.scss and shared by /entries and /tagged)
A meditation on what photographs actually record, and why that record is always stranger and more contingent than it first appears.
Block card
.block-card — square aspect-ratio, border 1px, hover: opacity 0.85; text content with mask fade
Work table row
.work-row — 5-col grid (thumb / title / client / year / services), pseudo-element border, hover inverts
Search result row
.search-row--photo — 3-col grid (120px thumb / title / date), pseudo-element borders, hover inverts
Accordion
.accordion.cv-accordion — checkbox-driven show/hide, Signal title + Basis meta label
This accordion item is open. Content is revealed when the hidden checkbox is in the checked state. The max-height transition animates the reveal.
This content is hidden when the accordion is closed. Click the label above to open it.
Blockquotes
Standard — Basis Grotesque Italic, var(--step--1), 1px border-left
We no longer have a common world. Each image we share now belongs to a different epistemology, a different set of prior beliefs about what counts as evidence.
With strong — yellow rgba(249,249,9,0.30) highlight on italic
Photography is always, necessarily, a claim — a claim that something was worth stopping for, worth the weight of a moment preserved against entropy.
Spacing scale
All --space-* tokens — Utopia fluid scale, min 320px → max 1240px viewport