Style Guide

A reference for the colors, typography, and design tokens used in this blog.

Blog Style Guide

A reference for the colors, typography, and design tokens used in this blog.

Colour Palette

Primary Colours

Primary

#006646 / #009966
colour-primary

Primary Bright

#00bb88
colour-primary-bright

Secondary

#dd8800
colour-secondary

Secondary Bright

#eebb99
colour-secondary-bright

Link Default

#006699
colour-link

Neutrals

Text Primary

Main text

Text Secondary

Meta info

Text Muted

Placeholders

Background

Page bg

Surface

Cards, containers

Code Background

Code blocks

Additional

Sage Green

#8FA998
colour-sage

Seafoam

#7FC5B4
colour-seafoam

Forest

#2D5A45

Slate

#5A7D8C
colour-slate

Sky

#7AB8D9

Link Default

#006699
colour-link

Soft Lilac

#D4C5E8

Lavender

#9B7BB8

Deep Plum

#5A3A6E

Golden Yellow

#E6A833

Coral

#E07B5B

Visited Places

#D96040

Stone

#8A8A8A

Warm Gray

#9E9A95

Charcoal

#2A2A2A

Typography

Heading 1 — The Quick Brown Fox

Heading 2 — Pack my box with five dozen liquor jugs

Heading 3 — How vexingly quick daft zebras jump

Headings use Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;

Body text — The quick brown fox jumps over the lazy dog. This is sample body text using transitional styles. The specific stack is Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;

Small text — Metadata, captions, and timestamps use smaller text at 0.875rem.

Inline code uses monospace with a light gray background.

Code samples use ui-monospace, 'Cascadia Code',
'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono',
monospace

Spacing Scale

--space-xs (4px)

--space-sm (8px)

--space-md (16px)

--space-lg (24px)

--space-xl (32px)

--space-2xl (48px)

Border Radius

Variable	Pixels	Usage
`--border-radius-sm`	4px	Buttons, small elements
`--border-radius`	8px	Cards, containers

Shadows

Variable	CSS	Usage
`--shadow-sm`	`0 1px 3px rgba(0,0,0,0.08)`	Subtle depth