The generated pattern goes on edges and backgrounds, never in corners. data-edge puts a band on one side of a block; data-fade puts the pattern behind the content and fades it out where the text sits.

Edge

<div data-grid="2">
  <article data-tone="soft" data-edge="top"><h3>Guide</h3><p>How to lay out a site and write a template.</p><small>Updated today</small></article>
  <article data-tone="go" data-edge="left"><h3>Reference</h3><p>Every command and flag atlas understands.</p><small>v1.4</small></article>
</div>

The values are top, bottom, left and right; left and right bands are divided off with a dashed rule.

Fade

<section data-hero data-fade="light">
  <h1>A year of <em>atlas</em></h1>
  <p>1,204 pages, forty templates and one command to put them online.</p>
</section>

data-fade takes light or strong; plain data-fade sits between them.

Notes

• The tile comes from --s72-tex and --s72-tex-size, which s72.js fills from data-pattern on <html>.
• A block with data-edge gains padding on that side, so the band never lands on the text.
• data-fade draws behind the content on a negative z-index inside its own stacking context.
• S72.pattern(n) returns { url, size, name, svg } if you want the same tile somewhere else.