Style Guide

This post demonstrates every content element used across the blog. Use it as a reference for formatting, a test bed for CSS changes, or a checklist when adding new styles.

Headings

Headings use the --weight-heading (300) weight and --tracking-heading letter-spacing. Each level scales from --size-h2 down.

Third-level heading

Used for subsections within a larger topic. Scales to --size-h3.

Fourth-level heading

Smallest heading level. Falls back to --size-base for body-size sections.

Paragraphs

Body text uses --font-body at --size-base with --leading (1.65) line-height. Paragraphs are separated by --flow (1.25em) margins that scale with the current font size.

This is a second paragraph to demonstrate the vertical rhythm. Text should wrap naturally within --measure-text (40em) and long words should break via overflow-wrap.

Links

Internal links use --color-accent with a thin underline (--underline-weight: 1px) offset from the text baseline.

This is an inline link to another section of the post.

Links at the end of a sentence should feel like part of the flow, not interruptions.

Emphasis

Bold text uses --weight-strong (500) for emphasis without changing the visual weight too much.

Italic text is available but used sparingly.

Bold and italic together when both signals are needed.

You can also use strikethrough for deprecated or removed content.

Blockquotes

"The details are not the details. They make the design."

— Charles Eames

Blockquotes have a left border using --border-width-thick and --color-rule, with muted text color. They can span multiple paragraphs.

A longer blockquote might contain several ideas separated by paragraphs.

The second paragraph inside the quote maintains the same styling and indentation.

Inline Code

Use code for short snippets like variable names, file paths, or command-line arguments. Inline code has subtle background, rounded corners, and reduced font size (--size-code: 0.92em).

For example, the --color-accent variable controls link color, and marked handles the markdown-to-HTML conversion.

Code Blocks

Code blocks use --font-mono (JetBrains Mono) with a border, padding, and horizontal scroll for overflow. Syntax highlighting is provided by Prism.

// A simple utility function
function formatDate(date) {
    return new Intl.DateTimeFormat('en-GB', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
    }).format(date);
}

const today = formatDate(new Date());
console.log(`Today is ${today}`);

/* CSS custom properties example */
:root {
    --color-accent: #3b82f6;
    --space-unit: 1rem;
    --flow: 1.25em;
}

.prose p {
    margin-block: 0 var(--flow);
}

# Shell commands
bun run build
bun run test
fly deploy

{
    "name": "anthonyyy.com",
    "type": "module",
    "scripts": {
        "dev": "bun run src/server.ts",
        "build": "bun build src/server.ts --target=bun --outdir=dist"
    }
}

Lists

Unordered Lists

Simple bullet lists for non-sequential items:

• First item in the list
• Second item with bold emphasis on key terms
• Third item containing an inline code reference
• Fourth item with a nested link

Ordered Lists

Numbered lists for sequences or steps:

1. Plan the implementation
2. Write the code
3. Run the tests
4. Deploy and verify

Nested Lists

• Top-level item
  • Nested sub-item
  • Another nested item
    • Deeply nested item
  • Back to second level
• Back to top level

Definition Lists

Not natively supported by GFM markdown, but useful to note:

Term: Definition of the term.

Another term: Its corresponding definition.

Horizontal Rules

A horizontal rule creates a visual break between sections. It uses --border-width with double the flow spacing above and below.

Above and below this rule is calc(var(--flow) * 2) of vertical space.

Tables

Tables compare related data in rows and columns.

Larger tables with more columns:

Images

Images scale to max-width: 100% and maintain their aspect ratio.

Figures and Captions

Figures pair an image with a descriptive caption using HTML elements directly in the markdown.

Multiple figures can appear in sequence:

Mixed Content

Real posts combine elements naturally. Here is a paragraph that leads into a blockquote, followed by a code example and a list of takeaways.

Good typography is invisible when done right. The reader should never notice the font choice, line length, or spacing — they should only experience the content flowing smoothly from one idea to the next.

"Type is a tool for communication, not a form of self-expression." — Matthew Carter

When configuring type scales, the relationship between sizes matters more than the absolute values:

const scale = 1.22; // Major third
const base = 17;    // px

const sizes = {
    h1: base * Math.pow(scale, 3),  // ~38px
    h2: base * Math.pow(scale, 2),  // ~31px
    h3: base * scale,               // ~21px
    body: base,                      // 17px
    small: base / scale,             // ~14px
};

Key takeaways:

• Choose a ratio and stick with it across all heading levels
• Test your scale at the smallest size first — if it reads there, it reads everywhere
• Line-height should decrease as font-size increases
• --flow in em units means paragraph spacing tracks the current text size

Callouts and Alerts

Some posts use custom HTML for highlighted content blocks.

Summary

This post covers every content element the blog currently supports:

• Typography: headings (h2–h4), paragraphs, bold, italic, strikethrough
• Links: inline links with accent colour
• Code: inline code and fenced code blocks with Prism syntax highlighting
• Lists: ordered, unordered, and nested
• Blockquotes: attributed and multi-paragraph
• Tables: data comparison with headers
• Images: standalone with alt text
• Figures: images with captions via HTML
• Horizontal rules: section dividers
• Custom HTML: callout divs for highlighted content