Styleguide

Headings

A lesson starts at level two - the lesson title is the page’s only h1, so the body never competes with it. Three levels is the whole scale, which is as deep as a lesson should need to go.

A third-level heading

Sits under an h2 to break a long section into parts, at a size that still reads as a subdivision rather than a new topic.

A fourth-level heading

The last step. Below this, use bold text at the start of a paragraph instead - another size would be a distinction nobody can see.

Text

Body copy carries bold and italic emphasis, inline code, and links that pick up the accent colour. Paragraphs set the rhythm every other block spaces itself against.

A second paragraph follows at the body interval, which is the measure the callouts, quotes and cards below all step away from.

Quotes

A quote sits against a rule, sized to read as a break in the argument rather than another paragraph.

Nobody gets strong by reading about it, but plenty of people stay injured because they never did.

The alternative centres the quote and lets it carry its own marks. Write it as :::quote.

Train the pattern before you train the load.

Lists

Unordered lists take a square marker in the accent colour:

• Items wrap against a hanging indent
• Spacing matches the body rhythm
• Nesting tightens rather than restating the gap
  • Like this one

Numbered lists share the same measure:

1. The counter sits outside the text column
2. Long items stay aligned to the first character rather than the number
3. The figure is set in the mono face, like every other number in the theme

---

A horizontal rule separates two stretches of argument without needing a heading. Write it as --- on its own line, with a blank line above and below.

Tables

Tables scroll inside their own container when a narrow screen cannot hold them. Write a plain markdown table; the scroller is added for you.

Images

A figure with a caption underneath it.

Add class="wide" to a figure and it breaks the measure on a wide screen, while staying an ordinary figure on a phone.

A gallery puts images two to a row, cropped to a shared cell so the row stays level whatever shape each picture is, and drops to one column on a phone. Click one to open it full size, with arrows, keyboard and swipe; with JavaScript off they stay ordinary images. Write it as :::gallery.

Callouts

A callout carries an aside that should not interrupt the sentence around it. Four flavours, each written as its own directive.

Toggles

A toggle hides detail until it is asked for. Write it as :::toggle[The question].

Do I need equipment for this course?

No. Every session is built around a floor, a wall, and something at waist height. Where a band would help, the lesson says so and gives the version without one.

What if I miss a week?

Repeat the week you missed rather than skipping to the next. The progressions assume the previous one happened.

Can several sit together as a short FAQ?

Yes. Each one is its own card, and a run of them tightens up so the group reads as a single FAQ.

Buttons

A link can be given a button in the reading column when it is the thing to do next, rather than one more link in a sentence.

Browse the catalog

Code

Fenced code blocks carry the mono face on the ink surface, and scroll sideways rather than wrapping.

const minutes = lessons.reduce((total, lesson) => total + lesson.data.minutes, 0);
const label = `${Math.round(minutes / 60)}h ${minutes % 60}m`;