Texture & Depth

The grain

Every CRAFTSMAN+ surface carries a fixed film-grain overlay. It is the difference between a black rectangle and an atmosphere. The grain is generated, not a bitmap:

.grain::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  mix-blend-mode: overlay;
  opacity: 0.035;
  background-size: 200px 200px;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' \
    xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence \
    type='fractalNoise' baseFrequency='0.9' numOctaves='2' \
    stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 \
    0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' \
    filter='url(%23n)'/></svg>");
}

The parameters are part of the brand: fractalNoise, baseFrequency 0.9, two octaves, 200px tile, overlay blend. Opacity lives at 3.5% and never rises above 5%. If the grain is noticeable, it is wrong; it should only be missed when absent.

You are reading this page through the grain right now. Feel the range on the dial above; the slider will tell you when you have left the system.

Grain outside the browser

For Photoshop, Illustrator, and video work, download the grain as a tileable PNG and apply it the same way the site does: set the layer blend mode to Overlay at 3.5% opacity, never above 5%.

Gradient grounds

Large surfaces sit on the CRAFTSMAN+ MINIMAL GRADIENT (NEBULA), the near-black wash defined on the color page. It reads as texture rather than color: a faint warmth at the corners of an otherwise black field. CRAFTSMAN+ GRADIENT DARK and INTELLIGENCE DARK serve the same role on product surfaces.

Two rules keep the grounds honest:

1. They are backgrounds, not accents. Do not lighten them to make them visible.
2. One ground per viewport. Stacking gradient sections creates banding and noise.

Glow

Radial glows are permitted behind hero content: a single off-screen radial of CRAFTSMAN ORANGE at low opacity with a heavy blur, as on the home page of this site. One glow per page, always anchored to a focal element, never free-floating decoration.

Depth

Depth comes from three quiet layers, not from heavy shadows: surface color, a hairline border, and the lift shadow on hover. The tokens live on the Space & Grid page; build the recipe here by toggling the layers and watching the surface separate from the ground. In Photoshop terms: a fill at the raised surface value, a 1px inner stroke at 6 to 12% white, and a soft deep drop shadow reserved for interactive states.

What atmospheric is not

Atmosphere comes from depth and restraint, not from effects. No glassmorphism panels floating on photos, no aurora backgrounds, no particle fields, no parallax scenery. A black ground, a faint gradient, the grain, and one glow is the complete recipe.