INTO Consulting INTO Consulting
Start typing to search.

Brand system

Texture System

Texture for INTO Consulting must break digital flatness without becoming a

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 opacity 2%.
  • Blueprint Dark #0f1518: effective opacity 3%.
  • 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: reduce is 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-svg data 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.