> **PromptEye Brand Book & Design Language** · Backgrounds · EN (translation of the Polish source; the Polish file wins on conflict) · state 28.10.2026
> For people: https://brand.prompteye.com/en/backgrounds/ · Polish source: https://brand.prompteye.com/pl/tla.md · index for agents: https://brand.prompteye.com/llms.txt
> File paths are relative to https://brand.prompteye.com/ds/ (e.g. `tokens/colors.css` → https://brand.prompteye.com/ds/tokens/colors.css); `*.md` references resolve to https://brand.prompteye.com/ds/docs/en/ (translations) or https://brand.prompteye.com/ds/docs/ (Polish source). Outside Claude Design load `styles.css` and the scripts `js/pe-light.js`, `js/pe-pl.js`, `js/pe-raster.js`, `js/pe-motyw.js` (in this order) instead of `_ds_bundle.js`.

# Backgrounds: gradients, grain, dot grid

Renderer: `js/pe-light.js`. A background is a `<canvas class="lt" data-m="…">` as the first child of a container with `position: relative` (the canvas fills it entirely). It renders by itself when the page loads. For content added later: `PE_LIGHT.render(canvas)`.

In sections with the motif (`data-pe-hero`, `data-pe-cta`) you do not add a background: the motif draws its own (`motyw.md`). This file is about backgrounds **without the motif**.

## Gradients (always with N1 grain)

| Code | Description | When | Attributes |
|---|---|---|---|
| G5 | arc, black → cobalt → white from the bottom | core: covers, heroes, social | `data-m="lin" data-cu=".16" data-v0=".2" data-v1=".95" data-gm=".75" data-g=".1" data-nz="fade"` |
| G2 | white → black | core, the strongest | `data-m="lin" data-t0="1" data-t1="0" data-v0=".1" data-v1=".88" data-gm=".75" data-g=".1" data-nz="fade"` |
| G1 | black → white (G2 reversed) | transition from a dark section to a light one | `data-m="lin" data-v0=".12" data-v1=".9" data-gm=".75" data-g=".1" data-nz="fade"` |
| G3 | black → cobalt | the section ends in colour; cover of a dark article | `data-m="lin" data-t1=".62" data-v0=".05" data-v1="1" data-gm=".8" data-g=".1" data-nz="fade"` |
| G4 | white → cobalt | as above, on light | `data-m="lin" data-pal="day" data-t1=".55" data-v0=".3" data-v1="1.02" data-gm=".9" data-g=".08" data-nz="fade"` |

- **Arc and straight are equal.** Arc: `data-cu` (positive: arc from the bottom, negative: from the top). Straight: without `data-cu`.
- `data-v0` / `data-v1`: start and end of the transition as a fraction of the height. `data-t0` / `data-t1`: brightness at the start and end (0 black, 1 white).
- **N1 grain** (`data-nz="fade"`, `data-g`): only in the colour, fading out at both ends. The black and white of a gradient are exactly #000000 and #FFFFFF, so sections join seamlessly. A CSS gradient without grain is forbidden.
- One light per frame. Body text never stands on colour.

## How to choose and set a gradient

| What you build | Background | Notes |
|---|---|---|
| Hero, cover, page or chapter header **without the motif** | G5 as an arc, stretched like the hero D light: `data-m="lin" data-cu=".16" data-v0=".38" data-v1="1.12" data-gm=".75" data-g=".1" data-nz="fade"` | Black → navy → cobalt → almost white in the middle of the bottom edge, light cobalt at the sides: the bottom edge is visible as the edge of the sheet. When a white section must join seamlessly across the full width, use G5 from the table above (`data-v1=".95"`). |
| Section with the motif (`data-pe-hero`, `data-pe-cta`) | none | The motif draws its own light (`motyw.md`). |
| Transition from a dark section to a light one | G1 | |
| The section ends in colour and the next one starts with colour | G3 (on black), G4 (on white) | Not as a decorative strip under a header. |
| Content slide, quote or number post, article OG | solid background + dot grid | No gradient. |

- **The transition is long and smooth.** From `data-v0` to `data-v1` the light covers at least half of the frame height. Never squeeze a gradient into a strip under the text: a narrow black → cobalt strip looks like a sticker, not light.
- **Make room for text with the frame, not the gradient.** If the text does not fit on black, enlarge the frame below the text and move `data-v0` down. Never shorten the transition (`data-v1` stays 1.12 for G5).
- **Text stands on black or dark navy.** Below the last line of text and below the buttons the gradient brightness is at most about 0.36. With stretched G5 this gives `data-v0 ≈ (y − 0.37) / 0.67`, where `y` is the bottom edge of the text as a fraction of the frame height (at least 0.2).
- **The same gradient in the light and dark site theme.** The gradient belongs to the content, not to the site's colour theme. On a dark page the bottom edge of G5 is the edge of the sheet.

## Dot grid (solid background + dots)

The block for material without the motif: content slides, quote or number posts, article OG images, the front of a business card. **Only on a solid background** (black or white), never on a gradient or under the motif.

| Variant | Attributes (reference, s = 1) |
|---|---|
| On black, neutral (white 15%) | `data-m="flat" data-t="0" data-nz="fade" data-dp="20" data-dh="d" data-dk="cover" data-da=".15" data-dsz="1.5"` |
| On white, neutral (black 9%) | `data-m="flat" data-t="0" data-pal="day" data-nz="fade" data-dp="20" data-dh="l" data-dk="cover" data-da=".09" data-dsz="1.5"` |
| On black, cobalt (tone #111B6A) | `data-m="flat" data-t="0" data-nz="fade" data-dp="20" data-dh="d" data-dk="tone" data-dsz="1.5"` |

- `data-dp`: pitch in px, `data-dsz`: dot side in px. A grid dot is a **square** (by design).
- Other formats: pitch 20 × s (rounded to 2 px), dot 1.5 × s (rounded to 0.5 px, at least 1.5). Examples: slide 1920 → 26 / 2; post 1080 → 22 / 1.5; OG → 16 / 1.5.
- One type of dots per frame. Never under the lead, buttons, tables or charts (the mask `data-dm="x0,y0,x1,y1"` in fractions of the frame cuts an area out).
- The grid has no motif point, so the dot after a headline is allowed.

```html
<div class="t2f dk" style="width:1920px;height:1080px">
  <canvas class="lt" data-m="flat" data-t="0" data-nz="fade" data-dp="26" data-dh="d" data-dk="cover" data-da=".15" data-dsz="2"></canvas>
  …content with position:absolute…
</div>
```

## Rejected (do not use)

Cobalt dots on white, shrinking dots, disintegration, a raster that builds a gradient (G1b, G1c), full cobalt (G6), an edge hero across the whole frame (H1–H3), noise N0 and N3, a CSS gradient without grain. The hero from `tla.html` (grid on a gradient, text in the middle) predates the motif.