Sheet 02.14 / Components · Content

Prose

The article body: serif H2s, dotted links, a diamond-marked pull quote, code and tables. Body text is 17px in text; bold and links in ink, and link hover turns rind.

CLASSb-proseDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — proselive, from bundle.css

article / body

A shadow says an object floats above the page. On a drawing sheet nothing floats: every part is drawn on the same plane, and an edge is a line someone chose to draw. That is the whole case for hairlines.

One line, one meaning

Every border on the sheet is the same token, --line, at one pixel.

If two things need separating, draw a line between them. If they don't, don't.

Edge	Shadow	Hairline
Card	Blur and offset	The row's own lines
Window	Elevation	One border, radius-md

Anatomy

Parts

Part	Class	Notes
Body	`.b-prose`	Wraps the article's HTML; styles elements, not classes.
Quote	`blockquote`	A pineapple diamond instead of a left border.
Code	`code`	Mono on heat-0.
Table	`table`	Hairline rows, no zebra.

Markup

Code

bundle.css

<div class="b-prose" style="max-width:640px">
  <p>A shadow says an object floats above the page. On a drawing sheet nothing floats: every part is <strong>drawn on the same plane</strong>, and an edge is a line someone chose to draw. That is the whole case for <a href="#l">hairlines</a>.</p>
  <h2>One line, one meaning</h2>
  <p>Every border on the sheet is the same token, <code>--line</code>, at one pixel.</p>
  <blockquote>If two things need separating, draw a line between them. If they don't, don't.</blockquote>
  <table>
    <thead><tr><th>Edge</th><th>Shadow</th><th>Hairline</th></tr></thead>
    <tbody><tr><td>Card</td><td>Blur and offset</td><td>The row's own lines</td></tr><tr><td>Window</td><td>Elevation</td><td>One border, radius-md</td></tr></tbody>
  </table>
</div>

Use one pull quote per article at most.
Let tables carry comparisons instead of long lists.

Don't

Colour text for emphasis; use bold in ink.
Put an Insert or any promo inside the prose.