Warm Paper Texture Background
Editorial paper background: warm off-white base, fine SVG noise, faint ruled top edge — for clinics, journals, quiet brands.
Full Construction Prompt
ROLE
AI Role
Senior front-end engineer + designer. Build a warm paper-texture page background that makes a site feel printed, not rendered.
STACK
Target Stack
React + TypeScript + Tailwind CSS. Texture is an inline SVG feTurbulence data-URI overlay at 3–4% opacity — no image assets.
LAYOUT
Layout
Base --paper fills the viewport. Noise overlay fixed, pointer-events none. Optional: a 1px ruled line under the header in --rule at 50%. Content keeps ≥4.5:1 contrast on the textured base (verify body text against the noisiest patch).
COLOR TOKENS
Color Tokens
--paper: 40 33% 97%; --ink: 160 25% 12%; --rule: 40 20% 80%.
ANIMATION
Animation
None — paper does not move. (Any motion belongs to content.)
RESPONSIVE
Responsive
Identical at all sizes; noise tile 160px repeats seamlessly.
SAMPLE COPY
Sample Copy
Usage: clinic sites, editorial blogs, certificates, long-form case articles.