Design system · 07

The page is a sheet of stock.

Four things make the background paper rather than a colour: the grain of the stock, the ruling on it, a wash of ink behind the hero, and a perforation where rows tear apart.

Grain

A seamless 384px tile of card stock, repeated across the whole document and multiplied over it. The fibres darken very slightly; nothing lightens, and the cream does not change tone. It follows the page as you scroll, the way paper does, rather than sitting fixed like screen noise.

--paper-opacity 1.00

Bare colour Overdone

The dial turns the grain on this whole page. It ships at 1.

Right: the tile with its contrast exaggerated, to show what is in it — fine tooth and short fibres, and nothing larger.

Ruling

A 32px manuscript grid behind each hero: paper that has been prepared to be written on. It is always masked away well before the content, so it reads as ruling rather than as wallpaper.

Ruling · 32px · ink at 6%

Shown here stronger than it ships. In a hero the layer runs at 45%: the lines already draw at 6% ink, and any heavier they compete with the body copy sitting on them.

Wash

A pale watercolour bloom behind the hero — the ink on the ruled sheet. It is decoration, behind the content, and it fades out inside its own section so it never leaks into the one below.

Perforation

A punched-hole rule, for the line between accordion rows — the place a page would tear. Every other divider on the site is a plain hairline.

Perforation · between rows that open

Hairline · everything else

Layer order

The grain sits above the content, because on a real sheet the fibre is in front of the ink, and below the navigation, because the floating bar is an object held over the paper rather than something printed on it.

Implementation

Stacking order
Layer	z-index	What it is
	−10	Behind a hero's content
	auto	Ink on the sheet
	20	PaperGrain, over the whole document
	30	Content dissolving under the top edge
	40	The frosted bar, held over the paper
	50	Anything raised from the page

<section class="relative isolate">
  <HeroGrid />   <!-- the ruled sheet -->
  <HeroWash />   <!-- the ink bloom on it -->
  <div class="relative z-10">…</div>
</section>

<hr class="rule-perf" />   <!-- between accordion rows only -->

Rules

Keep the grain as one layer over the whole document.
Mask the ruling away before it reaches the text.
Give every hero both layers: the ruled sheet and the wash on it.
Use the perforation only between rows that open and close.

Don’t

Fix the grain to the viewport; paper scrolls with what is on it.
Add texture to panels and cards. Texture is for the sheet and the books.
Dim the wash with opacity. Regrade the image instead.
Use perforated rules as general dividers.