Writing is a bit like developing a negative in a darkroom. The image is invisible at first, then it slowly fades into view before stopping just as image achieves a balanced contrast ratio between light and dark. Structuring thoughts cohesively is a similar process, and having adopted the idea in my writing, I treat my site as a living document where posts begin as notes before evolving into drafts, in progress, finished and abandoned states to represent this in principle. All the decisions below follow from this guiding principle.

Design aspects

A handful of people have inspired the combination of design choices I’ve made on my website. Without getting into the specifics: Matthew Butterick, Oliver Reichenstein, Dario Amodei, Gwern Branwen, Steph Ango, Jason Kottke, and Craig Mod.

Status tags

The “status” tag describes the degree of completion. “Notes” can be a list of links or screenshots, while a “draft” has at least some structure or underlying thesis, and a well-developed draft is described as “in progress”. Finally, when a page is done—in lieu of new information—it’s simply “finished”.

Internal and external links

Knowing when a link takes you to an external website is a useful indication of an upcoming context switch. External links are indicated with a grey underline while internal links have a green underline. Furthermore, internal links have a popup/popover view, that let’s you preview the content of the page before clicking on it. This feature is particularly useful to references sources while reading my essays; that’s why i added it.

Colour palette

Flexoki is a colour palette designed for reading and writing on digital screens. It’s inspired by analog inks and warm shades of paper, which resonates with my passion for historical and architectural geekery. You can switch between light and dark mode press the D key or use the button at the top right of the website.

Sources and bibliographies

Citations are the foundation of my industrial writing, tying ideas to their sources and inviting readers to explore further. I use compact, subscripted citations (like Gwern₂₀₂₀) to keep references clear and unobtrusive. This approach, borrowed from scientific notation, ensures citations evolve seamlessly with my “living document” process, from rough notes to polished posts, grounding my writing in verifiable sources.

Embedding citations in the content is done using a shortcode like {{% cite "tso-2023" %}}. For precision, I can add details like {{% cite "tso-2023" "pp.4" %}} to point to a specific page or note. Each source lives in its own folder (e.g., /content/sources/tso-2023), with the cite key matching the folder name. This structure keeps sources organized and accessible, making it easy to update references as my writing grows. Lastly, when a page contains citations, my setup automatically generates a page bibliography at the end of an essay.

Searching the website

Since the addition of sources and bibliographies, I often need to look up a citation when editing my writing. For convenience, I’ve implemented a search bar that can be access by pressing the SUPER + SHIFT + F keys. On a mac the SUPER key is CMD, and on Windows its WIN.

Technical aspects

Static site builds

Content management systems and written documents require maintenance. To save on administration time, my website is built with Hugo, a static site generator that processes markdown files into web pages. Simply put, this lets me spend my time writing in iA Writer and Obsidian, my preferred apps for writing, instead of site maintenance; no faffing about.