> **PromptEye Brand Book & Design Language** · Tła · PL (wersja źródłowa) · stan 28.10.2026
> Strona dla ludzi: https://brand.prompteye.com/pl/tla/ · English: https://brand.prompteye.com/en/backgrounds.md · indeks dla agentów: https://brand.prompteye.com/llms.txt
> Ścieżki plików są względne wobec https://brand.prompteye.com/ds/ (np. `tokens/colors.css` → https://brand.prompteye.com/ds/tokens/colors.css), odwołania do `*.md` wobec https://brand.prompteye.com/ds/docs/. Poza Claude Design zamiast `_ds_bundle.js` wczytaj `styles.css` i skrypty `js/pe-light.js`, `js/pe-pl.js`, `js/pe-raster.js`, `js/pe-motyw.js` (w tej kolejności).

# Tła: gradienty, ziarno, siatka kropek

Renderer: `js/pe-light.js`. Tło to `<canvas class="lt" data-m="…">` jako pierwsze dziecko kontenera z `position: relative` (canvas wypełnia go cały). Renderuje się samo po załadowaniu strony. Dla treści dodanej później: `PE_LIGHT.render(canvas)`.

W sekcjach z motywem (`data-pe-hero`, `data-pe-cta`) tła nie dodajesz: motyw rysuje własne (`motyw.md`). Ten plik dotyczy tła **bez motywu**.

## Gradienty (zawsze z ziarnem N1)

| Kod | Opis | Kiedy | Atrybuty |
|---|---|---|---|
| G5 | łuk, czerń → kobalt → biel od dołu | rdzeń: okładki, hero, social | `data-m="lin" data-cu=".16" data-v0=".2" data-v1=".95" data-gm=".75" data-g=".1" data-nz="fade"` |
| G2 | biel → czerń | rdzeń, najmocniejszy | `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 | czerń → biel (G2 odwrócony) | przejście z ciemnej sekcji w jasną | `data-m="lin" data-v0=".12" data-v1=".9" data-gm=".75" data-g=".1" data-nz="fade"` |
| G3 | czerń → kobalt | sekcja kończy się kolorem; okładka ciemnego artykułu | `data-m="lin" data-t1=".62" data-v0=".05" data-v1="1" data-gm=".8" data-g=".1" data-nz="fade"` |
| G4 | biel → kobalt | jw., na jasnym | `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"` |

- **Łuk i prosty są równorzędne.** Łuk: `data-cu` (dodatni – łuk od dołu, ujemny – od góry). Prosty: bez `data-cu`.
- `data-v0` / `data-v1`: początek i koniec przejścia jako ułamek wysokości. `data-t0` / `data-t1`: jasność na początku i końcu (0 czerń, 1 biel).
- **Ziarno N1** (`data-nz="fade"`, `data-g`): tylko w kolorze, znika na obu końcach. Czerń i biel gradientu to dokładnie #000000 i #FFFFFF, więc sekcje łączą się bez szwu. Gradient CSS bez ziarna jest zakazany.
- Jedno światło na kadr. Tekst ciągły nigdy nie stoi na kolorze.

## Jak dobrać i ustawić gradient

| Co budujesz | Tło | Uwagi |
|---|---|---|
| Hero, okładka, nagłówek strony lub rozdziału **bez motywu** | G5 łukiem, rozciągnięty jak światło hero D: `data-m="lin" data-cu=".16" data-v0=".38" data-v1="1.12" data-gm=".75" data-g=".1" data-nz="fade"` | Czerń → granat → kobalt → prawie biel w środku przy dolnej krawędzi, po bokach jasny kobalt: dolna krawędź jest widoczna jako granica arkusza. Gdy biała sekcja ma się łączyć bez szwu na całej szerokości, użyj G5 z tabeli wyżej (`data-v1=".95"`). |
| Sekcja z motywem (`data-pe-hero`, `data-pe-cta`) | żadne | Motyw rysuje własne światło (`motyw.md`). |
| Przejście z ciemnej sekcji w jasną | G1 | |
| Sekcja kończy się kolorem, a następna zaczyna się od koloru | G3 (na czerni), G4 (na bieli) | Nie jako ozdobny pasek pod nagłówkiem. |
| Slajd treści, post z cytatem lub liczbą, OG wpisu | jednolite tło + siatka kropek | Bez gradientu. |

- **Przejście jest długie i płynne.** Od `data-v0` do `data-v1` światło zajmuje co najmniej połowę wysokości kadru. Nigdy nie ściskaj gradientu w pasek pod tekstem: wąski pas czerń → kobalt wygląda jak naklejka, nie jak światło.
- **Miejsce na tekst robisz kadrem, nie gradientem.** Gdy tekst nie mieści się na czerni, powiększ kadr pod tekstem i przesuń `data-v0` w dół. Nie skracaj przejścia (`data-v1` przy G5 zostaje 1,12).
- **Tekst stoi na czerni albo ciemnym granacie.** Pod ostatnią linią tekstu i pod przyciskami jasność gradientu wynosi najwyżej ok. 0,36. Przy G5 rozciągniętym daje to `data-v0 ≈ (y − 0,37) / 0,67`, gdzie `y` to dolna krawędź tekstu jako ułamek wysokości kadru (najmniej 0,2).
- **Ten sam gradient w jasnym i ciemnym motywie strony.** Gradient należy do treści, nie do motywu kolorystycznego witryny. Na ciemnej stronie dolna krawędź G5 jest granicą arkusza.

## Siatka kropek (jednolite tło + kropki)

Klocek na materiały bez motywu: slajdy treści, posty z cytatem lub liczbą, OG wpisów, awers wizytówki. **Tylko na jednolitym tle** (czerń albo biel), nigdy na gradiencie ani pod motywem.

| Wariant | Atrybuty (wzorzec, s = 1) |
|---|---|
| Na czerni, neutralne (biel 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"` |
| Na bieli, neutralne (czerń 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"` |
| Na czerni, kobaltowe (ton #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`: rozstaw w px, `data-dsz`: bok kropki w px. Kropka siatki jest **kwadratem** (tak zaprojektowana).
- Inne formaty: rozstaw 20 × s (zaokrąglony do 2 px), kropka 1,5 × s (zaokrąglona do 0,5 px, najmniej 1,5). Przykłady: slajd 1920 → 26 / 2; post 1080 → 22 / 1,5; OG → 16 / 1,5.
- Jeden typ kropek na kadr. Nigdy pod leadem, przyciskami, tabelami i wykresami (maska `data-dm="x0,y0,x1,y1"` w ułamkach kadru wycina obszar).
- Siatka nie ma punktu motywu, więc kropka po tytule jest dozwolona.

```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>
  …treść z position:absolute…
</div>
```

## Odrzucone (nie stosuj)

Kobaltowe kropki na bieli, kropki malejące, rozpad, raster budujący gradient (G1b, G1c), pełny kobalt (G6), hero z krawędzi na całym kadrze (H1–H3), szum N0 i N3, gradient CSS bez ziarna. Hero z `tla.html` (siatka na gradiencie, tekst na środku) jest sprzed motywu.