Reference

Design system

The Almanac theme’s tokens and components on one page. Switch dark mode from the header to verify both schemes.

Color tokens

paper
#FBF8EF / #1A1410
canvas
#FFFFFF / #2A2218
cream
#F5EFE0 / #221C16
yellow
#FFD700
yellow-soft
#FFF4C2
tan
#B2935B
tan-soft
#EFE3CB
success
#1E9D52
warning
#DD8B1E
danger
#D14242
info
#3A78C8

Typography scale

Heading 1 — display

Heading 2 — section

Heading 3 — subsection (the workhorse for our content)

Heading 4 — small group

Heading 5 — label
Heading 6 — eyebrow

Body paragraph at default size. The line-height is set to 1.65 to keep dense reference content scannable. Inline code picks up the warm cream background and a 1px border. Links like this one underline with a tan stroke that thickens and turns yellow on hover.

Lead paragraph — used for the dek under a post title or as the first paragraph of an editorial piece. Slightly larger, same line-height.

Callouts

This is a note callout — neutral context, side information that’s useful but not critical. Use it for caveats and supplementary detail.

This is a tip — a positive shortcut or recommendation. Green-edged because it’s helpful, not warning.

This is a warning — pay attention, this could break things or have consequences.

This is an info callout — for context, definitions, side-detail that doesn’t change what you should do.

Buttons

Primary
Outline
Ghost

Badges

Code block

Get-Process | Where-Object { $_.CPU -gt 100 } | Sort-Object CPU -Descending | Select-Object -First 10

Codes list

Pill terms

Roblox Codes Windows 11

Review score block

Mascot variants


idle
blinking
thinking
celebrating
confused
sleeping