Requirement
Texture for INTO Consulting must break digital flatness without becoming a visual effect. It covers static background grain, animated canvas grain, and baked-in image grain across hero, cover, section-break, and atmospheric surfaces.
Constraints
- Grain never sits on body text, UI controls, or data visualization marks.
- Static grain is the default for colored background surfaces.
- Animated grain is reserved for atmospheric surfaces with a documented performance reason.
- Photography grain is applied at image generation or edit time, not as a runtime filter on evidence images.
- Runtime grain respects
prefers-reduced-motion.
Bet
A small texture system gives Warm Light and Blueprint Dark more material presence while keeping performance predictable. The cost is another QA check: every use of grain needs to prove it does not reduce legibility.
Failure Modes
- Grain overlays body copy and reduces readability.
- Runtime animation is used on ordinary work surfaces.
- Texture appears inside UI controls or chart marks.
- Photo grain makes evidence screenshots look corrupted.
- Agents use texture to compensate for weak layout.
Philosophy
Texture is paper-and-light, not effect. The brand should feel material — like a publication that was made by people who cared — without ever drawing attention to the texture itself. If a viewer notices the grain, the grain is wrong. The right grain breaks digital flatness in a way the eye registers as “this is a real surface” before the conscious mind can name the cause.
Three textures, three jobs: static grain gives broad colored backgrounds material weight; baked-in photo grain gives atmospheric macro photography its film-stock feel; animated canvas grain gives hero and cover surfaces a living surface so they don’t read as flat digital fields. None of the three ever competes with evidence, controls, or body copy.
Static Colored-Background Grain
Static SVG/CSS noise is default-on for large colored backgrounds:
- Warm Light
#fbfaf7: effective opacity2%. - Blueprint Dark
#0f1518: effective opacity3%. - Blend mode:
overlay. - Use on page backgrounds, title surfaces, section breaks, and atmospheric colored blocks.
- Do not apply inside cards, controls, tables, charts, diagrams, or body text containers.
Animated Canvas Grain
Animated canvas grain is reserved for atmospheric surfaces:
- Hero surfaces.
- Full-page covers.
- Video title cards.
- Dramatic conclusions.
- Governed macro-photo overlays.
Use approximately 5.5% opacity with mix-blend-mode: overlay. Refresh cadence
should be slow enough to avoid shimmer and fast enough to avoid obvious tiling;
120ms is the default upper bound. Disable animation for reduced-motion users
and fall back to the static grain token.
Baked-In Photo Grain
Hero and atmospheric macro photography should carry baked-in film grain at
Lightroom-equivalent 28-34. This is applied to the source image or generation
prompt before runtime. Evidence images, screenshots, product UI captures, charts,
and tables do not receive baked-in grain.
Editorial Containment Boundary
Grain breaks at the editorial containment boundary:
- Full-width exhibits may carry texture when they are atmospheric or title-like.
- Peer cards do not carry grain.
- UI controls never carry grain.
- Chart marks and labels never carry grain.
- Body text containers stay clean.
Hard Rules
- No grain on body text containers.
- No grain on UI controls (buttons, inputs, toggles, sliders).
- No grain on data visualization marks, axes, gridlines, or labels.
- No grain on evidence screenshots, product UI captures, or chart canvases.
- No animated canvas grain on routine app or document surfaces.
- No runtime grain when
prefers-reduced-motion: reduceis set — fall back to static grain only. - No grain layered inside the glass surface — grain may appear behind glass, never on the translucent layer itself (the inset highlight must read clean).
- No grain on the wordmark, square mark, four-point star, or thick circle.
Agent Rule
Use static grain for broad colored surfaces, baked-in grain for atmospheric macro photography, and animated grain only for governed hero, cover, video, or dramatic conclusion surfaces. If the surface is evidence, controls, data, or body copy, omit grain.
See Also
tokens/into-consulting.theme.css—--into-texture-*token family, including the canonical--into-texture-noise-svgdata URI.brand/photography-system.md— baked-in photo grain is owned here at the source-image generation step; this file owns the cross-surface contract.brand/motion-system.md— animated canvas grain is the one governed atmospheric loop; reduced motion turns it off.brand/depth-and-glass-system.md— grain layers behind glass, never on it.contexts/design-foundations-system.html#grain-and-texture— visible review specimen.contexts/brand-book.html#motion-depth-texture— governance summary.