Textures
Textures add organic, handcrafted warmth to the design system as luminance masks: the file says where a grain colour shows, the fill underneath is never touched, and one file works on any colour scheme and in either theme.
All fourteen textures are single-channel JPEGs in public/textures/, configured in
src/data/textures.ts. A worked comparison of any shape or section – fill, texture,
grain colour, strength – lives in the Texture Lab.
Fine grain
Broad texture
Soft wash
Opacity presets
Named opacity values provide consistency and semantic meaning – each is multiplied by the
texture's own gain so a preset reads as roughly the same amount of grain on
every texture. You can also use numeric values (0-1) for fine control.
Code example
// Using preset names
<PageHero texture="ink" textureOpacity="subtle" />
<DiagramCircle texture="wall" textureOpacity="medium" />
// Using numeric values for fine control
<PageHero texture="ink" textureOpacity={0.12} />Usage guidelines
Where textures are used
- Hero sections with animated shapes (
PageHero) - Full-section backgrounds (
Section,ProductFeature) - Diagram circles, flow nodes and Venn diagrams
- Device frame decorations, and decorative quote marks
How it works
Each texture is a greyscale JPEG read as a luminance mask: white shows the grain colour,
black shows the fill underneath. In SVG contexts the shape is drawn twice – once in the
fill colour, once in the grain colour masked by the texture. In CSS section backgrounds,
a ::before layer in the grain colour is masked the same way with
mask-image.
TypeScript support
Import types from @data/textures for autocomplete and type safety:
import type { TextureName, TextureOpacityPreset } from '@data/textures';