Style guide
Generated from src/config/theme.ts — every value below is the real token, not a copy.
Colour
Edit these in the light and dark objects insrc/config/theme.ts. Each one generates two CSS variables — the hex (--accent) and an RGB triplet (--accent-rgb) forrgba() use — plus Tailwind utilities like bg-accent andtext-muted/60.
Brand
Primary drives links, buttons and active states. Alt is a second accent — badges, charts, highlights. Never body text.
accent
light #b3210c
dark #ff6a4d
accentHover
light #8a1808
dark #ff8f78
accentAlt
light #1b32c8
dark #8fb2ff
accentAltHover
light #111f8f
dark #b3ccff
Surfaces
Page and card backgrounds. `surfaceAlt` is for insets — form fields, code blocks, footers.
surface
light #f4f0e4
dark #0b0b0b
surfaceAlt
light #e9e3d2
dark #171717
Text
Three weights of emphasis, plus one special case. Headings lead with `ink`, paragraphs sit on `body`, metadata recedes to `muted`. `onImage` is for copy over a photograph, where the background is no longer a known flat colour — pushed harder than `body` in both themes for exactly that reason.
ink
light #0a0a0a
dark #f7f4ea
body
light #1a1a1a
dark #dcd8cd
muted
light #565248
dark #a6a196
onImage
light #0a0a0a
dark #f7f4ea
Structure & status
Hairlines, and the two feedback colours used by the contact form.
line
light #0a0a0a
dark #efe9db
success
light #0f6b33
dark #5fd18a
danger
light #8a1030
dark #ff7d9e
Rounding
Named for what they wrap, not for their size — so restyling the whole site's feel means editing four values. Available as rounded-button, rounded-input,rounded-card, rounded-panel and rounded-pill.
rounded-button
rounded-input
rounded-card
rounded-panel
rounded-pill
Typography
Configured in src/config/fonts.ts. Astro self-hosts and subsets each family, so there are no third-party font requests at runtime. Only the families registered there appear below — the template ships with one, and the heading andbrand roles fall back to it until you add your own.
body · Archivo · preloaded
Aa Bb Cc 123
--typeface-body
heading · Archivo Black · preloaded
Aa Bb Cc 123
--typeface-heading
brand · DM Mono
Aa Bb Cc 123
--typeface-brand
Heading 1
Heading 2
Heading 3
Heading 4
Buttons
<Button> renders an <a> when givenhref and a <button> otherwise, so a link that looks like a button is still a real link.
Cards
Static card
A plain div. No hover on the title, because it doesn't go anywhere.
Link card
Given href, renders as an anchor and highlights its title on hover.
With a badge
For a category, a status, or a short callout.
With texture
Pass texture to add the dot grid. Off by default.
No icon
The icon is optional.
Custom content
The default slot replaces description when you need more than a line of text.
Motion
Two reveal mechanisms. Load-in is pure CSS and fires on paint — use it above the fold. Scroll uses an IntersectionObserver — use it below. Both are switched off entirely under prefers-reduced-motion.
loadIn
distance 0px
duration 0.24s
easing linear
scroll
distance 8px
duration 0.18s
easing linear
stagger 40ms
staggered scroll reveal (index 0-3)
Layout
Content measures, available on <Section width="..."> and as Tailwindmax-w-* utilities.
Prose
The .prose-copy class, used for long-form content and rendered Markdown.
A heading inside prose
A paragraph with a link, some bold text, and a bit ofinline code.
A blockquote, marked with a left rule in the accent colour.
- An unordered list item
- Another one
- An ordered list item
- Another one
const tokens = themeCss();