dragoon0x Texture & Pattern
Adding Depth with Texture
- Noise/grain: Adds warmth, reduces digital flatness. Use at 2-5% opacity.
- Paper texture: Editorial, artisanal feel. Subtle, never overpowering.
- Geometric patterns: Brand element, backgrounds, section dividers.
- Dot grids: Technical, precise, blueprint feel.
CSS Noise
.textured {
position: relative;
}
.textured::after {
content: '';
position: absolute;
inset: 0;
background-image: url('data:image/svg+xml,...'); /* noise SVG */
opacity: 0.03;
pointer-events: none;
mix-blend-mode: overlay;
}
Pattern Rules
- Patterns should be subtle enough to not interfere with content
- Use one pattern style per brand (not geometric AND organic)
- Patterns work best on large background areas, not small components
- Test pattern readability: put text on it, can you read comfortably?
- Provide a no-pattern fallback for print and accessibility