Components
Theme
Colour, type, spacing and motion. The values every component reads. Change one here and the whole library follows, which is the only reason any of it is portable.
Colour
Every value below is imported from theme.ts. Nothing on this page is typed by hand, so it cannot drift from what the site actually ships.
Surfaces
The page, things lifted off it, sunken bands, and the slab.
--surfaceL #fafafaD #0a0a0a--surface-raisedL #ffffffD #171717--surface-altL #f5f5f5D #141414--panelL #171717D #171717Text
A rank, not a palette. Each step is a level of emphasis.
--inkL #171717D #fafafa--bodyL #404040D #d4d4d4--mutedL #525252D #a3a3a3--faintL #a3a3a3D #525252--panel-inkL #fafafaD #fafafa--panel-mutedL #a3a3a3D #a3a3a3Lines
Hairlines, and the hairline that has to be seen.
--lineL #e5e5e5D #262626--line-strongL #d4d4d4D #404040--panel-lineL #404040D #404040Brand
One accent, five roles. Use the token named for the role.
--accentL #2563ebD #60a5fa--accent-hoverL #1d4ed8D #93c5fd--accent-inkL #ffffffD #0a0a0a--accent-deepL #1d4ed8D #93c5fd--accent-altL #0d9488D #2dd4bf--pop-inkL #171717D #171717Status
Only for state. Never decoration.
--dangerL #b91c1cD #f87171--successL #15803dD #4ade80Type
Each step carries its own line-height. Both halves are mapped into Tailwind. Omitting the companion silently falls back to the inherited leading and flattens the rhythm.
Rounding
--rounding-button0.5rem--rounding-input0.5rem--rounding-chip0.375rem--rounding-card0.75rem--rounding-panel1rem--rounding-slab1.25rem--rounding-image0.5rem--rounding-art0.75rem--rounding-pill999pxMotion
These are the gallery's timings, slowed so the motion is legible. Production runs0.9s load-in and 0.55s scroll. See the note in theme.ts.
--easecubic-bezier(0.16, 1, 0.3, 1)The house curve. Fast out, long settle, no overshoot.--transition-fast0.15sHover, focus, colour changes.--transition-base0.3sLifts, panels, state changes.--transition-slow0.5sAnything that travels a distance.--reveal-distance40pxLoad-in travel. An arrival.--reveal-duration1.25sLoad-in duration.--scroll-reveal-distance10pxScroll travel. Barely moves.--scroll-reveal-duration1.65sScroll duration.--stagger-step160msDelay = index x this. Never a typed number.reducedMotionfadeNothing travels under reduced motion. There is deliberately no third value.Layout
--layout-wide78rem--layout-prose42rem--layout-header-height4rem--layout-header-height-small3.25remTypefaces
A shortlist of Google Fonts that suit this system. All are open-licensed, free commercially and free to self-host, which is what Astro does with them at build time. Nothing is loaded from Google at runtime, so no visitor's IP address is ever sent there.
Every sample below is set in the font it names, really loaded rather than an image. That costs one file per family, so it happens on this page only. Each is fetched at a single weight: enough to judge the letterforms, not enough to typeset with.
Pairings
One face, two jobs
Atkinson Hyperlegible
Atkinson Hyperlegible. The quick brown fox jumps over the lazy dog, 0123456789.
What's installed. Hierarchy comes from size, spacing and case instead of from a second typeface, the hardest version to get wrong, and the least likely to look dated in three years.
Editorial
Instrument Serif
Inter. The quick brown fox jumps over the lazy dog, 0123456789.
A high-contrast display serif over a neutral sans. This is the combination behind most of the minimal hospitality and studio sites people point at as a reference.
Warm
Fraunces
Work Sans. The quick brown fox jumps over the lazy dog, 0123456789.
Same structure, softer voice. Fraunces has enough character to carry a heading on its own, so the sans underneath can stay completely plain.
Bookish
Newsreader
Newsreader. The quick brown fox jumps over the lazy dog, 0123456789.
Serif throughout, at two sizes. Suits a site that is mostly writing, and it means one family to load rather than two.
The shortlist
Handgloves 0123456789 Il1 O0
What this template ships with. Designed by the Braille Institute to keep letterforms distinguishable at small sizes, b/d, I/l/1 and O/0 are all unmistakable. Only two weights.
Handgloves 0123456789 Il1 O0
The default neutral UI sans. Enormously capable and completely unopinionated, which is both why it works everywhere and why a site set in it looks like every other site.
Handgloves 0123456789 Il1 O0
Neutral, slightly squarer than Inter, drawn for the US government design system. A good body face when the headings are doing the talking.
Handgloves 0123456789 Il1 O0
A grotesque with slightly warmer, less mechanical curves. Sits well under a serif heading without going cold.
Handgloves 0123456789 Il1 O0
A text serif built for reading on screen. One of the few serifs as comfortable in body copy at 18px as it is in a heading.
Handgloves 0123456789 Il1 O0
A classical book serif. Runs small for its nominal size, so set it a step larger than you would a sans.
Handgloves 0123456789 Il1 O0
A sturdy workhorse serif with a touch of calligraphic contrast. Holds up in long-form text better than most Google serifs.
Handgloves 0123456789 Il1 O0
A variable soft-serif with real personality, wonky, warm, and adjustable for optical size. Excellent large, busy small.
Handgloves 0123456789 Il1 O0
High-contrast, tightly spaced, one weight only. The current shorthand for expensive-looking minimalism, which also means it will date as that look does.
Handgloves 0123456789 Il1 O0
Very fine, very high contrast, very elegant. Falls apart below about 24px, hairlines that thin disappear on a low-density screen.
Handgloves 0123456789 Il1 O0
The classic luxury-brand serif. Effective and instantly legible as a signal, and so widely used that it reads as a category rather than a choice.
Handgloves 0123456789 Il1 O0
Geometric and deliberately strange, from the art world. A wordmark face, never set a paragraph in it.
Handgloves 0123456789 Il1 O0
For code blocks. Tall x-height and clearly distinct l/1/I. Only needed if you replace the CSS monospace stack with a real font.
suits is the part worth paying attention to. A high-contrast display serif set as body copy is the most common way a site with good taste in fonts ends up hard to read. Each weight listed is another file, so take only the ones you will use.
Want to see every available font?
The shortlist above is a starting point, not a limit. Anything on Google Fonts can be dropped in, it is one entry in fonts.ts, and Astro subsets and self-hosts it at build time.