Style Guide
A reference of the design components used across the site. Single stylesheet, no frameworks — see /colophon for the why.
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
A regular paragraph. The body type is 18px Helvetica Neue / Arial, with a 1.6 line-height and a max width of 72ch. Text is set in var(--text-color) against var(--bg-color), both supplied by the active theme class on <html>.
Bold text uses <strong>. Italic text uses <em>. You can link to another page — links are underlined, with the underline removed on hover/focus.
Lists
Unordered list:
- First item
- Second item
- Nested item
- Another nested item
- Third item
Ordered list:
- First step
- Second step
- Third step
.consulting-list — used on /consulting for hover-highlighted rows with subtle dividers:
- Assess current strategy, objectives, and alignment with business goals
- Review content quality, editorial standards, and organic growth potential
- Identify execution gaps, risks, and dependencies across teams
- Highlight quick wins, structural improvements, and growth opportunities
.emoji-list — used on /contact, /follow, and /now to drop the bullet and let an emoji lead each line:
- 📧 Email: [email protected]
- 💼 LinkedIn: linkedin.com/in/alexanderhuth
- 🍿 Letterboxd: letterboxd
- 📆 Meet: alexanderhuth.com/meet
Tables (media-table)
The .media-table layout used on /media and /grounds. Each row is a CSS grid with emoji, title + meta, and date.
| Example Film (2024) | May 19 | |
| Example Album (2023) | May 18 | |
| Example Show | May 17 |
Filter buttons
The inline filter row from /media, built from <button>s styled to look like text links:
Code
Inline code looks like bundle exec jekyll serve. Block code:
def media_sync
entries = fetch_entries
entries.map { |e| normalize(e) }
end
Call to action
The .cta-button used to drive bookings on /consulting and elsewhere:
Logo mark
The four-tile brand mark from the site header, rendered with CSS only:
Theme palette
Background, text, and border colors rotate per page-load via one of these classes on <html>:
- sand
- mustard
- seaglass
- coral
- terracotta
- sky
- lilac
- plum
- slate
- royal
- forest
- ruby
- fireball
- letterboxd
Form controls
The .meet-form styles from /meet: