Typrography & Style Guide 🎨

This document highlights all standard Markdown elements so we can verify that the custom typography stylesheet is rendering properly.

Heading Levels

Let’s test heading depths:

Heading 3 (H3)

Useful for breaking down subtopics.

Heading 4 (H4)

Used for inline details.

---

Lists & Blockquotes

Here’s an unordered list:

• Let’s check bullet alignment.
• Ensure list item spacing is comfortable.
• Check nested bullet styles:
  • Nested item one
  • Nested item two

Here’s an ordered list:

1. First step
2. Second step
3. Third step

Here’s a quote block demonstrating emphasis:

Blockquotes should be visually distinct. Usually, they have a left border colored with the primary brand color, light italics, and slightly larger text to make them stand out from normal paragraphs.

---

Code & Keyboard Keys

For inline code, we write const blog = new InstantBlog(). It should have a light background, custom monospace font, and rounded borders.

For key combinations, we might represent Ctrl + C (styled using HTML tags in markdown).

Here is a CSS code block representing our Tailwind configuration:

@import "tailwindcss";

@theme {
  --color-brand-primary: var(--primary);
  --font-display: var(--font-display);
}

Inline Formatting

You can write in italics, bold, bold and italic, or strikethrough. You can also create links pointing to external websites.

Everything is designed to render seamlessly!