> **PromptEye Brand Book & Design Language** · Motyw · PL (wersja źródłowa) · stan 28.10.2026
> Strona dla ludzi: https://brand.prompteye.com/pl/motyw/ · English: https://brand.prompteye.com/en/motif.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).

# Motyw MVP

**AI poleca Twoją markę w pytaniach, które przynoszą klientów.** Pole kropek to rynek pytań. Obiekt wyłaniający się światłem (mapa Polski) to pytania, które przynoszą klientów. Pomarańczowy punkt to marka polecona przez AI.

Wzór: `guidelines/motyw.html` (kompozycje 1440), `guidelines/uklad.html` (formaty). Ustawienia: `js/pe-motyw.js` (jedyne miejsce zmian).

**Motyw rysuje skrypt.** Nie rysujesz kropek, rastra, mapy ani punktu w SVG, CSS ani na własnym canvasie. Dodajesz atrybut, skrypt robi resztę.

## Atrybuty

| Atrybut | Na czym | Co robi |
|---|---|---|
| `data-pe-hero="d"` | sekcja ciemna (`.dk`) | łuk od dołu, raster. Domyślne dla artykułu, raportu, slajdu |
| `data-pe-hero="f"` | sekcja jasna (`.ahl.cx-l`) | gradient prosty biel → czerń od dołu, raster szary |
| `data-pe-hero="g"` | sekcja ciemna (`.dk`) | łuk od góry, tekst na dole. Okładki i social |
| `data-pe-hero="e"` | sekcja ciemna (`.dk`) | obrys z kropek. Strony kategorii, mniejsze sekcje |
| `data-pe-cta="raster|obrys"` | sekcja `.t2end` | ciemne CTA, przycięty fragment obiektu z punktem |
| `data-pe-komentarze="raster|obrys"` + `data-kolor="szary|niebieski"` | sekcja `.kx` (biel) | mały szary element przy prawej krawędzi |
| `data-pe-rycina` | `div.fgm-b` w figurze | rycina liniowa do danych: kontur, łuki, jeden punkt |
| `data-pe-obiekt="ksiazka"` | sekcja z `data-pe-hero="d"` | **prototyp:** zamiast mapy Polski otwarta książka (nagłówek strony startowej brand booka). Nie używaj w materiałach bez pytania |
| `data-pe-tekst` | element w sekcji | kolumna tekstu, którą motyw omija. Wartość opcjonalna: `lewo|gora|dol` |
| `data-pe-gradient="luk|prosty"` | sekcja | łuk albo prosty (równorzędne). Domyślnie łuk w D, G, E, CTA; prosty w F |
| `data-pe-rama="pudelko|brak"` | sekcja F | rama jasnego F (`uklad.md`) |
| `data-pe-static` | sekcja | bez animacji: PDF, druk, eksport, zrzut |
| `data-pe-typo` | dowolny kontener | korekta P1 (`typografia.md`) |

Skrypt zapisuje rozpoznany układ w `data-pe-uklad` (`lewo|gora|dol`), znacznik `data-pe-ok` (sekcja narysowana) i `data-pe-czytelnosc` (o ile przesunął gradient pod tekst; brak = bez przesunięcia).

## Geometria (liczona od kadru)

- Wzorce: hero 1440 × 860, CTA 1440 × 560. Skala obiektu s = √(W·H) / √(wzorzec). Gdy tekst stoi obok obiektu, min(s, H / wysokość wzorca).
- Obiekt zawsze przy prawej krawędzi, częściowo poza kadrem.
- Gradient wychodzi od krawędzi naprzeciw tekstu: D, F, E, CTA od dołu; G od góry.
- Maska: obiekt wygasa w stronę kolumny tekstu i zostawia oddech.
- **Kolumna tekstu:** domyślnie `.ah-in` w hero i `h2` w CTA. W każdym innym układzie oznacz ją `data-pe-tekst`. Układ rozpoznaje się sam: tekst po lewej (`lewo`), nad obiektem (`gora`), pod obiektem (`dol`). Wymuszenie: `data-pe-tekst="gora"`.
- Motyw działa w dowolnym kontenerze z `data-pe-hero` lub `data-pe-cta` i wymiarami formatu.
- **Czytelność (automatycznie):** tekst nigdy nie stoi na kolorze. Skrypt sprawdza kontrast każdego tekstu w kolumnie z gradientem pod nim (≥ 4,5 : 1, od 24 px ≥ 3 : 1; przyciski z własnym tłem pomija) i w razie potrzeby przesuwa początek gradientu pod tekst. Gradient ma wtedy najmniej 0,3 wysokości kadru.
- **Długość tekstu w hero:** tytuł do 3 linii, lead do 3 linii (ok. 150 znaków), meta w jednej linii. Kolumna kończy się wtedy do ok. 70 % wysokości kadru (w 1440 × 860 do ok. 600 px), a skrypt przesuwa gradient najwyżej o kilka procent. Tytułu nie skracamy na siłę do 2 linii (długie słowa, inne języki). Dłuższy tekst nadal jest czytelny, ale gradient maleje do pasa przy krawędzi.

## Zasady (1–12)

1. **Dwa poziomy:** wypełnienie rastrem (hero, okładki, CTA) i obrys z kropek (strony kategorii, mniejsze sekcje).
2. **Siatka i kształt:** siatka 10 px, sześć wielkości kropki, kropka zawsze kołem.
3. **Kolor na ciemnym:** #1B2B9C → #8DA1FF, bez bieli. **Na bieli:** szary #E4E5E9 → #8A8E97.
4. **Punkt:** jeden pomarańczowy punkt na element, koło 5 px wpisane w siatkę, kropki pod nim usunięte. Pierwszy lider, którego nie zakrywa gradient ani maska.
5. **Obiekt:** duży, częściowo w kadrze, skala −13 % od wyjściowej, od prawej krawędzi. Wygasa w stronę tekstu, nie wchodzi w kolumnę tekstu.
6. **Drobne kropki poza obiektem:** idą za kształtem do ok. 160 px, lekko postrzępione, o połowę mniejsze i o ok. 40 % bliżej tła w kolorze (`POLE.fk` = 0,62).
7. **Tekst nie stoi na kolorze:** gradient zaczyna się pod kolumną tekstu (pilnuje tego skrypt, patrz Geometria).
7a. **Gradient nad motywem:** obiekt chowa się pod nim, kropki maleją, przyjmują kolor gradientu i znikają w ziarnie.
8. **Kierunek gradientu:** naprzeciw tekstu. Gradienty rozciągnięte i płynne.
9. **Jasne F:** rama według `uklad.md` (www, pudełko, bez ramy).
10. **Dane:** tabele, wykresy i ryciny są liniowe, bez kropek motywu.
11. **Animacja:** tylko wypełnianie kropkami, ok. 2,5 s, punkt na końcu. Bez skanu i bez pętli. Kliknięcie w sekcję odtwarza.
12. **Biel w sekcjach** (komentarze, FAQ): mały szary element przy krawędzi.

**Pomarańcz:** jeśli kadr ma punkt motywu, tytuł jest bez kropki. Pozostałe reguły: `kolor.md`, punkt 2. CTA z motywem i przyciskiem `b1a` (punkt motywu obok Momentu) jest kompozycją z `motyw.html`.

## Uruchamianie

- Na zwykłej stronie motyw startuje sam (pierwsza klatka albo 80 ms).
- Treść dodana później (React, SPA): `PEmotyw.init(root)` po zamontowaniu. Sekcja z `data-pe-ok` jest pomijana; żeby przerysować, usuń `data-pe-ok`.
- Eksport, PDF, zrzut: `data-pe-static` i `await PEmotyw.ready`.
- **Czarny kadr bez kropek** oznacza, że motyw jeszcze nie wystartował (np. karta w tle). Nie dorysowuj go. Wywołaj `PEmotyw.init(document)`.

## Ograniczenia MVP

Obiekt to mapa Polski. Prototyp innego obiektu: `data-pe-obiekt="ksiazka"` w nagłówku strony startowej brand booka; obiekty rysuje rejestr `PEobiekty` w `js/pe-pl.js` (części, linie wewnątrz, liderzy z punktem marki). Zasady projektowania obiektów sekcji są w przygotowaniu. Bardzo małe formaty (krótszy bok poniżej ok. 400 px) dają mały obiekt, bo siatka ma stałe 10 px; użyj tam siatki kropek albo samego tła. Animacja w pętli i inne obiekty: do rozwoju przy stronie www. Odłożone kierunki: `explorations/Motyw - odłożone.html` (nie stosuj).