# Texture & Depth

> The grain overlay, near-black gradient grounds, and the restraint that makes CRAFTSMAN+ surfaces feel atmospheric instead of flat.

Canonical: https://brand.craftsmanplus.com/foundations/texture

> Interactive GrainDial component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## 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:

```css
.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%.

| File | Size | Use |
| --- | --- | --- |
| [CRAFTSMAN-PLUS-grain-512.png](/downloads/CRAFTSMAN-PLUS-grain-512.png) | 512 x 512 | Tiles with no visible repeat; scale to roughly 200px per tile for the site's density. |
| [CRAFTSMAN-PLUS-grain-2048.png](/downloads/CRAFTSMAN-PLUS-grain-2048.png) | 2048 x 2048 | Single-placement coverage for decks, statics, and video frames. |

## Gradient grounds

Large surfaces sit on the CRAFTSMAN+ MINIMAL GRADIENT (NEBULA), the near-black wash defined on the [color page](/foundations/color). 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](/foundations/space); 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.

> Interactive DepthBuilder component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## 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.

> Interactive AtmosphereGrid component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.