Ricky Moorhouse

Style Guide

Blog Style Guide

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

Color Palette

Primary Colors

#009988
Primary
Brand, sidebar, links
#00bb88
Primary Bright
Hover states
#dd8800
Secondary
Highlights, CTAs
#eebb99
Secondary Bright
Soft highlights

Neutrals

#333333
Text Primary
Main text
#666666
Text Secondary
Meta info
#999999
Text Muted
Placeholders
#fafefd
Background
Page bg
#ffffff
Surface
Cards, containers
#f5f5f5
Code Background
Code blocks
#006699
Link Default
Standard links
#dd8800
Link Hover
Hover state

Complementary Color Suggestions

These colors work well with your existing #009988 primary and can be used for accents, data visualizations, or thematic variations.

Teal/Green Analogous (Natural Feel)

#006666
Deep Teal
Dark accents, footer
#8FA998
Sage Green
Soft backgrounds
#7FC5B4
Seafoam
Secondary buttons
#2D5A45
Forest
Dark mode accents

Warm Accent Colors (Complementary)

#CC6633
Burnt Orange
Highlights, alerts
#E6A833
Golden Yellow
Success, awards
#E07B5B
Coral
Notifications
#F5C4A0
Peach
Soft backgrounds

Blue Accents (Trust/Professional)

#006699
Ocean Blue
Links (existing)
#5A7D8C
Slate
Muted accents
#7AB8D9
Sky
Gentle highlights

Purple/Violet (Creative)

#9B7BB8
Lavender
Thematic accents
#5A3A6E
Deep Plum
Dark mode accents
#D4C5E8
Soft Lilac
Background tints

Grays (Neutral Expansion)

#2A2A2A
Charcoal
Dark mode text
#8A8A8A
Stone
Muted text
#9E9A95
Warm Gray
Dividers, borders

Typography

Font Families

Role Font Fallback
Headings IBM Plex Sans system-ui, sans-serif
Body IBM Plex Serif Georgia, serif
Code IBM Plex Mono monospace
Navigation "Courier Prime Sans" system-ui, sans-serif

Typography Scale

Heading 1 — The Quick Brown Fox

Heading 2 — Pack my box with five dozen liquor jugs

Heading 3 — How vexingly quick daft zebras jump

Body text — The quick brown fox jumps over the lazy dog. This is sample body text using IBM Plex Serif with a comfortable line-height of 1.6 for readability.

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

Inline code uses IBM Plex Mono with a light gray background.

Font Sizes

Variable Rem Pixels Usage
text-sm 0.875rem 14px Metadata, captions
text-base 1rem 16px Body text
text-lg 1.125rem 18px Lead paragraphs
text-xl 1.25rem 20px Small headings
text-2xl 1.5rem 24px Section headings
text-3xl 2rem 32px Page titles

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
--border-radius-lg 12px Modals, large containers

Shadows

Variable CSS Usage
--shadow-sm 0 1px 3px rgba(0,0,0,0.08) Subtle depth
--shadow-md 0 4px 12px rgba(0,0,0,0.1) Cards, dropdowns
--shadow-lg 0 8px 24px rgba(0,0,0,0.12) Modals, popups

Transitions

Variable CSS Usage
--transition-fast 150ms ease Hover effects
--transition-normal 250ms ease Animations

Layout

Property Value
Sidebar width 60px
Content max-width 800px
Container padding 5vw

Dark Mode Adjustments

When dark mode is active ([data-theme="dark"]):

#1a1d1a
Background
Light: #fafefd
#222522
Surface
Light: #ffffff
#2a2d2a
Code BG
Light: #f5f5f5
#e0e0e0
Text Primary
Light: #333333
#b0b0b0
Text Secondary
Light: #666666

Data Visualization Colors

#009988
Flight Routes
Map route lines
#D96040
Visited Places
Map markers
#dd8800
Airports
Endpoints

Usage Examples

Button

.btn-primary {
  background: var(--color-primary);
  color: white;
  border-radius: var(--border-radius-sm);
  padding: var(--space-sm) var(--space-md);
  transition: background var(--transition-fast);
}

.btn-primary:hover {
  background: var(--color-primary-bright);
}

Card

.card {
  background: var(--bg-surface);
  border-radius: var(--border-radius);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}

a {
  color: var(--link-color);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--link-hover);
}