Small pieces, a shared language.

The typography, colors, and interactive components used in the articles. This page is also their workshop.

Typography and color

Inter for text, Fira Code for code, and Departure Mono for dates and small labels. Light and dark themes share the same color system.

Background
Surface
Border
Text
Accent
Type sample

Learn, experiment, share.

A good interface lets the content speak.

const curiosity = true

It all starts with a little curiosity.

Article components

Keeping notes, explanations, and references distinct makes long articles easier to read. [1]

A little more detail

This section uses native HTML. Its explanation remains accessible without JavaScript.

Start with a clear question.

One useful way to understand a concept is to turn it into a small example.

Images

Enlarge images and browse with the arrow keys. The slideshow also supports touch gestures.

Winter sun
Winter sun
A solitary tree
A solitary tree
The storm road
The storm road
Fire dance
Fire dance

Side-by-side comparison

A draggable comparison of two photographs — Winter sun A draggable comparison of two photographs — A solitary tree
A draggable comparison of two photographs

Single image

The storm road
The storm road

Interaction and code

Shared controls for small experiments in articles. Try changing the size and shape below.

Live experiment
64 px
The controls also work with a keyboard.
A small CSS experiment
Preview Local · network disabled

The code runs only in the isolated preview on this page. Network access, access to the parent page, and package installation are disabled.

  1. These components can be used in new MDX content without changing existing articles.

The visual language and blog experience were adapted from Maxime Heckel’s blog to Astro. The content, photographs, and identity belong to this site.

Commands

Pages

Links