Space for a
longer thought.

AUTHORED REFERENCE ARTICLE

The details that make a tool feel clear

A good product story gives each piece of information a place. The title sets the subject, supporting text adds context, and the first image explains the task.

Start with the reading measure

The source uses narrower text containers inside a wider page shell. This reference sets long-form prose to 746px, with a comfortable line height and explicit spacing between paragraphs, headings and figures.

Let different blocks stay different

A code sample needs selectable text. A quote needs attribution. A screenshot needs a legible natural ratio. A table needs labeled columns and its own overflow region when the viewport narrows.

/* A local reading contract */
.reading { max-width: 746px; margin-inline: auto; }
.article p { font-size: 16px; line-height: 1.8; }

Use a clear hierarchy so a reader can choose how deeply to read.Authored reference guidance

Give the reader a way back

Stable article routes, breadcrumbs and related links make a collection navigable without inserting an unrelated call to action into the reading flow.