Sirocco keeps its type scale small on purpose — five sizes across the whole theme, reused everywhere from the nav to a post's largest heading. Fewer sizes means less to get wrong, and it's easier to keep every page feeling like the same theme.
Headings
This is an h2 — section headings sit a size below the post title, with
enough margin above to read as a break, not a continuation.
And this is an h3
One size down again, for a subsection within a section. Sirocco doesn't go deeper than that in practice — if a post needs a fourth heading level, it's a sign the post should probably be two posts.
Lists
- Ordered and unordered lists share the same line height as body text
- Nested items indent without changing size
- A list is still just paragraphs, visually
- Numbered lists use the same rules
- The number doesn't change the indent or spacing
- Mix ordered and unordered as needed — they share one stylesheet, not two
Blockquotes get a left border in the accent color and slightly muted text — enough to read as "someone else said this" without looking like an alert box.
Code
Inline code uses the same monospace stack as fenced blocks:
function formatDate(ms: number, lang: string) {
return new Intl.DateTimeFormat(lang, { dateStyle: "long" }).format(ms);
}
Tables
| Option | Type | Default |
|---|---|---|
accent_color |
color | #1e88e5 |
default_dark |
toggle | false |
show_reading_time |
toggle | true |
home_subtitle |
text | (empty) |
Links
Bold, italic, and links all read at the same weight as the rest of the paragraph — nothing about Sirocco's typography shouts.
That horizontal rule above is the only divider Sirocco's stylesheet defines — a plain line in the same muted border color used everywhere else, no ornamentation.