Design details

Every heading balances its lines, and every paragraph refuses to strand its last word.

Opening quotes hang outside the text edge so the letters keep a straight optical left.

A list that runs long gets wider spacing between its items.

Blockquotes are trimmed to the type, while a plain border spans the full line boxes and overshoots at both ends.

Read pages and posts drop from accent to text color with a faint underline.

Anything that ticks or aligns, like dashboard stats, changelog dates, and EXIF readouts, uses tabular figures.

Söhne handles navigation, headings, and body, with Söhne Mono for code. I briefly experimented with a few different sans serif typefaces and also a combination of sans serif and serif, but ultimately landed on this single typeface because I adore it so much.

The header keycap's ⌘ is an SVG because Söhne's own character sat higher in Safari than in Chrome and read small.

Red indicates two related things: what you can do (links, buttons) and where you are (the nav's current page, the TOC's active section). Pure decoration never wears it, so the signal stays undiluted.

On wide-gamut screens the accent's chroma steps up while neutrals stay sRGB.

Text selection uses the accent token directly. If the red ever moves, selection moves with it.

A shadow can't separate black from black. In dark mode a floating panel like the ⌘K palette is simply a step lighter than the page, the way a macOS window reads in dark mode. In light mode, a soft shadow does the same job.

Switching themes plays a circular reveal growing from the toggle's own position. Try it in the top right corner.

Everything that moves shares one spring: the lightbox fly-in, paging between photos, a released swipe settling back, and the Contents sheet rising on a phone. Items that are thrown like a swiped photo arrive with momentum so they settle past the mark and come back. Items that appear like a panel or menu do not have momentum so they simply arrive and stop.

Enter overshoots into place while exit is a plain accelerating fade at 60% of the duration. You see the pair of animations when the ⌘K palette and lightbox on /photos open and close.

The theme icon cross-fades through a small scale and blur instead of hard-swapping.

Protected case studies refuse a bad entry the way the Mac does: one sharp shake with an eased return.

The dashboard's stats arrive like a mechanical odometer. Each digit is a strip that rolls to its value.

The dashboard's rolling-average lines draw in left to right once their chart is mostly in view. The line reads as a value being traced rather than wallpaper that was already finished.

The homepage statement fades up one word at a time in pure CSS. The last sentence then arrives whole and unbroken because a punchline shouldn't wrap.

Turn on reduced motion and spatial moves still happen, just without the bounce. Decorative animations become simple fades.

On a phone, buttons and links respond the moment your finger touches down instead of easing into it. The press state also goes further than hover because a fingertip hides more of the screen than a cursor.

Icon controls in the header and the footer keep their small visual boxes while invisible extensions take the touch target to 44px.

When the user taps on the search button, the keyboard automatically appears.

Photos and clips open by flying the clicked element's rectangle to the modal's.

Click a running clip and it keeps playing through the flight and into the modal. There is no pause and no restart. The same moment simply gets bigger.

Escape, a click anywhere outside, the close button, or a swipe down all close the overlay. The swipe peels it, tracking your finger while the page returns in step underneath.

Hold shift while clicking any image or video and the open plays in slow motion, a built-in mode for watching the choreography frame by frame. It's an homage to Exposé, which shipped with exactly this trick in 2003. Holding shift just to watch the windows glide was half the joy of Panther.

Every slide is two layers. The small file the grid already loaded shows instantly and a sharper version fades in above it when it lands.

The loading shimmer never cross-fades over media. It sits behind, and the opaque image or poster simply covers it as it paints. Nothing shimmers behind a transparent image where it would show straight through.

Photography carries a hairline outline (black at 10% in light, white at 10% in dark) on the /photos grid and inside its lightbox, so a near-white sky never melts into the page.

Every iPhone clip is rendered twice, once with corners matching the light theme's page color and once matching dark, and the site swaps them when the theme changes. They run at 60fps, and screens with high pixel density get a 3x resolution file.

While the overlay on /photos is open, the neighbouring photos are fetched at the exact size and quality the slide will request to make paging feel smooth.

Back links, the header's last-updated text, and hashtags are set in full text color because muted reads as disabled. The underline marks them as links and darkens on hover.

The table of contents marks the active section with one travelling dot beside the first line of a wrapped title. Centering against the whole block would float it in the middle of nowhere. On a phone the same dot lives in the Contents sheet which is up next.

On mobile the table of contents rises as a sheet and tracks your finger 1:1 on the swipe down.

Click a Contents entry or a heading permalink and the target rests below the fixed header instead of hiding underneath it.

A 12-column grid sits under everything.

Press G and the grid draws itself over the page. This is also in the ⌘K palette as “Activate grid.”

“Last updated 2h ago” sits at the top right of every page and is read from git at build. The goal is to indicate the site's freshness and provide a link to what changed.

Posts are written in Obsidian against the repository itself so committing is publishing. There is no CMS and no admin interface.

A Chrome extension captures from anywhere. It can send a link, a selection, an image, or the whole article, which it converts to clean markdown with the same engine as Obsidian's own Web Clipper. Captures land in the vault as drafts.

Drop any iPhone screenshot or recording into a watched folder and it comes out framed in a device bezel. Detection is by shape rather than model, so the script will work with future iPhones (although maybe not the foldable model). Light and dark versions are generated automatically.