01 Overview
Use this opening section for the core premise: what this article is for, when to use it, and what the reader should know before continuing. It should read like a practical guide, not a landing page.
The best article pages have a clear spine. Start with the simple version, then move into the sharper details: what matters, what to avoid, and what the reader can reuse when they leave the page.
Quick read
What this is: a template for practical articles, workflow notes, setup guides, and reference pages. The structure is intentionally compact: a card-like header, a sticky navigation rail, and a readable main column.
When to use it: use it when the page needs to teach, document, compare, or explain. If the page is mostly navigation, use a hub layout instead. If it is a deep tutorial, add more sections but keep the same rail and section rhythm.
What to avoid: do not turn every section into a card. Cards are for emphasis and structured references; the main article should stay open, calm, and easy to scan.
Pattern
Start with the outcome, then explain the moving parts. Keep headings literal. A reader should be able to skim the rail, the section titles, and the paragraph openings and still understand the shape of the article.
design-harness/
AGENTS.md
DESIGN.md
docs/design-system/
prompts/
templates/
examples/Frame the problem
Name the situation clearly. Do not begin with background if the reader needs a practical answer.
Show the useful model
Give the reader a way to make decisions. This can be a rule, a checklist, a comparison, or a short workflow.
End with a reference
Include the snippet, command, prompt, checklist, or file structure someone can reuse later.
Examples
Short example: for a concept page, use one note, two sections, and a compact reference block. Keep the sidebar to four links or fewer.
Long example: for a deep guide, add section groups. Use workflow cards for repeated steps, but let explanation paragraphs remain unboxed.
| Component | Use it for | Notes |
|---|---|---|
.template-hero | Article or guide page opening | Gradient shell, meta pills, optional visual mark |
.section-nav | Sticky section index | Use for long pages with clear sections |
.terminal-window | Code, prompts, commands, file trees | Use mono content only |
.data-table | Comparison and reference tables | Wrap in .data-table-wrap |
Checklist
Reusable rule: use notes for guidance that should interrupt the reader gently, not for every paragraph.
1. Does the title say what the page actually helps with?
2. Can the sidebar be skimmed as a table of contents?
3. Are cards used for emphasis instead of wrapping every section?
4. Is there a reusable snippet, checklist, prompt, or command at the end?