Design system

Tokens, classes, and components available in this project

Colors

--color-text

rgba(0, 0, 0, 0.9)

--color-text-secondary

rgba(0, 0, 0, 0.75)

--color-text-tertiary

rgba(0, 0, 0, 0.6)

--color-text-muted

rgba(0, 0, 0, 0.47)

--color-text-faint

rgba(0, 0, 0, 0.28)

--color-text-light

rgba(255, 255, 255, 0.92)

--color-text-light-muted

rgba(255, 255, 255, 0.7)

--color-border

rgba(0, 0, 0, 0.1)

--color-border-light

rgba(0, 0, 0, 0.17)

--color-surface

rgba(0, 0, 0, 0.04)

--color-surface-dark

rgba(0, 0, 0, 0.09)

--color-link-underline

rgba(0, 0, 0, 0.22)

--color-btn-primary

#1a1a1a

--color-btn-primary-hover

#333

Type scale

text-2xsThe quick brown fox0.6875rem / 11px · custom (token)

text-xsThe quick brown fox0.75rem / 12px · Tailwind default

text-smThe quick brown fox0.875rem / 14px · Tailwind default

text-baseThe quick brown fox1rem / 16px · Tailwind default

text-lgThe quick brown fox1.125rem / 18px · Tailwind default

text-xlThe quick brown fox1.25rem / 20px · Tailwind default

text-2xlThe quick brown fox1.5rem / 24px · Tailwind default

text-3xlThe quick brown fox2rem / 32px · custom override — matches homepage body

text-4xlThe quick brown fox2.25rem / 36px · Tailwind default

text-5xlThe quick brown fox3rem / 48px · Tailwind default

text-6xlThe quick brown fox3rem / 48px · custom class (globals.css)

Fonts

font-sans

The quick brown fox jumpssystem-ui, -apple-system, BlinkMacSystemFont, … (@theme token)

font-body

The quick brown fox jumpsCentold (@theme token)

font-header

The quick brown fox jumpsCaslon Ionic (@theme token)

font-mono

The quick brown fox jumpsRed Hat Mono (@theme token)

Line height (leading)

leading-none

Two lines of text to show the spacing. When multiple lines stack, the leading controls how much breathing room sits between them.

1

leading-tight

Two lines of text to show the spacing. When multiple lines stack, the leading controls how much breathing room sits between them.

1.25

leading-snug

Two lines of text to show the spacing. When multiple lines stack, the leading controls how much breathing room sits between them.

1.375

leading-normal

Two lines of text to show the spacing. When multiple lines stack, the leading controls how much breathing room sits between them.

1.5

leading-relaxed

Two lines of text to show the spacing. When multiple lines stack, the leading controls how much breathing room sits between them.

1.625

leading-loose

Two lines of text to show the spacing. When multiple lines stack, the leading controls how much breathing room sits between them.

2

Also: leading-<n> for fixed rem-based values from the spacing scale (leading-3 = 0.75rem, leading-4 = 1rem, etc.).
Preferred: pair with type scale tokens via --font-size-*--line-height so size + leading travel together.

Text color utilities

color: var(--color-text)Sample text at this color

color: var(--color-text-secondary)Sample text at this color

color: var(--color-text-tertiary)Sample text at this color

color: var(--color-text-muted)Sample text at this color

color: var(--color-text-faint)Sample text at this color

color: var(--color-text-light)Sample text at this color

color: var(--color-text-light-muted)Sample text at this color

Radii

--radius-xs4px

--radius-sm8px

--radius-md16px

--radius-pill9999px

rounded-xs4px

Layout

max-w-page / w-page1248px

w-sidebar280px

grid-cols-2424-col grid

gap-4 / gap-6 / gap-81rem / 1.5rem / 2rem

col-span-1 … col-span-24generated

col-start-1 … col-start-24generated

24-col grid preview

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

Article prose (.prose-article)

Heading 2

Heading 3

Body paragraph at 1.25rem with an inline link and strong emphasis plus italics.

Blockquote: indented with a left border, italic, in muted text.

Unordered list item
Another item

Callout block — used for `> [!note]` in markdown.

Eyebrow headers (.eyebrow)

Mono uppercase tracker — used as a small section label above content. Defaults to text-xs / --color-text-faint. Override size with text-base etc.; override color with text-[var(--color-text-muted)].

Default eyebrow

Larger eyebrow (.eyebrow text-base)

Muted color override

Buttons (.btn .btn-primary / .btn-secondary)

Pair .btn with a variant modifier. Mono font, 8px radius, hover transitions baked in.

Primary action Secondary action

Note: EmailMeButton stays a custom component — it has state-aware label transitions and a tooltip that don’t generalize.

Utility / component classes

.eyebrowMono uppercase eyebrow label — text-xs default, override size with text-* utility

.btn .btn-primaryPrimary button — black bg, mono, 8px radius

.btn .btn-secondaryOutlined button — transparent bg, border on hover

.font-monoRed Hat Mono font-family

.content-areaHomepage body container — 2rem / line-height 1.6 / weight 200

.expand-wordClickable pill word on homepage (2rem, pill radius)

.inline-linkInline link with logo + hover preview

.prose-articleArticle page typography — applies to all descendants

.callout / .callout-noteMarkdown callout block inside .prose-article

.callout-testimonialTestimonial variant — top/bottom borders, no background

.writing-right-panelSticky right panel on /writing, hidden ≤768px

Misc utilities

z-0 / z-10 / z-20Z-index utilities (whitelisted)

rounded-xs4px radius

text-2xs0.6875rem / 11px