Textures

Textures add organic, handcrafted warmth to the design system. They work in two distinct contexts: background textures for repeating patterns, and overlay textures for shapes and diagrams.

All textures are optimised for retina displays (stored at 2× resolution, displayed at 50% size) and accessed via a unified configuration in src/data/textures.ts.

Background textures

Seamless or large repeating patterns for full-section backgrounds.

concrete

Concrete wall with grain

Repeatable: Yes
Dimensions: 520×520

Code example

<Section backgroundTexture="concrete">
  Content here
</Section>

paper

Handmade paper grain

Repeatable: Yes
Dimensions: 512×512

Code example

<Section backgroundTexture="paper">
  Content here
</Section>

iron

Rusted iron with limestone tones

Repeatable: Yes
Dimensions: 900×900

Code example

<Section backgroundTexture="iron">
  Content here
</Section>

road

Tarmac road surface

Repeatable: Yes
Dimensions: 466×349

Code example

<Section backgroundTexture="road">
  Content here
</Section>

wall

Painted wall surface

Repeatable: Yes
Dimensions: 597×545

Code example

<Section backgroundTexture="wall">
  Content here
</Section>

concrete2

Alternative concrete texture

Repeatable: Yes
Dimensions: 800×800

Code example

<Section backgroundTexture="concrete2">
  Content here
</Section>

watercolour

Watercolour wash

Repeatable: No
Dimensions: 3000×2000
Display size: 1500px (50% for retina)

Code example

<Section backgroundTexture="watercolour">
  Content here
</Section>

Overlay textures

Images clipped to organic shapes for heroes, diagrams, and decorative elements.

acrylic

Acrylic paint wash with deep tones

Dimensions: 1600×1600
Display size: 800px (50% for retina)

Code example

<PageHero
  texture="acrylic"
  textureOpacity="subtle"
/>

canvas

Woven canvas and linen weave with fine, tactile grain

Dimensions: 1599×1599
Display size: 800px (50% for retina)

Code example

<PageHero
  texture="canvas"
  textureOpacity="subtle"
/>

ice

Fluid marbled swirls

Dimensions: 1600×1600
Display size: 800px (50% for retina)

Code example

<PageHero
  texture="ice"
  textureOpacity="subtle"
/>

ink

Organic ink wash

Dimensions: 2419×1593
Display size: 1200px (50% for retina)

Code example

<PageHero
  texture="ink"
  textureOpacity="subtle"
/>

paint

Fluid paint strokes with swirling silver streaks

Dimensions: 1600×1600
Display size: 800px (50% for retina)

Code example

<PageHero
  texture="paint"
  textureOpacity="subtle"
/>

smoke

Dark smoke with flowing white wisps

Dimensions: 1600×1600
Display size: 800px (50% for retina)

Code example

<PageHero
  texture="smoke"
  textureOpacity="subtle"
/>

splatter

Painted concrete with patina and paint splatter

Dimensions: 1600×1143
Display size: 800px (50% for retina)

Code example

<PageHero
  texture="splatter"
  textureOpacity="subtle"
/>

stone

Light speckled stone surface

Dimensions: 1600×1600
Display size: 800px (50% for retina)

Code example

<PageHero
  texture="stone"
  textureOpacity="subtle"
/>

wall

Rough wall surface

Dimensions: 1600×1600
Display size: 800px (50% for retina)

Code example

<PageHero
  texture="wall"
  textureOpacity="subtle"
/>

wash

Soft watercolour wash

Dimensions: 1600×1600
Display size: 800px (50% for retina)

Code example

<PageHero
  texture="wash"
  textureOpacity="subtle"
/>

Opacity presets

Named opacity values provide consistency and semantic meaning. You can also use numeric values (0-1) for fine control.

subtle

Value: 0.05

light

Value: 0.08

medium

Value: 0.15

strong

Value: 0.3

prominent

Value: 0.65

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

When to use background textures

Full-section backgrounds in Section components
Repeating patterns across large areas
Adding tactile warmth to colour schemes

When to use overlay textures

Hero sections with animated shapes
Diagram circles and Venn diagrams
Device frame decorations
Decorative quote marks

Retina optimisation

All textures follow the watercolour pattern: stored at 2× resolution, displayed at 50% size via background-size (CSS) or natural scaling (SVG). This ensures crisp rendering on high-DPI displays.

TypeScript support

Import types from @types/design-tokens for autocomplete and type safety:

import type { BackgroundTextureName, OverlayTextureName, TextureOpacityPreset } from '@types/design-tokens';