Styling and Typography

The color palette

I spent more time thinking about the site’s color palette than any other design decision. This was largely because I wanted a palette that:

1. Had a primary color that was visible in both light and dark mode.
2. Had a primary color with many subtle shades, making light and dark mode palettes easy.
3. Had a wide available color gamut on most displays.

I did this by experimenting with okclh(L C H / a), which controls

• L, perceived lightness, dark to bright $[0,1]$;
• C, chroma, dull to vivid $[0,\infty)$;
• H, hue, or the color angle in polar coordinates $[0^\circ,360^\circ]$;
• a, alpha, transparent to opaque $[0,1]$.

To create a cohesive palette, I wanted all colors to have the same hue color. Furthermore, between dark and light mode, different colors should have the same relative chroma, but have “inverted” lightness.

I’m still working on this, but here’s what I got so far:

Styling images

Black and white images are automatically inverted on light/dark mode though CSS’ invert.

Post banners get special treatment. The art, text, and watermark are stored as an svg with transparent background. Between light and dark mode, I just swap out the background color. Here’s what the banner looks like on both themes:

Unfortunately, open graph previews don’t work well with this. So I supply the same banner with background for this.

Styling text

Almost all Markdown syntax is built-in. This includes bold, italics, $\text{equations}$, and code. Inline code highlighting is done by rehype-pretty-code. Spoiler tags like this are custom inline components.

Sections are done with #, ##, and so on. Tables are just like markdown:

Code blocks are styled by Expressive Code, which allow me to do things like:

1
function demo() {
2
  console.log('this line is marked as deleted')
3
  // This line and the next one are marked as inserted
4
  console.log('this is the second inserted line')
9 collapsed lines
5
  console.log('C')
6
  console.log('O')
7
  console.log('L')
8
  console.log('L')
9
  console.log('A')
10
  console.log('P')
11
  console.log('S')
12
  console.log('E')
13
  console.log('D')
14
  return 'this line is marked and all code in between is collapsed'
15
}

Big thanks to Erudite for making Expressive Code work with rehype-pretty-code. Both packages are essential as Expressive Code doesn’t decorate inline code but rehype-pretty-code’s code blocks aren’t as customizable as Expressive Code’s.

Typography

The current default font is Inter and the mono font is Geist Mono. I like how modern and readable these fonts are. They’re also variable fonts.

Serif vs sans-serif was an unexpected point of contention in this website’s design. Half of the people I asked feedback from preferred sans-serif, because it looks modern and clean. The other half argued serif was more academic and better suited my purposes.

Here’s a screenshot of an old version of the site with serif font:

Honestly, I thought it looked disgusting and too much like the default font.

Other typography things: Titles are in titlecase. Sections have the first word and proper nouns capitalized. All files and technical names should be slugified (lowercase with - as spaces).