About

Personal blog with a warm, typographic minimalist aesthetic. Fraunces for headings, IBM Plex Sans for body, IBM Plex Mono for code. Teal accent on an off-white/dark background. Two post types: articles and link posts.

Typography

Fonts

Fraunces — headings

IBM Plex Sans — body text, regular and italic and semibold

IBM Plex Mono — code and meta

Heading scale

Heading 1 (1.75rem)

Heading 2 (1.375rem)

Heading 3 (1.125rem)

Body text

Paragraph with a link, some inline code, and a small caption. The base font size scales responsively: 106.25% on mobile, 112.5% at 768px, 118.75% at 1200px. Line height is 1.65 for comfortable reading at a max-width of 38rem.

Color

Spacing

Elements

Links

An inline link has an underline in muted color that turns teal on hover.

Lists

• Unordered item one
• Unordered item two

1. Ordered item one
2. Ordered item two

Blockquote

A short quoted line, styled with a 2px left border and muted text.

Code

Inline: font-size: 0.875em

function example() {
  return "hello";
}

Table

Components

Navigation

Top bar with logo (teal decagon + white A glyph with ripple animation on hover), archive link, and feed link. Monospace, small caps.

Date separator

Monospace, uppercase, with a top border. Groups posts by date on the frontpage.

Article

Full post with heading, prose, code blocks, and blockquotes. See frontpage preview.

Link post

Shorter commentary on an external link. Smaller heading, article.link class. Bookmark icon in the margin on desktop.

Archive list

Flat list of posts with dates and optional bookmark indicators for link posts.

Logo

Custom geometric "A" in a teal decagon. Full logo specification →