Texture Lab
Compare any shape or section against any fill, texture, grain colour and strength, then copy the real component props once you're happy. Everything here – palette, shapes, textures – is read from the same source the site itself uses, so what you see here is what a page will show.
Fill
Texture
Strength
Building on experience
Our growing suite of apps and agentic solutions are rooted in our experience and frameworks – giving insights, useful evidence and foundations you can build a successful content function on.
Component
Markup
How it works
The texture file is a greyscale JPEG. The browser reads its brightness as a stencil: white lets the grain colour through, black hides it, greys are partial. The fill underneath is never altered, so a Fire 500 shape stays Fire 500 and the grain sits on top in whatever palette shade you choose – usually the same family, a shade or two darker, like ink on coloured paper.
Strength
Strength is the opacity of the grain layer, nothing else: it sets how much grain shows
without shifting the fill's tone or saturation. The five presets are starting points for
textureOpacity; the slider is for finding better ones.
Files
One file per texture, used for shapes and sections alike. Every mask is seamless: slow lighting drift is flattened and the edges cross-faded, so it repeats without a join on sections and reads as a flat surface texture rather than shading on shapes.
See Textures for the full registry, or
docs/plans/texture-masks.md in the repo for the design behind this page.