Style Guide
Complete reference for design tokens, typography, components, and layout patterns used across the site. Line numbers reference style.css for quick navigation.
1. Colour Palette
style.css: lines 5–36
Brand Colours
Each colour has a base and a -light variant. The base is used for borders and accents; the light variant for backgrounds.
#cd706f
#e9cbc4
#d16994
#eac8cf
#9272a3
#d7cbd4
#758bbc
#ced3db
#4a93b9
#c1d5db
#6b9476
#cbd6c6
#7d9438
#d0d5b4
#bd7d35
#e4ceb3
#918b77
#e8e6e2
#fac663
#f6e1ba
Neutrals
#1c1918
#403e3d
#666
#a9a9a9
#eee
#f5f2e9
#fcfbf8
#F5F2EA
Links
#294991
#673d7d
#9fc9ff
#d7afff
Semantic Tokens
style.css: lines 38–49 (defaults), 2004–2038 (light/dark overrides)
| Token | Light | Dark |
|---|---|---|
--background-color |
#ffffff |
#1c1918 |
--text-color |
var(--black) / #1c1918 |
#f5f2e9 |
--link |
#294991 |
#9fc9ff |
--link-hover |
#1a2f5e |
#cce2ff |
--visited-link |
#673d7d |
#d7afff |
--highlight-bg |
#f2e5bc |
#453b24 |
--highlight-border |
var(--black) |
var(--white) |
--caption-color |
#636363 |
#8a8a8a |
--error-color |
#b91c1c |
#f87171 |
--focus-bg |
var(--black) |
var(--black) |
--focus-text |
var(--white) |
var(--text-color) |
--focus-border |
var(--black) |
var(--white) |
2. Typography
style.css: lines 54–63 (tokens), 116–231 (base styles), 785–836 (utilities)
Font Stack
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
Scale
Base size: clamp(1rem, 1.5vw + 0.75rem, 1.375rem) — fluid from 16px to 22px.
| Level | Scale | Weight | Line Height |
|---|---|---|---|
| h1 | 2.2× | 800 | 1.25 |
| h2 | 1.65× | 700 | 1.25 |
| h3 | 1.35× | 600 | 1.5 |
| h4 | 1.15× | 600 | 1.5 |
| h5 | 1.05× | 600 | 1.5 |
| h6 | 1× | 600 | 1.5 |
| Body | 1× | 400 | 1.5 |
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Body, Summary, Caption
Body text at the base size with 1.5 line height. Links appear like this.
Summary text is 1.5× base size, used for page introductions.
Caption text is 1rem with --caption-color (#636363).
Body text at the base size with 1.5 line height. Links appear like this.
Summary text is 1.5× base size, used for page introductions.
Caption text is 1rem with --caption-color (#8a8a8a).
3. Spacing & Layout
style.css: lines 51–52 (border), 65–67 (layout), 95–104 (grid)
Global Tokens
| Token | Value | Usage |
|---|---|---|
--border-width |
3px |
Buttons, form fields, focus rings, dividers |
--container-max-width |
71.25rem |
Header/footer container |
--hr-margin |
4rem |
Horizontal rule and section spacing |
--grid-gutter |
2.5rem |
Column gap on desktop |
--grid-gutter-mobile |
1.5rem |
Column gap on mobile |
--grid-margin-top |
4rem |
Top margin on grid sections |
--grid-margin-bottom |
2rem |
Bottom margin on grid sections |
Breakpoints
| Token | Value | Usage |
|---|---|---|
--grid-mobile-breakpoint |
768px |
Mobile/tablet split |
--grid-tablet-breakpoint |
900px |
Tablet/desktop split |
Content Width
main is set to max-width: 65ch for comfortable reading. Full-width layouts (case studies, home) use the 12-column grid within a wider container at --container-max-width (71.25rem).
4. Grid & Layout Templates
style.css: lines 838–954 (page headers/content layouts), 956–1203 (grid layouts), 1527–1998 (case studies)
All layouts use a 12-column CSS Grid with --grid-gutter (2.5rem) between columns. On mobile (≤768px), grids collapse to a single column.
Page Layouts
| Layout | File | Description |
|---|---|---|
| Base | base.html |
Header + nav + main (65ch) + footer. Used by most pages. |
| Gated | gated.html |
Extends base with passcode gate for case study index. |
| Case Study | casestudy.html |
Full-width hero, 8:4 body/sidebar grid, “more” nav. |
| Resume | resume.html |
Sidebar + main with dedicated print styles. |
Grid Patterns
| Pattern | Columns | Class | Used On |
|---|---|---|---|
| Header with image | 8:4 | .header-with-image |
Home page hero |
| Content with image | 8:4 | .content-with-image |
About, Work, Writing |
| Three-column | 4:4:4 | .three-column |
Home page services |
| Brand grid | 3:3:3:3 | .brand-grid |
Home page logos |
| Certification grid | 2:10 | .certification-grid |
Resume certifications |
| Case study body | 8:4 | .cs-body + .cs-sidebar |
Case study detail |
| Case study figures | 8:4 | .cs-body > figure |
Image + side caption |
| Gallery cards | 6:6 | .cs-card |
Case study index |
| More case studies | 3:3:3:3 | .cs-more-grid |
Bottom of case studies |
| Testimonials | 2 columns | .testimonial-grid |
Multi-column masonry |
5. Callouts
style.css: lines 1205–1401
Six colour variants, each with a unique SVG icon placed in the left border gap. Use a .callout-title heading for titled callouts, or start directly with a paragraph.
With Title
Impact
Rust callout with star icon. Used for key outcomes and highlights.
Success
Sage callout with check icon. Used for positive results.
Alert
Teal callout with alert icon. Used for warnings and cautions.
Note
Neutral callout with info icon. Used for supplementary notes.
Tip
Blue callout with chat icon. Used for quotes and tips.
Contact
Purple callout with mail icon. Used for contact information.
Without Title
Rust — star icon, --rust (#bd7d35).
Sage — check icon, --sage (#6b9476).
Teal — alert icon, --teal (#4a93b9).
Neutral — info icon, --neutral (#918b77).
Blue — chat icon, --blue (#758bbc).
Purple — mail icon, --purple (#9272a3).
Rust — star icon, --rust (#bd7d35).
Sage — check icon, --sage (#6b9476).
Teal — alert icon, --teal (#4a93b9).
Neutral — info icon, --neutral (#918b77).
Blue — chat icon, --blue (#758bbc).
Purple — mail icon, --purple (#9272a3).
Callout Icon Map
| Variant | Colour Token | Icon | SVG File |
|---|---|---|---|
.callout-rust |
--rust |
Star | star.svg |
.callout-sage |
--sage |
Checkmark | correct.svg |
.callout-teal |
--teal |
Alert | bad.svg |
.callout-neutral |
--neutral |
Info | info.svg |
.callout-blue |
--blue |
Chat bubble | chat.svg |
.callout-purple |
--purple |
Envelope | mail.svg |
6. Tags
style.css: lines 1407–1442
Tags use a .tag base class with optional colour modifiers. Filled variants use the light colour as background and the base colour as border. Outlined variants are transparent with a coloured border.
Default
Filled
Outlined
Tag-to-Discipline Map
These are the tag colours used across case study pages.
| Tag | Class | Colour |
|---|---|---|
| Research | .tag-rose |
Rose |
| Visual Design | .tag-pink |
Pink |
| Design Systems | .tag-purple |
Purple |
| Prototyping | .tag-blue |
Blue |
| UX | .tag-teal |
Teal |
| Accessibility | .tag-sage |
Sage |
| Field Research | .tag-lime |
Lime |
| Strategy | .tag-rust |
Rust |
| Leadership | .tag-neutral |
Neutral |
7. Buttons
style.css: lines 250–256 (base), 1509–1525 (primary)
| Variant | Class | Style |
|---|---|---|
| Primary | .btn-primary |
Filled background, inverts on hover |
| Black | button.black |
Black border, transparent background |
| Default | button |
Browser default with 0.5em 1em padding |
8. Captions
style.css: lines 829–836 (base), 1555–1566 (hero), 1615–1620 (figure)
Three caption styles used across the site.
Standard caption using .caption class — 1rem, --caption-color (#636363).
Figcaption style — 1rem, used beside case study images.
Standard caption using .caption class — 1rem, --caption-color (#8a8a8a).
Figcaption style — 1rem, used beside case study images.
| Context | Class / Selector | Size | Colour Token |
|---|---|---|---|
| General | .caption |
1rem |
--caption-color |
| Case study hero | .cs-hero .caption |
1rem |
--caption-color |
| Case study figure | .cs-body > figure figcaption |
1rem |
--caption-color |
9. Icons
style.css: lines 670–742 (link icons), 1267–1337 (callout icons)
All icons use CSS mask-image with SVG files, coloured via background-color: currentColor or explicit colour tokens.
Link Type Icons
Automatically appended to links via ::after pseudo-elements based on href attributes.
Callout Icons
Each callout variant has a dedicated icon displayed in the left border gap.
Error Icon
Visual Motifs
Decorative illustrations used on the home page as column icons. Inverted via CSS filter in dark mode.
10. Error States
style.css: lines 1812–1865 (gate error), 2019 / 2037 (token)
Error colour adapts between themes: --error-color is #b91c1c (light) and #f87171 (dark).
11. Highlight
style.css: lines 795–813
Used for strong:target (deep-linked glossary terms) and the .highlight utility class.
Text with a highlighted term in context.
The :target highlight style for deep-linked terms.
Text with a highlighted term in context.
The :target highlight style for deep-linked terms.
12. Focus States
style.css: lines 258–295 (skip/hidden), 413–423 (link focus), 546–556 (footer focus)
All interactive elements use outline: 2px solid var(--text-color) with outline-offset: 3px via :focus-visible. The skip link appears on focus at the top of the page.
| Element | Outline | Offset | Notes |
|---|---|---|---|
| Links | 2px solid --text-color |
3px |
Removes underline on focus |
| Nav links | 2px solid --text-color |
3px |
Same as base links |
| Footer links | 2px solid --white |
3px |
White outline on dark background |
| Buttons | 2px solid --text-color |
3px |
Consistent with links |
| Form inputs | 2px solid --text-color |
2px |
Slightly tighter offset |
| Skip link | Full-width bar | Fixed top | Visible only on :focus |
Tab through this page to see focus rings in action.