Site notes
Style guide
A small reference for the visual language, technology and creative work behind this site.
Colour
A warm monochrome palette keeps the content clear while allowing the illustrations and small interactions to carry the personality. Contrast ratios are measured against the Stone 50 canvas unless noted otherwise.
-
Canvas
Stone 50 · #fafaf9
18.92:1 with primary ink · AAA
-
Primary ink
Stone 950 · #0c0a09
18.92:1 · AAA
-
Body text
Stone 800 · #292524
14.52:1 · AAA
-
Secondary text
Stone 600 · #57534e
7.30:1 · AAA
Typography
Display
Inter Tight
Used for headings to create a compact, direct hierarchy with a little more character.
Body
Inter
Used for body copy, navigation and interface text for clarity across screen sizes.
- Sentence case keeps headings conversational.
- Responsive type scales preserve hierarchy on smaller screens.
- Comfortable line height supports longer passages.
- Balanced wrapping avoids distracting single words.
Interface principles
People first
Clear language, semantic structure and accessible interaction are the baseline.
Quiet movement
Motion supports orientation and respects reduced-motion preferences.
Useful restraint
Decoration is kept purposeful so content and artwork have room to breathe.
Build
The site is intentionally small, fast and easy to maintain. Its core tools are:
- SvelteKit and TypeScript
- Structure, routing, server-side access control and interface development.
- Tailwind CSS
- Responsive layout, spacing, colour and typography utilities.
- Vercel
- Hosting, continuous deployment and privacy-friendly web analytics.
- Lenis
- Gentle scrolling, with native behaviour retained for reduced motion.
Credits
- Illustration and design
- Original artwork and site design by Chris Balch.
- Icons
- Phosphor Icons, primarily using the duotone family.
- Typefaces
- Inter and Inter Tight, served locally through Fontsource.
- Source
- Built with SvelteKit and Tailwind CSS.