` (flex 1, centres the `

`), `.ctl`. - `
`: three `
` lines + `
`. - `.ctl`: `Grain`, ``, `45`. Poem lines, exact: 1. The grain remembers 2. every press of the plate. 3. Two inks, one afternoon. Attribution: `— from the bindery notes, 2026` ## Tokens ```css :root { --paper: #f3ebd8; /* page */ --ink: #2b1f18; /* poem */ --ink-2: #5e4e42; /* attribution */ --ink-3: #8a7666; /* plate caption, label */ --sienna: #6b2e1f; /* left blot */ --prussian: #1a3352; /* right blot */ --line: rgba(43, 31, 24, .16); --serif: "Literata", Georgia, serif; --sans: "Public Sans", system-ui, sans-serif; --grain: .45; /* overlay opacity, 0–1 */ --t-micro: 160ms; --ease: cubic-bezier(.2, .7, .2, 1); } ``` ## Typography | Role | Family | Size | Weight | Line-height | Tracking | Case | |--------------|-------------|-----:|-------:|------------:|---------:|-----------| | Poem line | Literata | 42px | italic 400 | 1.25 | −0.02em | sentence | | Attribution | Public Sans | 12px | 500 | 1 | +0.14em | UPPERCASE | | Plate label | Public Sans | 11px | 500 | 1 | +0.16em | UPPERCASE | | Slider label | Public Sans | 11px | 500 | 1 | +0.12em | UPPERCASE | | Slider value | Public Sans | 12px | 500 | 1 | 0 | tabular | Poem `max-width: 22ch`, `text-align: center`, `font-optical-sizing: auto`. Line margin-bottom 0.35em. ## Motion There is no looping motion. The slider is the only changing property: | Element | Trigger | Property | From → To | |----------------|---------|---------------------------|------------------------------------| | Grain SVG | input | opacity `--grain` | 0 → 1 (slider 0–100) | | `#grainF` turb.| input | baseFrequency | 0.45 → 1.15 | Do not animate the blots. Reduced motion: no change required. ## States - **Slider thumb:** 14px circle, paper fill, 2px ink stroke. Track is 2px ink, no radius. - **Slider focus-visible:** 2px Prussian outline, 3px offset, on the input. - **Grain at 0:** blots and poem remain; the paper reads as smooth stock. - **Grain at 100:** heavy multiply noise, frequency 1.15. Poem must stay readable (ink on paper still exceeds 8:1; grain is overlay, not type). ## Accessibility - Label is a real ``. `aria-valuemin/max/now` on the range. Visible numeric value in `#gv` (not `sr-only`). - Background blots and grain are `aria-hidden`. The poem is a `
` with a `
` for the attribution. - Contrast: poem ink `#2b1f18` on `#f3ebd8` is about 11:1. Do not lighten the poem to sit "on" the blot; the multiply blots sit behind the type and the type is a solid ink colour. - Keyboard: Tab to the slider, arrow keys change the value (native). ## Responsive rules - ≥ 1280: blots 540/480 as specified, poem 42px. - 1024–1279: scale blots with `width: 42vw` and `max-width: 540px`. Poem 36px. - 768–1023: poem 32px, 28ch measure. Slider full width minus 48px padding. Blots 50vw and may overlap the poem more — that is acceptable. - < 640: poem 26px/1.3. Stack the plate labels without the hairline. Slider still full width. Keep both blots; do not hide them. ## Acceptance checklist - [ ] Two multiply blots: sienna left (`#6b2e1f`), Prussian right (`#1a3352`), displaced by SVG turbulence, not plain ellipses. - [ ] Full-viewport grain overlay, multiply, opacity tied to `--grain`. - [ ] Slider default 45; at 0 the grain disappears; at 100 opacity is 1 and baseFrequency is 1.15. - [ ] Poem is exactly the three lines above, 42px italic Literata, centred, 22ch. - [ ] No nav, no button, no looping animation. - [ ] Plate caption "Plate 07" / "Two inks on laid stock" in 11px uppercase Public Sans. - [ ] Focus ring on the slider is 2px `#1a3352`. - [ ] Only Literata and Public Sans load. - [ ] Palette is ivory / sienna / Prussian, not purple-blue blobs and not the site's Fraunces paper. ## Implementation notes **Displacement for the blot edge** — a CSS `border-radius` blob is too smooth; chew it: ```xml ``` Give the filter extra region (`x="-20%"`) or the displacement clips. **Grain as a filtered rect**, not a canvas loop: ```xml ``` **Slider writes two things**, opacity and frequency: ```js inp.addEventListener('input', () => { const v = +inp.value; root.style.setProperty('--grain', String(v / 100)); gv.textContent = v; turb.setAttribute('baseFrequency', (0.45 + v / 100 * 0.7).toFixed(3)); }); ``` Keep `feColorMatrix saturate 0` so the grain stays ink-neutral and does not tint the Prussian blot green. Do not regenerate the filter node on every input — only mutate `baseFrequency` and `--grain`. Common mistakes: `mix-blend-mode: overlay` (washes the type). Animating blot position (the plate should sit still). Using canvas `getImageData` at 1280×800 on every input (too heavy; SVG turbulence is the grain). --- *From Design Lounge (https://www.designlounge.live). Live demo and source: /p/background-paper-grain. Free to use in your products. Credit line: Designed using Design Lounge.*