Style guide: every prose element, in context

This post exists to show every typographic element available in the template. Use it as a reference when writing — paste in whatever pattern you need.

Headings

All headings use Space Grotesk at weight 500. H2 gets a strong top border to signal a new section. H3 is the go-to for sub-sections. H4 is for tight sub-divisions within a section.

H3 — sub-section

H3 is 28px, snug line-height. Good for named sub-sections within a major topic.

H4 — tight sub-division

H4 is 22px. Use it sparingly, usually inside an H3 block.

H5 — labeled callout heading

H5 renders in JetBrains Mono, all-caps, with an orange square before it. Use for labeled asides or factboxes.

H6 — muted label

H6 is the quietest heading. Mono, all-caps, secondary color. Use for footnotes or metadata sections.

Body text and inline elements

Regular body copy runs at 18px, 1.55 line-height. Bold text is weight 700. Italic is standard oblique. You can combine them for bold italic if needed. Strikethrough uses a 1px decoration. ==Highlighted text== gets a solid orange background with inverse text.

Inline code snippets use JetBrains Mono on the rule background. ⌘+K keyboard shortcuts get a bordered mono treatment.

Links look like this — underlined at 1px, orange on hover.

Blockquote — pull quote

"The best thing about Charlotte is that nobody agrees on what the best thing about Charlotte is. That's the whole point." — Someone at a cookout in Plaza-Midwood

Unordered list

• A flat tire in front of a stranger's house
• The stranger turns out to own a tire shop
• This is, somehow, a true Charlotte story
• The stranger's name was Gerald

Nested list

• The neighborhoods worth knowing
  • South End (walkable, expensive, busy)
  • NoDa (arts, murals, increasingly expensive)
  • Plaza-Midwood (the one everyone agrees is good)
    • Specifically: the stretch near Central Ave
  • Elizabeth (quiet, old-money, good for brunch)

Ordered list

1. Arrive in Charlotte
2. Spend three weeks convinced the traffic is temporary
3. Download the light rail app
4. Discover the light rail doesn't go where you need to go
5. Buy a parking pass

Horizontal rule

---

Table

Rank	Neighborhood	Vibe	Avg. rent
01	South End	Young, walkable, busy	$1,950
02	Plaza-Midwood	Eclectic, established	$1,700
03	NoDa	Arts, bars, murals	$1,600
04	Elizabeth	Quiet, leafy	$1,800
05	Optimist Park	Up-and-coming	$1,450

Code block

# Find the best neighborhood for your budget
neighborhoods = {
    "South End": 1950,
    "Plaza-Midwood": 1700,
    "NoDa": 1600,
    "Elizabeth": 1800,
}

budget = 1750
picks = [n for n, rent in neighborhoods.items() if rent <= budget]
print(f"You can afford: {', '.join(picks)}")

Images

Images render full-width within the prose column. Append #modal to a URL to make an image expandable on click.

Definition list

A definition list works well for glossaries or quick-reference sections.

Light rail

The LYNX Blue Line. Runs from UNC Charlotte to I-485 in South End. Useful if you happen to work or live at one of those two places.

Uptown

What Charlotte calls its downtown. Not ironic. Just what it's called. Don't say downtown.

The 485

The outer belt highway. Everything inside it is Charlotte. Everything outside it is also, confusingly, Charlotte.

Footnotes

You can add footnotes¹ inline and they'll collect at the bottom of the post².

Footnotes

1. This is the first footnote. It renders in small secondary text below a strong rule. ↩

2. Footnote links are orange monospace superscripts in the body, and link back up from the footnote list. ↩