How It’s Made

Technology

This site is built with React and Next.js. It uses Emotion and plain CSS for styling. Styled System helps facilitate the UI and responsive design, and the content is written and managed with MDX. I use Moment to format dates, Prism for code syntax highlighting (via prism-react-renderer), and Typed.js for the typing animation on the Design Token Transformation project page.

Layout & Design

For wider viewports the layout adheres to an eight column grid made up of four major columns of two columns each. As the viewport narrows the grid goes with it until the 1378px breakpoint at which the first column drops its inner gutter and comprises half the width of the other three columns. Below 1012px the grid is dropped and the design converts to a single column layout.

I wrote a little about the grid behind the design in the 2020 Redesign topic post Grid. It has changed a bit since that post but by and large its the same. You can click the button below to toggle a “live view” of the grid. Though keep in mind there’s no grid for the mobile and tablet views.

No Grid!

Show Grid

Typography

This entire site is set in a single font¹ at a single size²: LL Unica77 Regular. I have wanted to take on this challenge for a while, I nearly did with a previous design but that used a single font at three different sizes. I have been tempted to abandon this constraint a few times during this redesign process but so far have stuck to it.

I think I would most like to have a bold weight rather than another size, but for now, I have tried to work out different ways of styling text to achieve the same sort of hierarchy one would get with varying sizes and font weights.

I first became familiar with the Unica typeface when I licensed Neue Haas Unica (a revival version) through a promotional bundle that Fonts.com was doing. I used it for our 2018 Christmas card and then in 2019 for a website design (with a different license). I found it to be a nearly perfect neutral typeface. An embodiment of the Super Normal concept³ put forth by Naoto Fukasawa and Jasper Morrison.

Lineto has a succint story of the compact but rich history of Unica on their specimen page for LL Unica77:

The achievement [of the design] was significant. Unica is often regarded as the pinnacle of modernist type design, arguably the most modern and the most Swiss typeface: one that embodies the idea of a ‘pure medium’, a ‘neutral carrier’. Upon its release … Unica seemed to deliver on what Helvetica promised.

You can also view scans of the original promotional publication for Unica on Flickr (called Haas Unica). The larger headline examples on this one do a good job of showing the differences between Helvetica and Unica.