Colors and Fonts

Reference for the site's Tailwind theme tokens, brand palette, and fonts.

The site uses Tailwind CSS v4 with the basecoat component library. Two color systems are exposed as Tailwind utilities:

  1. Semantic theme tokens — primary, muted, card, etc. These adapt automatically to light and dark mode and should be preferred for general UI.
  2. Brand palette tokens — fixed R Foundation and Rust Foundation colors. Use these when you specifically want a brand color regardless of theme.

Anywhere a Tailwind color utility is accepted (bg-*, text-*, border-*, ring-*, from-*, to-*, …), both groups work the same way.

Semantic theme colors

Each semantic role comes as a pair: a background and its matching foreground. Tokens live in css/theme.css and flip automatically when the .dark class is on <html>.

bg-background

bg-card

bg-popover

bg-primary

bg-secondary

bg-accent

bg-muted

bg-destructive

Three single-purpose tokens round out the set:

  • border-border — default border color.
  • bg-input — form field background.
  • ring-ring — focus ring color.

For text, drop the bg- prefix: text-foreground, text-muted-foreground, text-primary, text-destructive, text-accent-foreground.

Chart colors

Five semantic slots designed for data visualization, each with a distinct light/dark mapping.

chart-1

chart-2

chart-3

chart-4

chart-5

Brand palette

Defined in css/colors.css. These are fixed values — they don’t flip in dark mode. Pair them with an appropriate text color manually.

R Foundation

The blues from the R logo.

bg-r-blue-2

bg-r-blue-1

Rust Foundation

Tints from the Rust Foundation brand guide. Each family ships at 100, 75, 50, and 25 percent saturation.

rust-dark-blue-100

rust-dark-blue-75

rust-dark-blue-50

rust-dark-blue-25

rust-orange-100

rust-orange-75

rust-orange-50

rust-orange-25

rust-blue-100

rust-blue-75

rust-blue-50

rust-blue-25

rust-silver-100

rust-silver-75

rust-silver-50

rust-silver-25

rust-green-100

rust-green-75

rust-green-50

rust-green-25

Brand colors are also available as text utilities: text-r-blue-1, text-rust-orange-100, text-rust-blue-100, text-rust-green-100, text-rust-dark-blue-100.

Light and dark mode

Theme switching is driven by a .dark class on <html>. Semantic tokens have separate values for each mode, so utilities like bg-primary or text-muted-foreground adapt without any extra work on your part.

When you need a class to apply only in one mode, prefix it with the dark: variant:

This block is white in light mode and zinc-900 in dark mode. Toggle the theme to see the swap.

In practice you should rarely need dark: — reach for it only when the semantic tokens above don’t fit your case.

Fonts

Three font families are loaded in css/fonts.css and exposed as Tailwind utilities:

<div class="text-2xl">Monaspace</div>
font-mono<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
0123456789
<div class="text-2xl">Noto Serif</div>
font-serif<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
0123456789
<div class="text-2xl">Noto Sans</div>
font-sans<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
0123456789

Body copy uses font-sans by default, and headings inside .content get font-mono automatically (see css/content.css). You should rarely need to set a font utility by hand.