# 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
### Link Colors
#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 ```css .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 ```css .card { background: var(--bg-surface); border-radius: var(--border-radius); padding: var(--space-lg); box-shadow: var(--shadow-sm); } ``` ### Link ```css a { color: var(--link-color); transition: color var(--transition-fast); } a:hover { color: var(--link-hover); } ``` © Ricky Moorhouse