Website colophon

Here we share some notes on why & how this site was made.

  • Version: 2.0.1
  • Launched: April 1, 2024

First things first, what exactly is a colophon? The website Types of Typography defines it as:

A brief description of publication or production notes relevant to the edition, in modern books usually located at the verso of the title-leaf, but also sometimes located at the end of the book.

While the website you’re looking at is decidedly not a book, we think it’s important to consider how we design and build everything we do. We also think it’s important to share that information so others can learn from what we have done and judge for themselves whether or not we have achieved our goals.

With that in mind, we wanted to use this space to talk about the ideas, questions, and approaches that went into making this website.

It’s enough for you to be in the world, responding to it over and over again, moment to moment, from a place of deep attention and love.

— Jenny Odell

01

The value of process and change

As an organization, Problem Library is constantly evolving and changing[1]. This makes it hard to speak with definition and finality about our work. But written communication tends to imply that there is completeness to a thought or to a description. When building this website (or, really, when doing any kind of communication) we struggle against this. How would you ever make clear to a reader that a thought is not complete, that it is unfinished – that like any living thing, it is made up of so much more than what can be written about it?

There are probably many answers, but the one that we landed on was to include the idea of version histories and clearly noting when updates happen. The kind of annotations you find in collaborative writing or code management tools. Version history lets you review how sentences, sentiments, and ideas transformed over time, and whose hand transformed them.

We are still exploring how best to bring this to light across the website, but you’ve probably seen a few ways we’re doing this. As we keep building this website we will continue to be transparent about where it has come from, where it is currently, and where it is headed.

[1] For more on this concept, dig into the work of Frederic Laloux.

02

Design and craftsmanship

As a group of creative people we want to create things that are thoughtfully designed and well made. This is a reflection of our striving towards the ideals of beauty, truth, and goodness. Everything we do as an organization strives to meet these goals and our website is no exception.

Our design approach stemmed from our appreciation of timeless design, minimalism, and the editorial process. We leaned into white space and used typefaces that reference classic type design. We also decided to lean into native web design decisions—embracing the idea of tables (an original building block of complex website layouts) and the ever-inspiring blue for links and purple for visited links. Let’s not reinvent the wheel.

When developing this website we placed an emphasis on being as DRY (do not repeat yourself) as possible, while allowing for idiosyncrasies and playfulness. We leveraged tools that help us write clear and concise code, and strove to create consistency through abstraction.

03

Respect for visitors

As curious and interested people we trust that there are others like us out there – people who are willing to sift through dense and thoughtful content, get excited when dots start to connect, and are genuinely fascinated by understanding how things work.

We used this belief to help guide how we write about and present the work we are doing as an organization. We trust in the capacity of visitors to make meaning on their own terms, and come to their own understanding of how Problem Library functions in the world.

Website details & credits

Technology

Server is hosted in San Francisco by DigitalOcean.
Server container is managed using SpinupWP.

Website is powered by WordPress with ACF.
File structure and configs use the Bedrock framework.
Dependencies are managed with Composer.
Site theme is built on Sage v10.

Functional code is written in PHP.
DOM layer is written in Blade, PHP, and HTML.
Presentational layer is written in SCSS.
Interactive layer is written in Javascript with jQuery.

Utils and reboot styles are provided by Bootstrap.
Animations are controlled with GSAP.
Assets are built and compressed with bud.js.

Site visits are anonymously tracked with Plausible.
Site search is enhanced with Relevanssi.
Site shop is powered by wooCommerce.

Typography

Headline text is set in Editorial New
by PangramPangram.

Body text is set in Office Times Sharp
by Boulevard LAB.

Technical text is set in FK Grotesk Regular
by Florian Karsten.

Content

Site designed & coded by Daniel Lucas.

Text written and edited by everyone on the team.

Photos by Jeff Masamori, Danica Taylor, Maja Planinac, Blake Conway, Grayson Stebbins, and others.

Videos from The Prelinger Library.

Content managed by Blake Conway, Daniel Lucas, Jeff Masamori, and Tamara Chu.