Style guide
Every text style and element used on alexhumphreys.me, with its spec.
type
Alex Humphreys
Display
Cormorant 400 · clamp(42–64px)
lh 1.05 · ls −0.015em
Home name only
Cormorant 400 · clamp(42–64px)
lh 1.05 · ls −0.015em
Home name only
Shipping a sky map to the web
H1
Cormorant 400 · 46px (34px mobile)
lh 1.1 · ls −0.01em
balance · centred
Cormorant 400 · 46px (34px mobile)
lh 1.1 · ls −0.01em
balance · centred
A subheading inside a post
H2
Cormorant 600 · 32px
lh 1.15 · left
+24px space above
Cormorant 600 · 32px
lh 1.15 · left
+24px space above
A smaller heading
H3
Cormorant 600 italic · 24px
lh 1.25 · left
+12px space above
Cormorant 600 italic · 24px
lh 1.25 · left
+12px space above
List title
Cormorant 600 · 26px
lh 1.2 · Writing index
Cormorant 600 · 26px
lh 1.2 · Writing index
writingconstellation
Nav
Cormorant 400 · 23px
small-caps · ls 0.12em
lowercase source text
Cormorant 400 · 23px
small-caps · ls 0.12em
lowercase source text
angaben gemäß § 5 ddg
Label
Cormorant 400 · 17px
small-caps · ls 0.12em
#bab6b6 · section labels
Cormorant 400 · 17px
small-caps · ls 0.12em
#bab6b6 · section labels
Body text in a post. Lora sets at a comfortable measure of around sixty-five characters, justified with hyphenation so the right edge stays even. Paragraphs are separated by space, not indents, and links are underlined in gold. Italic handles emphasis; there is no bold.
Body
Lora 400 · 17px
lh 1.75 · justify · hyphens
paragraph gap 20px
Lora 400 · 17px
lh 1.75 · justify · hyphens
paragraph gap 20px
Body text on policy pages and the Impressum. Same face, one size smaller, left-aligned because legal text is scanned more than read.
Body small
Lora 400 · 16px
lh 1.75 · left
Lora 400 · 16px
lh 1.75 · left
I'm Alex, a developer in Berlin
Lead
Lora italic · 17px
#d7d3d3 · intro lines
Lora italic · 17px
#d7d3d3 · intro lines
Meta / caption
Lora italic · 13px
#9b9797 · dates, tags, captions
Lora italic · 13px
#9b9797 · dates, tags, captions
Impressum · Privacy
Small
Lora 400 · 12px
#9b9797 · footer only
Lora 400 · 12px
#9b9797 · footer only
elements
A quoted passage sits behind a single gold rule.
Blockquote
Lora italic 17px · #d7d3d3
1px #c28d41 left rule · 20px pad
Lora italic 17px · #d7d3d3
1px #c28d41 left rule · 20px pad
- First item in a list
- Second item, which can run longer and wrap onto a second line without trouble
List
Lora 17px · lh 1.75
22px indent · 6px item gap
markers #c28d41
Lora 17px · lh 1.75
22px indent · 6px item gap
markers #c28d41
Run idrall check before committing.
Inline code
system mono · 0.85em
bg #252322 · radius 2px
system mono · 0.85em
bg #252322 · radius 2px
# This table turns highlighting on
[markdown.highlighting]
theme = "github-dark"Code block
system mono · 14px · lh 1.6
bg #252322 · hairline border
radius 4px · github-dark syntax colours
system mono · 14px · lh 1.6
bg #252322 · hairline border
radius 4px · github-dark syntax colours
Figure
plate mat: 8px #252322
hairline border
caption = meta style, centred
plate mat: 8px #252322
hairline border
caption = meta style, centred
Rules
Gold: 40×1px #c28d41, under titles
Hairline: 1px rgba(234,231,231,.14)
Gold: 40×1px #c28d41, under titles
Hairline: 1px rgba(234,231,231,.14)
Buttons
Outlined only · Cormorant 600 17px
radius 4px · pad 10×20px
Outlined only · Cormorant 600 17px
radius 4px · pad 10×20px
colour
Background
#1c1a1a
Surface
#252322
Text
#eae7e7
Text soft
#d7d3d3
Text muted
#bab6b6
Meta
#9b9797
Accent (rules)
#c28d41
Link
#e1ad66
Link hover
#facb8d
layout
- Column
- max-width 600px, centred, 24px side padding
- Page top
- clamp(56px, 12vw, 104px)
- Gold rule spacing
- 28px above, 40px below (post); 24 / 48 (index)
- List gaps
- Home nav 16px · post list 32px
- Footer
- 96px above, centred, 24px between links
- Shadows, fills
- None. Structure comes from hairlines and space.