This is an introductory paragraph. Replace this with your executive summary or opening context. It uses Inter 16px with 1.75 line-height for comfortable long-form reading. Keep paragraphs focused — 3-5 sentences each.


Section Heading

Use <h2> for major sections. They render in navy with a gold underline. Use <h3> for sub-sections within a section.

Subsection Heading

Sub-sections use H3 — slightly smaller, charcoal colored, no border. Good for breaking down a section into finer detail without creating a visual hierarchy jump.

"This is a blockquote — great for key insights, quotes, or callout statements that deserve visual emphasis. It renders with a gold left border and warm background."

Key Points

Data Table Example

Tables render with a navy header row and alternating row backgrounds.

Column A Column B Column C Column D
Row 1, Cell A Row 1, Cell B Row 1, Cell C Row 1, Cell D
Row 2, Cell A Row 2, Cell B Row 2, Cell C Row 2, Cell D
Row 3, Cell A Row 3, Cell B Row 3, Cell C Row 3, Cell D

Code Block Example

Use <pre><code> for multi-line code. Inline code uses <code> tags like this. Code blocks have a dark background with a gold left accent stripe.

/* Example: CSS custom property usage */
:root {
  --color-navy:  #1B3F6E;
  --color-gold:  #C9A227;
  --font-heading: 'Raleway', system-ui, sans-serif;
}

.my-component {
  background: var(--color-navy);
  color: var(--color-gold);
  font-family: var(--font-heading);
}

Ordered List Example

  1. First step or numbered item in the sequence
  2. Second step with additional context or detail
  3. Third step — ordered lists are great for procedures and rankings

Conclusion

End with a conclusion section. Summarize key findings, decisions, or next steps. Keep it tight — the reader has already read the full document and needs a crisp takeaway.