texture-and-paper-feel

name	texture-and-paper-feel
description	Use when adding tactile feel to digital surfaces. Subtle paper texture, scan grain, or laid-paper pattern adds depth.

Texture and Paper Feel

Subtle textures (5-10% opacity overlay) make digital feel printed. Don't go heavy — too much texture = template-CSS.

Texture options

1. Paper grain SVG overlay (3-8% opacity)
2. Scan dust noise (added via canvas or SVG filter)
3. Laid paper lines (vertical, 5% opacity)
4. Linen texture (woven pattern, 4-6% opacity)
5. Halftone overlay (subtle dot pattern)

Implementation

.editorial-bg {
  background-color: var(--cream);
  background-image: url('/textures/paper-grain.svg');
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity-overlay: 0.05;
}

Alternative: SVG filter for procedural texture (more flexible).

When to use texture

1. Hero background (subtle)
2. Editorial article body
3. Image overlays (mixed-media feel)
4. Section dividers (paper-tear edge)
5. Card / slab components (paper-stock texture)

Never:

• On every element (overdone)
• High opacity (>15%)
• Mixed textures (linen + halftone)
• Mobile if performance impact

Where this fits in the X3 empire

Used on CardPrepAI editorial and methodology pages.