Style Guide
How this site looks and sounds: the logo, the colours, the type and the pieces every page is made of. Everything shown here is the site’s own CSS, so it stays true as the site changes.
Overview
A personal blog about tech, cars, collecting and life, written in the first person.
Purpose
A home for what I’m into and what I’ve lived through: posts, the projects I run, my bucket lists and the things I build. It should feel like me, not like a company.
Voice
- Personal
- First person, my own experience. “I”, not “we” or “one”.
- Direct
- Short sentences, plain words. Say the thing, then stop.
- Honest
- What worked and what didn’t, with the numbers when there are numbers.
- Curious
- Nerdy about cars, games and collecting, without a wall of jargon.
Logo
My photo and the BART.M wordmark, with the tagline under it.
BART.M
Personal Blog
Full logo · the site header
BART.M
Compact · the header once the page scrolls
Wordmark
BART.M in Jaro, uppercase, in Strong white. The full stop is part of it.
Tagline
“Personal Blog” in Inter 600, in Teal, under the wordmark. It drops away in the compact header.
Clear space
Keep at least the height of the wordmark clear around the logo. Smallest size: a 48px photo.
Don’t
BART.M
Recolour the wordmark
BART.M
Stretch or squash it
BART.M
Set it in another font
BART.M
Put it on a busy background
Colour
Dark greens with one teal accent, and a rose-to-amber gradient for anything you can press.
Primary
Teal
#04D4AE · RGB 4, 212, 174
Links, focus rings, post titles, the current page in the menu
var(--accent)
Pantone 3385 C
Night
#04100E · RGB 4, 16, 14
The page background
var(--bg)
Pantone Black 6 C
Forest
#020D09 · RGB 2, 13, 9
Cards, panels and the contact form, fading to #04160f
var(--card-from)
Pantone 419 C
Accent
Rose
#D9579B · RGB 217, 87, 155
The start of the gradient: every button, card rings, title icons, social icons
var(--rose)
Pantone 674 C
Amber
#FFC72C · RGB 255, 199, 44
The end of the gradient, and pills for things done (NetFire Amber)
var(--amber)
Pantone 123 C
Text
Strong
#F1F4F4 · RGB 241, 244, 244
Page titles, headings, names, the wordmark
var(--text-strong)
Pantone 7541 C
Body
#E3E8E8 · RGB 227, 232, 232
Paragraphs
var(--text)
Pantone 7541 C
Soft
#ABBABA · RGB 171, 186, 186
Card titles at rest, secondary text
var(--text-soft)
Pantone 5517 C
Muted
#8FA3A3 · RGB 143, 163, 163
Dates, labels, captions
var(--text-muted)
Pantone 443 C
Gradient
Rose #D9579BAmber #FFC72C
Buttons, the ring around a card on hover, the contact form’s ring, the icons before page titles, the bar beside the home page’s title and the social icons. Always rose to amber: left to right, or top to bottom.
The nearest Pantone Solid Coated colour is given with each colour above, matched by colour difference (CIEDE2000). Amber is exactly Pantone 123 C. Teal, Rose and the text colours are close matches; Night and Forest are darker than any Pantone green, so print them as Black 6 C and 419 C.
Typography
Three faces: Jaro for headings and the logo, Inter for reading, Martian Mono for labels.
Aa
Jaro
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
Headings and the logo. Uppercase for titles.
Aa
Inter 400 · 600
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Everything you read. 16px text, never smaller than 14px.
Aa
Martian Mono
ABCDEFGHIJKLM
0123456789
Labels, the menu, buttons, dates and pills. Uppercase, small.
Scale
Gaming Spartan
Car Bucket List
My stomach keeps telling me
Two weeks in Europe
I write about tech, cars, and collecting things.
Every time I spend a couple of weeks in Europe, the same thing happens.
The installer is still being built.
October 25, 2026 · 2 min read
Halo Infinite · A league for fun
Visited
Components
The pieces every page is built from.
Buttons
See the list
Send message
Coming soon
One button: the rose-to-amber gradient, Martian Mono in dark text. It brightens on hover and darkens a step when pressed; one that isn’t ready yet is faded.
Pills
Seen live
Visited
New
Amber for things done. Teal for anything else.
Card
Dark green, 24px corners. On hover a rose-to-amber ring turns around the edge.
Form field
Floating labels, as in Halo Labs: the label sits in the field and moves onto its border once there’s focus or text.
Section label
Latest posts
Martian Mono, 13px, uppercase, over a hairline.
Page title
Tech
Jaro in Strong white, with a line icon in the rose-to-amber gradient before it.
List row
- Mazda RX-7 FD3S Vintage Red
The bucket lists: a name, sometimes a pill, and a note on the right in Martian Mono.
Motion
Small and slow. Everything here stops for people who ask their system for reduced motion.
Hover
Cards brighten a touch and a gradient ring turns around them. Arrows nudge up and right.
Loading
A page’s sections rise and fade in one after another, and the ones further down as they scroll into view. Title icons pop in; the bar beside the home page’s title draws down.
Header
Stays at the top and shrinks to the compact logo once you scroll. It slides away while you scroll down and comes straight back when you scroll up.
Pressed
Menu links fill with a deeper teal and buttons darken a step the moment they’re pressed.
Seasons
A scene on the footer line that changes with the season. Autumn: leaves that pile up on the line (sweep them off with the mouse), pumpkins, a scarecrow, a walking spider and cobwebs. Winter: snow, a snowman, a Christmas tree and Santa with all nine reindeer. Spring: rain and lightning, flowers coming up, then the sun before the rain returns. Summer: hot air balloons, the sea with a sailboat, a beach with a crab, and fireworks at the bottom of the page. Try fall, winter, spring or summer.