Every great publication requires a coherent visual language. This living document is designed to showcase the complete spectrum of Markdown primitives and formatting elements rendered within our editorial aesthetic.

Whether you are crafting an essay, technical post-mortem, or design treatise, these styling rules preserve optical comfort, rhythm, and clarity.

1. Typographic Hierarchy

Heading levels establish intellectual and structural pacing. They range from prominent chapter headers down to small label headings.

Heading Level 1 (H1)

Use level one headers sparingly inside article bodies, usually reserved for distinct manuscript movements.

Heading Level 2 (H2)

The standard section divider, balanced with generous leading and proportional margins.

Heading Level 3 (H3)

Subsections that cluster related arguments or topical segments.

Heading Level 4 (H4)

Minor subheadings to delineate specific components or technical sub-topics.

Heading Level 5 (H5)

Accentuated monospaced tag header for category metadata or procedural steps.

Heading Level 6 (H6)

Smallest uppercase label header for structural footers or fine-grained categorizations.

2. Inline Text Formatting & Links

The prose styling includes nuanced typography for emphasis, annotation, and referencing:

Bold text using **bold** or __bold__ introduces weight without jarring optical disruption.
Italic text using *italics* or _italics_ gives graceful emphasis using Aleo’s slanted letterforms.
Combined Bold & Italic can be used for pivotal thesis sentences.
Strikethrough text via ~~strikethrough~~ renders with a muted tone: ~~obsolete mental models~~.
Inline text highlighting via <mark>: focused attention in a noisy world.
Keyboard shortcuts can be written with the <kbd> tag: Press ⌘ + K to initiate quick navigation, or Ctrl + C to terminate a process.

Hyperlinks

Links should feel integrated into the text rather than screaming like neon signs:

Internal navigation: Return to the homepage or inspect the writing archive.
External references: Explore Astro Documentation or read about typography in the digital realm.
Auto-linked URL syntax: https://github.com

3. Blockquotes & Citations

Blockquotes feature our signature accent border, softly tinted background, and comfortable rounded geometry.

“Simplicity is not the lack of clutter, that’s a consequence of simplicity. Simplicity is somehow essentially describing the purpose and place of an object and product. The absence of clutter is just a byproduct of that.”

— Jony Ive, Reflections on Industrial Design

Nested blockquotes can also be utilized for dialogue or commentary:

First layer of quotation establishes the historical observation:

“A tool should feel like an extension of the human hand, quiet until summoned.”

— Traditional Craftsman Maxim

4. Images & Figures

Images are presented with subtle borders and shadows that fit seamlessly on our newsprint texture.

A serene workspace desk with notebook, fountain pen, and morning coffee

Figure 1: The tactile desk setup — an analog refuge where thoughts are distilled before entering digital form.

Markdown also supports standard linked images:

5. Lists & Structural Taxonomies

Unordered Bullet List

Mindful curation of digital inputs
Deliberate typography choices:
- Serif typography for long-form reading comfort
- Monospace accents for dates, metrics, and tags
- High tonal contrast without optical glare
Finite canvas with distinct physical borders

Ordered Sequential List

Establish a single clear premise before writing the first sentence.
Outline key points on physical paper to avoid early digital distractions.
Draft the prose in plain Markdown.
Proofread aloud to verify rhythmic cadence.
Publish to the static site with zero client-side hydration bloat.

Interactive Task / Checklists (GFM)

Select harmonious earthy palette (#F2F3F0, #526B73, #292E2D)
Configure web typography with Aleo & JetBrains Mono
Ensure 100% responsive layout across mobile, tablet, and desktop
Draft upcoming essay on tactile computing interfaces

6. Code Blocks & Syntax

Inline Code

Execute astro dev to run the local server, or inspect the siteConfig object declared in src/config.ts.

Fenced Code Block (CSS / Variables)

:root {
  --bg-page: #F2F3F0;
  --text-primary: #292E2D;
  --accent-terracotta: #526B73;
  --font-serif: 'Aleo', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* Elevate reading experience */
.prose p {
  line-height: 1.8;
  font-size: 1.125rem;
}

Fenced Code Block with Diff Syntax

- const framework = "heavy-monolith-spa";
+ const framework = "astro-static-quiet-web";
  
  function getEngine() {
-   return loadBloatedBundle(5000);
+   return loadZeroJsHtml();
  }

Monospace ASCII Diagram

+-------------------------------------------------------------+
|                     EDITORIAL CANVAS                        |
|                                                             |
|   +-------------------+    +----------------------------+   |
|   |   Sidebar (Nav)   |    |    Main Article Body       |   |
|   |   - Profile Info  |    |    - Typographic Header    |   |
|   |   - Navigation    |    |    - Balanced 680px Grid   |   |
|   |   - Newsletter    |    |    - Clear Contrast Ratio  |   |
|   +-------------------+    +----------------------------+   |
+-------------------------------------------------------------+

7. Data Tables

GFM tables feature elegant alternating hover effects, clear monospaced table headers, and responsive borders:

Design Property	Token / Value	Optical Purpose
Canvas Background	`#F2F3F0`	Warm parchment hue eliminates retina fatigue
Primary Ink	`#292E2D`	Charcoal depth softer than harsh `#000000`
Accent Hue	`#526B73`	Slate-terracotta for thoughtful anchors
Body Typeface	Aleo Serif	Literary warmth reminiscent of printed cloth books
Technical Type	JetBrains Mono	Precise metadata, timestamps, and source snippets

8. Horizontal Rules & Dividers

Horizontal rules can separate thematic movements:

You can use three asterisks ***, three dashes ---, or three underscores ___ to define boundaries.

9. Footnotes & Explanatory References

Markdown footnotes enable scholarly citations without interrupting the prose cadence¹. You can also reference technical concepts² throughout the article.

Footnotes provide additional context or historical citations, styled neatly at the base of the article with back-links to the referring sentence. ↩
Markdown was created in 2004 by John Gruber with substantial contributions from Aaron Swartz, aimed at producing clean, human-readable plain text formatting. ↩