Markdown Style Sampler

This page is a disposable visual sampler for project case-study Markdown. It includes strong text, emphasized text, deleted text, a regular link, and inline code inside a normal paragraph.

Press t to cycle the theme. Press Tab to check focus states.

H3 Accent Label

This heading level should feel like a compact technical label with a quiet accent rule.

H4 Quiet Label

This heading level should feel subordinate to the H3 treatment.

H5 Small Note

This heading level is for tiny labels and supporting notes.

A blockquote can carry a constraint, decision note, principle, or source excerpt without turning into a loud callout.

---

Unordered lists should be easy to scan and use accent markers without becoming decorative.

• First bullet with a short observation.
• Second bullet with inline code.
• Third bullet with nested detail:
  • Nested bullet A.
  • Nested bullet B.

Ordered lists should keep the same rhythm.

1. Frame the problem.
2. Name the constraint.
3. Make the tradeoff explicit.

Task lists should be quiet and readable.

• Validate the content schema.
• Render the case-study cards.
• Visually inspect the sampler page.

Tables should work for compact architecture comparisons.

Element	Intended Use	Visual Treatment
###	Card subsection	Accent rail and mono uppercase label
blockquote	Constraints or notes	Muted surface with accent rail
table	Comparisons	Mono text, lined rows, quiet hover

Fenced code blocks should stay readable and scroll safely on smaller screens.

type CaseStudySection = {
  title: string;
  variant?: "default" | "accent";
  content: MarkdownBlock[];
};

Markdown images should inherit a quiet frame inside the card.