# PromptEye Brand Book & Design Language · pełna dokumentacja (PL)

Stan 28.10.2026. Indeks: https://brand.prompteye.com/llms.txt. Ścieżki plików są względne wobec https://brand.prompteye.com/ds/. 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).

---

<!-- docs/00-start.md · PL, źródło · https://brand.prompteye.com/pl/ -->

# 00 · Start: jak korzystać z systemu

PromptEye · identyfikacja v2 (MVP) · stan 28.10.2026. Ten folder opisuje system dla agenta AI i dla dewelopera. Opis dla ludzi (brand book) powstaje osobno i może się na nim opierać.

## Zasada

System to **klocki**, a nie zestaw gotowych formatów. Każdy materiał (strona, raport, slajd, post, baner, ulotka) składasz z tych samych klocków:

1. **Tło** – gradient z ziarnem albo jednolite tło z siatką kropek (`tla.md`).
2. **Motyw** – obiekt z kropek wyłaniający się z pola, z jednym pomarańczowym punktem (`motyw.md`). Rysuje go skrypt, nigdy Ty.
3. **Typografia** – Geist i Inter, skala liczona od kadru (`typografia.md`, `uklad.md`).
4. **Kolor** – tokeny z `tokens/colors.css` (`kolor.md`).
5. **Komponenty** – przyciski, nawigacja, sekcje (`komponenty.md`), dane (`dane.md`), raport (`raporty.md`, wstępne wytyczne).

Najpierw digital: strona www, raporty interaktywne, prezentacje, social media. Druk składa się z tych samych klocków.

## Ładowanie

```html
<link rel="stylesheet" href="styles.css">
<script src="js/pe-light.js"></script>
<script src="js/pe-pl.js"></script>
<script src="js/pe-raster.js"></script>
<script src="js/pe-motyw.js"></script>
```

`styles.css` importuje fonty, tokeny i `css/*.css`. Cztery skrypty rysują tła i motyw; wczytuj je w tej kolejności. W Claude Design zamiast nich jest jeden plik `_ds_bundle.js` (zawiera też `image-slot.js` i komponent Logo); poza Claude Design go nie ma. Szczegóły dla projektu w kodzie: `HANDOFF.md`.

## Kolejność czytania

1. `docs/00-start.md` (ten plik)
2. `docs/formaty.md` – co budujesz → z jakich klocków, gotowe szkielety HTML
3. Plik klocka, którego używasz
4. `docs/kontrola.md` – lista kontrolna przed oddaniem

## Co jest nadrzędne

1. `docs/` i `readme.md`, potem `guidelines/motyw.html` i `guidelines/uklad.html`. Przy sprzeczności wygrywają.
2. `guidelines/kolor.html`, `typografia.html`, `dane.html`, `partner.html`, `tla.html`, `kanaly.html`: wzory w swoim zakresie. Hero pokazane w `tla.html` (siatka kropek na gradiencie, tekst na środku) jest sprzed motywu. Hero bierzesz z `motyw.html` i `uklad.html`.
3. `js/pe-motyw.js`: jedyne miejsce ustawień motywu. Zmiany motywu tylko tam.
4. **Nie są częścią systemu:** `archive/`, `explorations/`, `scraps/`, `uploads/`. Nie czytaj, nie kopiuj.

## Pliki

| Plik | Zawartość |
|---|---|
| `tokens/colors.css` | kolory (tokeny `--pe-*`) |
| `tokens/typography.css` | kroje i skala pisma |
| `tokens/layout.css` | margines, kolumny, odstępy, rama, promień |
| `tokens.json` | te same tokeny w formacie maszynowym |
| `css/base.css` | ramy, kropka po tytule, nawigacja raportu |
| `css/typografia.css` | artykuł, figury, tabele, FAQ, stopka, kanały |
| `css/dane.css` | tabele złożone, wykresy |
| `css/partner.css` | raporty z partnerem |
| `css/przyciski.css` | przyciski, sekcje strony |
| `css/strony.css` | hero D/F/G/E, CTA, komentarze, rycina |
| `js/pe-light.js` | renderer tła (gradienty, ziarno, siatka kropek) |
| `js/pe-pl.js`, `js/pe-raster.js` | mapa Polski, raster punktowy |
| `js/pe-motyw.js` | motyw MVP, włączany atrybutem |
| `assets/` | logo (`assets/logo/`), ikony modeli AI do danych (`assets/llm/sprite.svg`) |
| `templates/` | szablony stron (DC): okładka i rozdział raportu, hero, artykuł |

## Test dokumentacji

`explorations/test-z-dokumentacji.html`: siedem kadrów złożonych wyłącznie ze szkieletów w `formaty.md` (slajd D, slajd treści z siatką, post G, post F bez ramy, OG, ostatni slajd CTA, slajd F w pudełku). Wynik zgodny z zasadami. W zwykłej karcie motyw startuje sam; w ukrytym podglądzie trzeba wywołać `PEmotyw.init(document)`.

## Statusy

- **MVP, obowiązuje:** wszystko w `docs/`, o ile nie jest oznaczone inaczej.
- **Wstępne wytyczne:** `raporty.md` (anatomia raportu). Przepiszemy go po pierwszym pełnym raporcie; zanim złożysz według niego cały raport, zapytaj.
- **Do rozwoju przy stronie www:** wersje mobilne, strona główna, animacja w pętli, obiekty inne niż mapa Polski, komponenty React poza Logo. Nie używaj bez pytania.

---

<!-- docs/formaty.md · PL, źródło · https://brand.prompteye.com/pl/formaty/ -->

# Formaty: co budujesz → z jakich klocków

Wartości (margines, pismo, logo) z tabeli w `uklad.md`. Kod szkieletów zakłada wczytane `styles.css` i cztery skrypty z `js/` (`00-start.md`; w Claude Design `_ds_bundle.js`). Ścieżki do `assets/` dopasuj do projektu.

## Decyzja w trzech pytaniach

1. **Czy kadr ma obiekt motywu?** Okładka, hero, slajd tytułowy, post z hasłem, CTA → tak (`data-pe-hero` / `data-pe-cta`). Slajd treści, post z cytatem lub liczbą, wizytówka → nie (siatka kropek albo samo tło, `tla.md`). Dane → rycina liniowa albo wykres (`dane.md`).
2. **Ciemne czy jasne?** Domyślnie ciemne D. Okładka i social z tekstem na dole → G. Jasne → F (rama: `uklad.md`).
3. **Gdzie stoi tekst?** Po lewej albo u góry → D/F/E. Na dole → G. Kolumnę oznacz `data-pe-tekst`.

## Hero www i artykuł

Gotowe: `templates/hero-raportu`, `templates/artykul`. Struktura: `komponenty.md` (Hero).

## Slajd tytułowy 1920 × 1080 (D)

```html
<section class="ah dk" data-pe-hero="d" style="width:1920px;height:1080px">
  <img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye" style="position:absolute;z-index:2;left:64px;top:64px;height:28px">
  <div class="ah-in" style="left:64px;top:216px;width:880px">
    <div class="ah-cr" style="font-size:20px">Raport · Turystyka</div>
    <h1 style="font-size:80px">Dokąd AI wysyła Polaków nad morze?</h1>
    <p style="font-size:28px;max-width:760px">12 000 odpowiedzi siedmiu modeli AI.</p>
  </div>
</section>
```

Jasny slajd: `class="ah ahl cx-l" data-pe-hero="f" data-pe-rama="pudelko" style="…;--pe-rama:64px"`, logo w kolorze, logo i tekst od 128 px (rama + margines).

## Slajd treści 1920 × 1080 (bez motywu)

```html
<div class="t2f dk" style="position:relative;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" data-dm=".03,.18,.5,.6"></canvas>
  <img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye" style="position:absolute;left:64px;top:64px;height:28px">
  <h1 style="position:absolute;left:64px;top:216px;width:880px;margin:0;font:400 80px/1.05 var(--pe-font-display);letter-spacing:-.04em;color:var(--pe-papier)">Nad morzem AI poleca trzy marki<span class="dot"></span></h1>
</div>
```

`data-dm` wycina kropki spod tekstu. Tytuł z kropką, bo to hasło (`typografia.md`); tytuł-etykieta, np. „Trzy wnioski z raportu”, byłby bez kropki.

## Post 1080 × 1350

**Tekst u góry (D):**
```html
<section class="ah dk" data-pe-hero="d" style="width:1080px;height:1350px">
  <img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye" style="position:absolute;z-index:2;left:72px;top:72px;height:32px">
  <div class="ah-in" style="left:72px;top:176px;width:936px"><h1 style="font-size:72px">Dokąd AI wysyła Polaków nad morze?</h1><p style="font-size:28px;max-width:800px">12 000 odpowiedzi siedmiu modeli AI.</p></div>
</section>
```

**Tekst na dole (G):** `class="ah dk gt" data-pe-hero="g"`, `.ah-in` z `left:72px;bottom:152px;top:auto;width:936px`, logo w `left:72px;bottom:72px`.

**Jasny (F, bez ramy):** `class="ah ahl cx-l" data-pe-hero="f" data-pe-rama="brak"`, logo w kolorze.

Post 1080 × 1080: to samo, H1 64.

## OG 1200 × 630

```html
<section class="ah dk" data-pe-hero="d" style="width:1200px;height:630px">
  <img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye" style="position:absolute;z-index:2;left:64px;top:64px;height:28px">
  <div class="ah-in" style="left:64px;top:140px;width:618px"><h1 style="font-size:56px">Dokąd AI wysyła Polaków nad morze?</h1></div>
</section>
```

Eksport do PNG: dodaj `data-pe-static`, poczekaj na `await PEmotyw.ready`.

## Okładka LinkedIn 1584 × 396

```html
<section class="ah dk" data-pe-hero="d" style="width:1584px;height:396px">
  <div class="ah-in" data-pe-tekst="lewo" style="left:400px;top:146px;width:720px"><h1 style="font-size:52px;margin:0">Zobacz, jak AI poleca Twoją markę</h1></div>
</section>
```

Bez logo w kadrze. Tekst od 400 px (zdjęcie profilu).

## CTA (strona, ostatni slajd)

`komponenty.md` (CTA). Ostatni slajd 1920 × 1080: `section.t2end[data-pe-cta="raster"]` z `height:1080px`, `.t2end-in` z `padding:0 96px`, `h2` z `data-pe-tekst`.

## Druk

- **Ulotka, oferta A4:** jasne F w pudełku (`data-pe-rama="pudelko"`) albo biel z tekstem. A4: tekst 11 pt, marginesy 20 mm, jeden pomarańcz. Zawsze `data-pe-static`.
- **Roll-up 85 × 200 cm:** D, tekst u góry (`data-pe-tekst="gora"`), treść od 30 do 140 cm licząc od góry, dolne 60 cm tylko tło.
- **Wizytówka 85 × 55 mm:** awers = siatka kropek na czerni z logo, rewers = biel z danymi. Nazwisko Geist 500 10 pt, reszta Inter 7 pt.
- Wzory: `guidelines/kanaly.html` (D1–D3).

## E-mail

Arial (Geist i Inter nie działają w klientach poczty), 13–15 px, logo jako obraz. Wzór: `guidelines/kanaly.html` (D6).

---

<!-- docs/marka.md · PL, źródło · https://brand.prompteye.com/pl/marka/ -->

# Marka: idea, komunikacja, metoda

**Status: obowiązuje (27.10.2026).** Na tej idei budujemy całą komunikację PromptEye: stronę, use case'y, case studies i motyw wizualny. Zmiany przychodzą od zespołu.

## Idea

**AI poleca Twoją markę w pytaniach, które przynoszą klientów.**

- **„Poleca”, a nie „widać”.** Widoczność to słowo kategorii, używa go każdy konkurent. Klientowi zależy na tym, żeby AI wskazało jego markę, kiedy ktoś pyta, co kupić albo kogo wybrać. AI staje się dziś najważniejszym polecającym.
- **„W pytaniach, które przynoszą klientów”, a nie „wszędzie”.** To odróżnia nas od narzędzi, które pokazują ogólny wynik widoczności. Bycie w odpowiedzi na pytanie, które nic nie sprzedaje, nic nie znaczy.

Polecanie przez AI tam, gdzie ma to sens, buduje świadomość marki, a w efekcie przynosi klientów. Nie dla każdego klienta rezultat wygląda tak samo, dlatego idea łączy się z use case'ami.

Ta sama idea jest hasłem motywu graficznego: pole kropek to rynek pytań, obiekt wyłaniający się światłem to pytania, które przynoszą klientów, pomarańczowy punkt to marka polecona przez AI (`motyw.md`).

## Dlaczego na tym budujemy

W dobie AI funkcje da się zbudować albo skopiować w tydzień. Komunikacja oparta na funkcjach starzeje się razem z nimi. Idea ma być prawdziwa dziś, za pół roku i za rok.

Nie da się skopiować trzech rzeczy (wyróżniki):

1. **Efektu.** „AI poleca Twoją markę” jest aktualne niezależnie od tego, jakie modele i funkcje będą za rok.
2. **Ludzi i ich historii.** Lata w SEO, exity, GEO robione dla klientów agencyjnie, zanim powstało narzędzie.
3. **Danych zbieranych w czasie.** Pomiary całych branż, raporty, Atlas, historia odpowiedzi modeli. Konkurent skopiuje funkcję, ale nie zmierzy wstecz, jak AI mówiło o rynku pół roku temu. Ta przewaga rośnie z każdym miesiącem.

## Kolejność w komunikacji

Od najtrwalszego do najszybciej zmiennego:

1. Efekt (stały).
2. Dlaczego u nas to działa: metoda, ludzie, dane (stałe).
3. Use case'y (zmieniają się powoli).
4. Funkcje (zmieniają się co tydzień). Pokazujemy je tylko jako dowód, że metodę da się wykonać, nigdy jako główny przekaz.

## Use case'y: formy jednego efektu

Z PromptEye korzystają różne persony i pracują z nami przez use case'y, czyli konkretne scenariusze użycia. Każdy use case opisujemy jako odmianę tego samego efektu, więc komunikacja zostaje spójna, choć cele są różne.

| Persona chce… | Efekt w języku idei |
|---|---|
| Pozyskać klientów | AI poleca markę w pytaniach zakupowych |
| Wpłynąć na postrzeganie marki | AI opisuje markę tak, jak ona chce być widziana |
| Publikować dużo dobrych artykułów pod SEO/GEO | Treści są cytowane przez AI w ważnych pytaniach |

To początek listy, use case'ów jest więcej. **Use case opisujesz przez efekt, nie przez czynność.** „Publikacja artykułów” to czynność, w której ścigamy się z każdym generatorem treści. „Treści cytowane przez AI” to efekt, który trzyma nas w naszej kategorii. Nowych use case'ów nie dopisuj bez zespołu.

## Metoda w trzech krokach

Każdy use case odpowiada na dwa pytania klienta: skąd wiemy, że AI poleci markę, i skąd wiemy, że akurat w tych pytaniach są klienci. Odpowiada na nie jedna metoda, wspólna dla wszystkich use case'ów:

1. **Wybieramy pytania, które przynoszą klientów.** Wiemy które, bo stoi za tym doświadczenie z SEO (intencja zakupowa) i dane z pomiarów całych branż.
   W praktyce: dobór pytań i grupowanie ich w tematy i intencje, ocena jakości zestawu pytań, priorytety biznesowe, sugestie, które pytania dodać, usunąć lub zamienić.
2. **Zmieniamy to, co decyduje o odpowiedzi AI:** treści, źródła i publikacje, w jednym miejscu. Zakup linków i publikacji bezpośrednio w systemie to droga do celu, a nie wyróżnik sam w sobie.
   W praktyce: rekomendacje oparte na monitoringu, ruchu botów AI i analizie technicznej strony; luki w treściach na tle konkurencji; tworzenie i optymalizacja treści; zakup linków i publikacji w systemie.
3. **Sprawdzamy, czy AI zaczęło polecać i czy przyszli klienci.**
   W praktyce: monitoring odpowiedzi modeli AI (udział w rekomendacjach i pozycja na tle konkurencji, sposób opisu marki, źródła i cytowania), ruch z AI na stronie klienta, zmiana widoczności po opublikowanych treściach.

Te same elementy występują w ofercie jako warstwy: monitoring to kroki 1 i 3, zarządzanie widocznością to krok 2. **W komunikacji używasz kroków metody**, warstwy zostają w ofercie i cenniku. Aplikacja w ChatGPT to osobny produkt dla enterprise, poza podstawową ofertą i poza metodą.

Metoda nie ma jeszcze nazwy. **Nie wymyślaj jej.** Opisuj ją trzema krokami.

## Zespół i granica obietnic

Sama narracja „mamy doświadczony zespół” jest słaba, bo mówi tak każdy start-up. Działa dopiero wtedy, gdy zespół stoi za metodą, a case'y pokazują, że metoda daje ten sam wynik w różnych sytuacjach.

Na pytanie „skąd wiemy, że w tych pytaniach są klienci” odpowiadamy dziś doświadczeniem. Pełna odpowiedź z danych wymaga pomiaru ruchu z AI i konwersji u klienta. Dopóki go nie mamy, w obietnicach dotyczących klientów i konwersji mówimy „pomagamy”, a nie „robimy”.

## Case study: stały szablon

Każde case study ma tę samą budowę. Powtarzalność widać wtedy, gdy sekcja „dlaczego zadziałało” za każdym razem wraca do tych samych trzech kroków metody.

1. Kto i jaki scenariusz.
2. Punkt wyjścia: pomiar z narzędzia.
3. Co zrobiliśmy: trzy kroki metody.
4. Rezultat: liczby z narzędzia, a gdzie się da, ruch lub klienci.
5. Dlaczego zadziałało: te same trzy powody.

Tylko potwierdzone case studies. Tam, gdzie nie ma jeszcze klienta dla danego use case'u, są dwa uczciwe zastępstwa: case z czasów agencyjnego GEO albo PromptEye jako własny case (SEO/GEO na nowej stronie).

## Słownictwo: reguły

- **Tak:** poleca, polecenie, rekomendacja AI, pytania, które przynoszą klientów, efekt, metoda, pomiar.
- **Ostrożnie:** „widoczność” tylko jako nazwa miary w danych („widoczność w modelu, %”), nie jako obietnica.
- **„Pomagamy”, a nie „robimy”** w obietnicach dotyczących klientów i konwersji (sekcja „Zespół i granica obietnic”).
- **„Mamy doświadczony zespół”** samo w sobie nie jest argumentem. Zespół zawsze stoi za metodą i case'ami.
- **Funkcje** tylko jako dowód, że metodę da się wykonać, nigdy jako główny przekaz.
- **Liczby:** tylko potwierdzone. Nie używaj „93 na 100 treści podnosi widoczność w pierwszym miesiącu”, dopóki nie zostanie potwierdzona.
- Polskie zasady pisowni i typografii: `typografia.md` (P1).

---

<!-- docs/logo.md · PL, źródło · https://brand.prompteye.com/pl/logo/ -->

# Logo

## Pliki

Pakiet logo: SVG (podstawowy) w `assets/logo/svg/`, PNG w `assets/logo/png/` (szerokość w nazwie pliku, przezroczyste tło).

| Plik (`assets/logo/svg/`) | Kiedy |
|---|---|
| `prompteye-logo-color-on-light.svg` | logo w kolorze: biel i jasne tła (panel, jasne F), dokumenty |
| `prompteye-logo-color-on-dark.svg` | logo w kolorze na ciemne tło: czerń, gradient, zdjęcie; domyślne w hero D, G, E |
| `prompteye-logo-black.svg` | jednobarwne czarne: druk jednobarwny, grawer, pieczęcie |
| `prompteye-logo-white.svg` | jednobarwne białe: ciemne tło, na którym pomarańcz koliduje z tłem |
| `prompteye-mark-color.svg`, `prompteye-mark-black.svg`, `prompteye-mark-white.svg` | sam sygnet: avatar, favicon, bardzo małe pola |

Starsze pliki w `assets/` zostają dla szablonów: `assets/prompteye-logo.svg` to `color-on-light`, a `assets/prompteye-logo-white.svg` to `color-on-dark` (znak pomarańczowy, napis biały), **nie** wersja jednobarwna z pakietu o tej samej nazwie. W nowych materiałach używaj pakietu.

W Claude Design jest też komponent React `Logo` z paczki (`window.<Namespace>.Logo`, `variant="color"|"white"`, `height`). Poza Claude Design go nie ma.

## Zasady

- Minimalna wysokość 14 px (digital).
- Pole ochronne = wysokość znaku z każdej strony.
- Wysokość według formatu (`uklad.md`): www 22, slajd 28, post 32, OG 28 px.
- Miejsce: lewy górny róg, na marginesie formatu. Wyjątek: wariant G (tekst na dole) – logo pod tekstem, w lewym dolnym rogu.
- Figura w tekście (tabela, wykres w artykule): logo w prawym górnym rogu figury. Grafika do udostępnienia: lewy górny róg.
- Okładka LinkedIn: bez logo w kadrze, lewy dolny róg zasłania zdjęcie profilu.
- Raport z partnerem: zapis „PromptEye × Partner”, nasz znak pierwszy (`dane.md`, sekcja Partner).

## Zakazy

Przebarwianie, rozciąganie, cienie, obroty, obrys, logo na najjaśniejszym miejscu gradientu, logo jako element motywu.

---

<!-- docs/kolor.md · PL, źródło · https://brand.prompteye.com/pl/kolor/ -->

# Kolor

Źródło: `tokens/colors.css` (wszystkie kolory w `css/` odwołują się do tych tokenów). Wersja maszynowa: `tokens.json`. Nie wymyślaj nowych kolorów.

## Marka

| Token | Wartość | Rola |
|---|---|---|
| `--pe-kobalt` / `--pe-kobalt-500` | #4D6BFE | kolor marki: powierzchnie, dane, przyciski na czerni |
| `--pe-pomarancz` | #FD723A | punkt: kropka po tytule, lider w danych, punkt motywu, logo. Nigdy tekst ani tło |
| `--pe-pomarancz-hover` | #FF8C5E | tylko hover przycisku `b1a` |

## Kobalt, jedna skala

| Token | Wartość | Rola |
|---|---|---|
| `--pe-kobalt-900` | #0A1256 | głębia gradientu, tło karty w kobalcie |
| `--pe-kobalt-700` | #1E30BE | przejście w gradiencie, nie jako płaski kolor |
| `--pe-kobalt-650` | #2A44D4 | hover linku na bieli |
| `--pe-kobalt-600` | #3D5AF1 | tekst i linki na bieli, fokus, pierwsza seria danych na bieli (5,4 : 1) |
| `--pe-kobalt-300` | #7D93FF | tekst, liczby, linki i dane na czerni (7,5 : 1) |
| `--pe-kobalt-200` | #9DAEFF | słupki i serie danych na bieli |
| `--pe-kobalt-100` | #C7D1FF | słupki drugoplanowe, zaznaczenia |
| `--pe-kobalt-50` | #E4E9FF | tło wyróżnionej karty na bieli |

## Neutralne

| Noc (czerń) | Wartość | Dzień (biel) | Wartość |
|---|---|---|---|
| `--pe-noc-tlo` / `--pe-czern` | #000000 | `--pe-dzien-tlo` / `--pe-biel` | #FFFFFF |
| `--pe-noc-powierzchnia` | #0C0D10 | `--pe-dzien-panel` | #F5F6F8 |
| `--pe-noc-linia` | biel 12 % | `--pe-dzien-linia` | #E6E7EB |
| `--pe-noc-linia-2` | #22252C | `--pe-dzien-linia-2` | #F0F1F3 |
| `--pe-noc-podpis` | #7A7E87 (min. dla tekstu) | `--pe-dzien-podpis` | #6B6F78 (min. dla tekstu) |
| `--pe-noc-sciezka` | #8A8E97 | `--pe-dzien-tekst-2` | #555962 |
| `--pe-noc-nawigacja` | #9A9EA7 | `--pe-dzien-hover` | #E2E4E9 |
| `--pe-noc-tekst` | #A3A7B0 | `--pe-dzien-tekst` | #464A53 |
| `--pe-noc-tekst-dlugi` | #B9BDC5 (długi tekst) | | |
| `--pe-noc-tekst-2` | #C9CCD3 | | |
| `--pe-noc-naglowek` / `--pe-papier` | #F7F8FA | `--pe-dzien-naglowek` / `--pe-atrament` | #0B0D12 |

Na czerni: lead i krótki tekst `--pe-noc-tekst` (#A3A7B0), długi tekst ciągły (artykuł, raport) `--pe-noc-tekst-dlugi` (#B9BDC5). Nigdy biel (biel „świeci”).

## Motyw (kolory kropek)

- Na czerni: `--pe-motyw-noc-0…3` (#1B2B9C → #8DA1FF), bez bieli.
- Na bieli: `--pe-motyw-dzien-0…2` (#E4E5E9 → #8A8E97), szary.
- Punkt: `--pe-motyw-punkt` (#FD723A).

## Zasady

1. **Kontrast:** mały tekst co najmniej 4,5 : 1. Kobalt 500 na bieli ma 4,3 : 1, więc linki i tekst na bieli w Kobalcie 600. Na czerni drobny tekst w Kobalcie 300.
2. **Pomarańcz to wyjątek, nie dekoracja:**
   - kropka po tytule nigdy w kadrze z punktem motywu;
   - przy przycisku Moment (`b1a`) nie ma kropki po tytule ani punktów w przyciskach obok;
   - punkt w przycisku `b1b` (nawigacja, sekcje) może stać w kadrze z punktem motywu, jak w hero D;
   - w tabeli i wykresie jedynym pomarańczem jest lider.
3. **Pomarańcz nigdy jako tekst ani tło** (2,8 : 1 na bieli).
4. **Kobalt nie wypełnia przycisku.** Kobalt to linki, fokus, zaznaczenia i dane.
5. **Tekst ciągły nigdy nie stoi na kolorze** gradientu. Jedno światło na kadr.
6. **Zmiany w danych bez czerwieni i zieleni:** znak niesie znaczenie (`dane.md`).
7. Kolor partnera tylko w danych, jako druga seria (`dane.md`).

Wartości hex w `css/` poza tokenami to palety danych (`dane.css`), kolory partnera (`partner.css`) i pojedyncze odcienie wewnątrz komponentów. Nie używaj ich poza tymi klasami. Zmienne bez prefiksu `--pe-` (`--h`, `--tx`, `--q1`…) są lokalne dla klas.

---

<!-- docs/typografia.md · PL, źródło · https://brand.prompteye.com/pl/typografia/ -->

# Typografia

Kroje: **Geist** (nagłówki, liczby; `--pe-font-display`) i **Inter** (tekst, dane, interfejs; `--pe-font-text`). Bez trzeciego kroju. Wyjątek: stopka e-mail w Arialu.

## Skala www (wzorzec, s = 1)

| Styl | Krój | Rozmiar / interlinia | Światło | Kolor na bieli |
|---|---|---|---|---|
| Display `.d1` | Geist 400 | 120 / 0,95 | −0,048 em | atrament |
| H1 | Geist 400 | 64 / 1,05 | −0,04 em | atrament |
| Lead | Inter 400 | 21 / 1,5 | −0,012 em | `--pe-dzien-tekst-2` |
| H2 | Geist 400 | 36 / 1,08 | −0,035 em | atrament |
| H3 | Geist 500 | 21 | | atrament |
| Tekst | Inter 400 | 16 / 1,65 | −0,011 em | `--pe-dzien-tekst` |
| Metadane, podpisy | Inter 500 | 13–14 | | `--pe-dzien-podpis` |

- Kolumna tekstu 660 px (`--pe-kolumna`), ok. 80 znaków. Tabele i wykresy do 972 px.
- Odstęp między akapitami 24 px, nad H2 64 px.
- Interlinia nagłówków 1,02–1,1 (polskie znaki przy 1,0 się stykają).
- Im mniejszy nagłówek, tym cięższy (H1, H2 400; H3 500).
- Linki w tekście: Kobalt 600 z podkreśleniem 1 px; na czerni Kobalt 300.
- Cyfry tabelaryczne w danych, przecinek dziesiętny.

**Wersja ciemna:** te same rozmiary. Tekst `--pe-noc-tekst-dlugi` (#B9BDC5), 16 / 1,7, −0,006 em; lead `--pe-noc-tekst`. Drobny tekst +0,01 em.

**Telefon:** H1 36, lead 18, H2 28, tekst 16 / 1,6, marginesy 20 px (do rozwoju przy stronie www).

**PDF A4:** tekst 10 / 15 pt, kolumna 122 mm, H1 30 pt, H2 17 pt, H3 11,5 pt, metadane 7,5–8 pt.

## Inne formaty

Rozmiary pisma dla slajdów, postów, OG i banerów: tabela w `uklad.md`. Reguła: rozmiar z wzorca × s formatu, zaokrąglony do 4 px. Social ma większe minimum (drobny tekst co najmniej 20 px przy szerokości 1080).

## Kropka po tytule

```html
<h1>Zobacz, jak AI poleca Twoją markę<span class="dot"></span></h1>
```

- `.dot` wstawia znak „.” z fontu w kolorze #FD723A. Nie pisz własnej kropki przed `<span>`.
- Tylko w nagłówkach-hasłach. Hasło to zdanie-teza, które coś obiecuje albo stwierdza („Zobacz, jak AI poleca Twoją markę”, „Nad morzem AI poleca trzy marki”). Etykieta i nazwa strony, rozdziału lub sekcji („Raporty branżowe”, „Kolor”, „Trzy wnioski z raportu”) kropki nie dostaje.
- Tytuł-pytanie kończy się pytajnikiem, bez kropki.
- Nigdy w kadrze z punktem motywu ani z przyciskiem `b1a`.

## P1: polskie zasady (automatycznie)

Atrybut `data-pe-typo` na kontenerze uruchamia korektę:
- półpauza zamiast pauzy w zdaniu („ – ”),
- wąska twarda spacja przed % i p.p. („38 %”),
- jednoliterowe spójniki (a, i, o, u, w, z) nie zostają na końcu wiersza.

Pisząc sam: bez sierotek, liczba nie odrywa się od jednostki, spacja przed %.

---

<!-- docs/uklad.md · PL, źródło · https://brand.prompteye.com/pl/uklad/ -->

# Układ i kadr

Wzór: `guidelines/uklad.html`. Tokeny: `tokens/layout.css`.

## Jedna skala

**s = √(W · H) / 1113**, gdzie 1113 = √(1440 · 860). Hero www 1440 × 860 ma s = 1.

Każdy nowy format liczysz od wzorca tym samym s: margines, odstępy, pismo i motyw. Pismo zaokrąglasz do 4 px, odstępy do 8 px. Motyw liczy się sam (gdy tekst stoi obok obiektu, skala motywu to min(s, H / 860)).

## Siatka

- **www, slajd, OG, LinkedIn:** 12 kolumn.
- **Posty (1080 × 1350, 1080 × 1080):** 6 kolumn.
- www: margines 48, odstęp 24, kolumna 90, treść 1344. Kolumna tekstu 660 = 6 kolumn; kolumna hero 680.
- Odstępy pionowe w krokach 8: 8, 16, 24, 32, 48, 64, 96, 128 (`--pe-o-1…8`).
- Promień rogów: 2 px (`--pe-promien`). Bez pigułek.
- Hero: tytuł i lead do 3 linii, dół kolumny tekstu do ok. 70 % wysokości kadru, żeby gradient zachował skalę (`motyw.md`, Czytelność).

## Formaty

| Format | s | Skala motywu | Margines | Kolumny · odstęp | Logo | H1 | Lead | Drobny tekst | Motyw |
|---|---|---|---|---|---|---|---|---|---|
| Hero www 1440 × 860 | 1 | 1 | 48 | 12 · 24 | 22 | 64 | 21 | 14 | D, F, E · G na okładce |
| Slajd 1920 × 1080 | 1,29 | 1,26 | 64 | 12 · 32 | 28 | 80 | 28 | 20 | D, E, F-pudełko · G na okładce |
| Post 1080 × 1350 | 1,09 | 1,09 | 72 | 6 · 24 | 32 | 72 | 28 | 22 | D tekst u góry · G tekst na dole · F bez ramy |
| Post 1080 × 1080 | 0,97 | 0,97 | 72 | 6 · 24 | 32 | 64 | 26 | 20 | jak wyżej |
| OG 1200 × 630 | 0,78 | 0,73 | 64 | 12 · 16 | 28 | 56 | 24 | 20 | D · F bez ramy |
| Okładka LinkedIn 1584 × 396 | 0,71 | 0,46 | 56 | 12 · 24 | bez | 52 | – | – | D, tekst od 400 px |

Format spoza tabeli: weź najbliższy (kanał i proporcje) i przemnóż jego wartości przez s nowego ÷ s z tabeli.

## Logo

Lewy górny róg na marginesie. W G (tekst na dole) logo pod tekstem, w lewym dolnym rogu. Szczegóły: `logo.md`.

## Rama jasnego F

| Wariant | Atrybut | Kiedy |
|---|---|---|
| www | bez atrybutu | hero F na stronie: rama po bokach (48), dół zamyka biała strona |
| B · pudełko | `data-pe-rama="pudelko"` | samodzielna strona: slajd, raport, druk |
| C · bez ramy | `data-pe-rama="brak"` | kafelek platformy: post, OG, baner |

- Rama = margines formatu (`--pe-rama` na sekcji).
- Tekst stoi o jeden margines wewnątrz ramy (w B: margines ramy + margines).
- W jednej serii albo dokumencie nie mieszasz B i C.
- Ciemne D, G, E są zawsze bez ramy.

## Bezpieczne pola

- Okładka LinkedIn: lewy dolny róg (ok. 56–256 px od lewej, od 250 px od góry) zasłania zdjęcie profilu. Tekst od 400 px.
- Roll-up: treść od 30 do 140 cm licząc od góry, dolne 60 cm tylko tło.

---

<!-- docs/tla.md · PL, źródło · https://brand.prompteye.com/pl/tla/ -->

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

---

<!-- docs/motyw.md · PL, źródło · https://brand.prompteye.com/pl/motyw/ -->

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

---

<!-- docs/komponenty.md · PL, źródło · https://brand.prompteye.com/pl/komponenty/ -->

# Komponenty (klasy CSS)

Komponenty to klasy z `css/`. Jedynym komponentem React jest Logo, i to tylko w Claude Design; poza nim logo wstawiasz plikiem SVG (`logo.md`). Wzory: `guidelines/motyw.html`, `guidelines/kanaly.html`, `guidelines/kolor.html`.

## Kontekst

- `.dk` – ciemne tło (czerń, tekst papier).
- `.pp` – jasne tło (biel, tekst atrament).
- `.cx-l` – jasny kontekst dla przycisków i linków (np. `b1b` staje się czarny).

## Przyciski

```html
<a class="b b1b" href="#">Umów demo</a>
```

| Klasa | Poziom | Wygląd | Kiedy |
|---|---|---|---|
| `b1b` | 1 · standard | jasny z pomarańczowym punktem; w `.cx-l` czarny | główna akcja sekcji |
| `b1a` | 1 · Moment | pomarańczowy | tylko zamknięcie artykułu lub strony, tylko na czerni |
| `b1w` | 1 | biały | wyjątkowo na zdjęciu lub kolorze |
| `b2` | 2 | szkło / ramka | drugi wybór |
| `b3` | 3 | tekst ze strzałką | trzeci wybór, linki w sekcjach; `.n` bez strzałki |

Rozmiary: `S` 36 px, domyślny 48 px, `L` 56 px, `F` pełna szerokość (52 px).

Zasady:
1. Jeden przycisk poziomu 1 na sekcję. Drugi wybór to poziom 2 albo 3.
2. Poziom 1 wyróżnia jasność i punkt, nie kolor.
3. Poziom 3 to sam tekst ze strzałką; podkreślenie dopiero po najechaniu.
4. **Moment (`b1a`)** tylko na czerni, nie na kolorze, nie obok kobaltu, nigdy w nawigacji ani w aplikacji. Przy Momencie w kadrze nie ma innego pomarańczu.
5. Kobalt nie wypełnia przycisku.
6. Punkt tylko w poziomie 1.
7. Prostokąt z rogiem 2 px. Bez pigułek.
8. Przycisk stoi na spokojnym tle: czerń, biel albo ciemna część gradientu. Nigdy w najjaśniejszym miejscu światła.
9. Treść: czasownik i rzecz, najwyżej 3 słowa. Bez wykrzyknika i bez „kliknij”.
10. Telefon: poziom 1 na pełną szerokość na dole, drugi wybór jako poziom 3 pod nim.

## Nawigacja strony (w hero)

```html
<header class="hn">
  <img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye">
  <nav><a href="#">Produkt</a><a href="#">Raporty</a><a class="on" href="#">Blog</a><a href="#">Cennik</a></nav>
  <span class="r"><a class="b b3 n S" href="#">Zaloguj</a><a class="b b1b S" href="#">Umów demo</a></span>
</header>
```

`a.on` – aktywna pozycja. W jasnym F logo `prompteye-logo-color-on-light.svg`, a przycisk w nawigacji to nadal `b1b` (nigdy `b1a`).

## Hero (1440 × 860)

```html
<section class="ah dk" data-pe-hero="d">
  <header class="hn">…</header>
  <div class="ah-in">
    <div class="ah-cr"><a href="#">Blog</a><span>/</span><span>Regiony Polski</span></div>
    <h1>Dokąd AI wysyła Polaków nad morze?</h1>
    <p>Lead, maks. 3 linie (ok. 150 znaków).</p>
    <div class="ah-m"><b>Zespół badawczy PromptEye</b><span>23 października 2026</span><span>9 min czytania</span></div>
  </div>
</section>
```

| Wariant | Klasy sekcji |
|---|---|
| D ciemne | `ah dk` + `data-pe-hero="d"` |
| F jasne | `ah ahl cx-l f86` + `data-pe-hero="f"` |
| G okładka | `ah dk gt gt-k` + `data-pe-hero="g"` |
| E obrys | `ah dk` + `data-pe-hero="e"` |

`.ah-in`: kolumna tekstu (left 48, top 184, width 680). Tytuł H1 64 do 3 linii, lead 21 do 3 linii. `.ah-cr` ścieżka, `.ah-m` meta.

## CTA (1440 × 560)

```html
<section class="t2end" data-pe-cta="raster">
  <div class="t2end-in">
    <h2>Sprawdź, jak AI poleca Twój region</h2>
    <p>Pokażemy wyniki Twojej marki na tle konkurencji. Demo trwa 30 minut.</p>
    <div class="pb-ctas"><a class="b b1a L" href="#">Umów demo</a><a class="b b3 L" href="#">Pobierz raport</a></div>
  </div>
</section>
```

## Komentarze ekspertów

```html
<section class="kx" data-pe-komentarze="raster" data-kolor="szary">
  <div class="kx-in">
    <div class="kx-h"><small>Komentarze ekspertów</small><h2>Co o wynikach mówią praktycy</h2></div>
    <div class="kx-g">
      <article class="kx-c">
        <div class="kx-p"><image-slot id="foto-1" shape="circle" placeholder=""></image-slot><div><b>Imię Nazwisko</b><span>Stanowisko</span><span>Firma</span></div></div>
        <blockquote>Cytat, maks. 5 linii.</blockquote>
        <a class="b b3" href="#">Czytaj komentarz</a>
      </article>
      …(3 karty)
    </div>
  </div>
</section>
```

## Rycina liniowa (dane)

```html
<figure class="t2fig t2fw fgm">
  <div class="t2fig-h"><div><small>Rycina 1 · Regiony Polski</small><h4>Liderzy kategorii w rekomendacjach AI</h4><p>Miara, okres.</p></div><img src="assets/logo/svg/prompteye-logo-color-on-light.svg" alt="PromptEye"></div>
  <div class="fgm-b" data-pe-rycina><ul class="fgm-l"><li><small>Nad morze</small><b>Sopot</b><span>30,9 %</span></li>…</ul></div>
  <div class="t2fig-f"><span>Źródło: PromptEye, …</span><b>prompteye.com/raporty</b></div>
</figure>
```

## Pozostałe sekcje strony

Wzory 1:1 w `guidelines/kanaly.html` (C1, C2) i `guidelines/typografia.html` (A1, A2): sekcja „jak to działa” (`.pb-sh`, `.pb-cards`), raporty (`.t2sp`), cennik (`.t2pr`, `.t2pk`, `.t2p`, `.t2p.ft` wyróżniony), porównanie (`.t2cmp`), FAQ (`.t2fq`, `.t2faq`), powiązane (`.t2rel`, `.t2card`), stopka (`.t2ft`). Kopiuj blok z arkusza i podmieniaj treść.

## Szablony

`templates/hero-raportu`, `templates/okladka-raportu`, `templates/artykul`, `templates/rozdzial-raportu`. Ładują system przez `ds-base.js`.

---

<!-- docs/dane.md · PL, źródło · https://brand.prompteye.com/pl/tabele/ -->

# Dane: tabele, wykresy, partner

Wzory 1:1: `guidelines/dane.html` (T4 tabela minimalna, T3 tabela złożona na komputer i telefon, W3 linia w czasie, W4 słupki, W5 rozrzut, W6 struktura; każdy jasny i ciemny), `guidelines/typografia.html` (A1 i A2 tabela w artykule, B1–B3 grafiki do udostępnienia), `guidelines/partner.html` (P1 tabela z partnerem). Kopiuj blok z arkusza (np. `#t3`, `#w3`) i podmieniaj dane. Dane są liniowe, bez kropek motywu.

## Figura

```html
<figure class="t2fig">
  <div class="t2fig-h"><div><small>Tabela 1 · Nad morze</small><h4>Top 10 miejsc nad morzem w rekomendacjach AI</h4><p>Widoczność: odsetek odpowiedzi, w których AI poleca miejsce. Marzec 2026.</p></div><img src="assets/logo/svg/prompteye-logo-color-on-light.svg" alt="PromptEye"></div>
  <table class="dt">…</table>
  <div class="t2fig-f"><span>Źródło: PromptEye, raport …</span><b>prompteye.com/raporty</b></div>
</figure>
```

## Tabele

Każdą tabelę składasz z tych samych klocków: zaczynasz od tabeli minimalnej i dokładasz warstwy, każdą z konkretnego powodu. Dolna granica to T4 (`#t4`, same wiersze i kolumny), górna to T3 (`#t3`, prawie wszystkie warstwy). Ta sama tabela złożona w kolumnie artykułu: `guidelines/typografia.html` A1 i A2, `templates/artykul`, `templates/rozdzial-raportu`. Z partnerem: `guidelines/partner.html` P1. Do udostępnienia: B1.

### Warstwy

| Warstwa | Co dodaje (klasy) | Kiedy |
|---|---|---|
| 1. Tabela | wiersze, kolumny, nagłówki, liczby (`table.dt`, `th.rk`/`td.rk`, `td.pc`, `.n` z `.lv`) | zawsze |
| 2. Figura | sygnatura, tytuł, opis miar, logo, stopka (`figure.t2fig`, `.t2fig-h`, `.t2fig-f`) | gdy tabela stoi sama: raport, artykuł, grafika |
| 3. Najważniejsza miara | nagłówek `th.mg` z drugą linią, słupek `.vb`, linia `.gk` po kolumnie | gdy jedna miara mówi najwięcej (np. widoczność) |
| 4. Podmiot | logo `.co` w nazwie (`.pn`), typ w kolumnie `td.ty` albo pod nazwą (`<small>`) | gdy wiersze to firmy lub marki; miejsca i rzeczy bez logo |
| 5. Grupa kolumn | etykieta `.gx` nad grupą, ramka `.gk`, znaki modeli `img.zm` | gdy kilka kolumn to ta sama miara w różnych modelach |
| 6. Mapa ciepła | `td.hm` z `.hm1`–`.hm5`, `.bx`, przełącznik `input.hm-sw` + `label.hm-tg`, legenda `.hm-lg` | gdy w grupie jest kilka kolumn tej samej miary |
| 7. Lider i zmiany | `tr.ld`, `span.mk`, „▲1” / „▼1”, `.dn` | gdy pokazujesz ranking albo zmianę w czasie |
| 8. Partner | wspólny nagłówek P1–P3, stopka „PromptEye × Partner” | raport z partnerem (niżej) |

Nie dokładaj warstwy bez powodu. Tabela w treści artykułu często nie potrzebuje niczego poza warstwą 1.

### Tytuł

- **Tytuł-wniosek**, gdy tabela niesie jedną myśl („Pięć pierwszych miejsc zajmują sieci handlowe”).
- **Tytuł-opis**, gdy tabela jest zestawieniem do przeglądania („Widoczność sklepów z elektroniką w AI, marzec 2026”).
- **Bez tytułu i bez figury**, gdy tabela stoi w tekście, który ją zapowiada. Źródło podaje wtedy tekst.
- Figura ma zawsze stopkę: źródło, próba (n), okres, adres. Opis pod tytułem mówi, czym są miary.

### Kolumny

- **Kolejność:** kto (#, podmiot, typ) | najważniejsza miara | miary pomocnicze (np. pozycja na liście) | rozbicie na modele AI. Od ogółu do szczegółu.
- **Pozycja `#`:** `th.rk` / `td.rk`, 40–52 px, numer pogrubiony (`<b>`) w tabeli z warstwą 7, zwykły w minimalnej.
- **Podmiot:** `td.pc`, tekst do lewej, zawija się do 2–3 linii, nigdy nie ucina. Druga linia (typ, region) w `<small>`.
- **Typ, kategoria:** osobna kolumna `td.ty` (Inter 14, kolor drugoplanowy), gdy jest miejsce; w wąskiej tabeli druga linia pod nazwą.
- **Liczba:** `.n`, wyśrodkowana, w polu `.lv` o stałej szerokości wyrównanym do prawej, więc przecinki stoją jeden pod drugim (`.lv.lz` dla liczb bez %). Cyfry tabelaryczne. Jedno miejsce po przecinku w całej kolumnie albo całe liczby w całej kolumnie.
- **Procent przy każdej wartości procentowej** („61,1 %”, spacja nierozdzielająca). Nagłówek go nie powtarza. Bez jednostki tylko to, co nie jest procentem (średnia pozycja).
- **Zmiana:** „+2,4” / „−0,6” w punktach procentowych (p.p. w nagłówku, bo to nie procent), spadek `.dn` w szarości. Zmiana pozycji „▲1” / „▼1” przy numerze, tylko gdy się zmieniła.
- **Tekst** (np. najczęstsze źródło): do lewej, Inter 14, kolor drugoplanowy.
- **Brak danych:** „—” w szarości (`td.na`), nigdy „0”.
- **Najważniejsza miara** (np. widoczność): nagłówek w kolorze tekstu z drugą linią, z czego jest liczona (`th.mg` i `<small>wszystkie modele</small>`), słupek `.vb` (tor 80 px = 100 %, lider w kobalcie), liczba od lewej zaraz za słupkiem, pionowa linia po prawej (`.gk`). Widoczność to odsetek wszystkich odpowiedzi, a nie średnia z modeli, więc nie nazywaj jej „średnią”.

### Szerokości

- Suma kolumn = szerokość tabeli: 1210 px w raporcie na całą szerokość treści (T3), 896 px w bloku artykułu (A1), 972 px tabela bez figury w bloku artykułu (T4), 588 px na telefonie z przewijaniem, 350 px na telefonie bez przewijania.
- Najpierw kolumny stałe: # 40–52, liczba 86–108 (pole na „61,1 %”), model 85–100. Resztę dostaje podmiot.
- Gdy brakuje miejsca, kolejno: typ pod nazwę, krótszy nagłówek, układ telefonu z przewijaniem. Pisma nie zmniejszaj: wiersze 15 (telefon 14), nagłówki 12 (telefon 11).
- Szerokości wpisuj w `style` na komórkach nagłówka. Etykietę grupy `.gx` stawiasz nad tabelą z `margin-left` = suma kolumn przed grupą i `width` = suma kolumn grupy. Tak działa i w zwykłym HTML, i w Claude Design (`.dc.html`), którego silnik wyrzuca `<colgroup>`.

### Nagłówki

- Inter 500 12 w kolorze metadanych, wyrównane jak wartości pod nimi. Nagłówek z dwóch słów ma jedno słowo w linii (`span.sl`). Najważniejsza miara: kolor tekstu i druga linia.
- **Grupa kolumn:** etykieta `.gx` z linią, linia jest górą ramki, boki ramki (`.gk` na ostatniej kolumnie przed grupą i na ostatniej kolumnie grupy) schodzą do końca tabeli, 20 px nad znakami modeli.
- **Znaki modeli w kolorze** nad nazwą: `<img class="zm" src="assets/llm/<model>.svg" alt="">`. Na czerni ChatGPT i Grok w wersji jasnej (`gpt-jasny.svg`, `grok-jasny.svg`). Kolor znaku to identyfikacja, nie kolor danych.

### Kolor, linie, wyróżnienia

- Dane w kobalcie: słupek `--bar`, słupek lidera `--pe-kobalt-500`, mapa ciepła w 5 krokach. Tekst w kolorach tekstu, nigdy w kobalcie.
- **Pomarańcz tylko u lidera:** koło `.mk` przy nazwie, na telefonie przy numerze pozycji.
- **Bez czerwieni i zieleni:** znak niesie znaczenie, wzrost w kolorze nagłówków, spadek w szarości, awans w rankingu w kobalcie.
- **Wyróżnienia:** najważniejsza miara (grubość 500 i słupek), najlepszy w wierszu (500), lider (koło). Nic nie jest grubsze niż 500. Bez mapy ciepła kolor nagłówka ma tylko najlepszy w wierszu.
- Linie poziome: `--ln2` między wierszami, `--ln` pod nagłówkiem. Linie pionowe tylko `.gk`: po najważniejszej mierze i na bokach grupy.
- **Logo podmiotu:** kwadrat `.co` 28 px (telefon `.co.cm` 24 px) z linią, w nim logo 20 px (`<img>`). Bez logo pierwsza litera nazwy (`.co.bz`).

### Mapa ciepła

- 5 kroków kobaltu (`.hm1`–`.hm5`) z odstępem 2 px; progi dobierasz do danych i podajesz w legendzie z „%”. Próbki legendy mają obwódkę.
- Domyślnie włączona. Czytelnik wyłącza ją przełącznikiem w legendzie: `<input type="checkbox" class="hm-sw" id="…" checked>` przed tabelą (i przed `.gx`) oraz `<label class="hm-tg" for="…">Mapa ciepła</label>` w `.hm-lg`, bez skryptu. Wyłączona: komórki bez tła, z liniami wierszy.
- W PDF i grafikach do udostępnienia zawsze włączona, bez przełącznika.

### Zachowanie

- Wiersz pod kursorem: nakładka `--hv` na cały wiersz, także na pola mapy ciepła. Pierwsza kolumna wcięta 12 px (telefon 8 px), żeby numer nie stał na krawędzi podświetlenia.
- **Sortowanie i filtrowanie: wzoru jeszcze nie ma.** Do czasu jego przygotowania tabela jest posortowana malejąco po najważniejszej mierze, pozycja `#` wynika z tego sortowania, a opis pod tytułem mówi, po czym jest ranking.

### Telefon

- Tabela mieści się w 350 px (np. T4, pięć kolumn): bez przewijania, nazwy się zawijają.
- Nie mieści się (T3, A2): zamrożone podmiot i najważniejsza miara (`.stk`, `.stk2`), reszta przewija się w bok (`.dmx` > `.dmx-s`). Wskazówka „Przewiń w bok →” z paskiem (`.dmx-cue`) stoi nad przewijaną częścią, zaraz za zamrożonymi kolumnami. Pasek i zanik po prawej śledzą przewijanie przez `animation-timeline`, bez skryptu; starsza przeglądarka pokazuje pasek na początku. Szerokości (164 + 64 zamrożone, 588 razem) i pasek są policzone dla 390 px; przy innym układzie ustaw je na nowo.
- Typ podmiotu pod nazwą, kropka lidera przy numerze.

### Partner

- Tabela z partnerem: wspólny nagłówek w miejscu logo (P1, `guidelines/partner.html`), stopka „Źródło: PromptEye × Partner”.
- Kolor partnera tylko jako druga seria danych (reguły niżej), nigdy w nagłówkach, liniach, ramce ani mapie ciepła. Mapa ciepła zostaje w kobalcie.

### Formaty

- Jasne i ciemne: te same znaczniki w ramce `.t2f` albo `.t2f.dk`.
- Grafika do udostępnienia (B1, 1080 × 1350): `table.dt.xl`, wiersze 24, nagłówki 18, słupek 160 px. Bez rozbicia na modele: cztery kolumny modeli na grafice w kanale miałyby na ekranie telefonu ok. 8 px.
- Ikony modeli w komórkach danych (np. obecność w modelach): jednobarwne, w kolorze tekstu. Brak modelu = ikona przygaszona (`.mic.off`), legenda pod nagłówkiem. Źródło: sprite `assets/llm/sprite.svg` (symbole `llm-gpt`, `llm-gemini`, `llm-perplexity`, `llm-ai-overview`, `llm-claude`, `llm-grok`, `llm-deepseek`). Wklej go raz do strony, potem `<svg class="mic" width="18" height="18" viewBox="0 0 24 24"><use href="#llm-gpt" width="24" height="24"/></svg>`. Bez sprite’a ikony są puste.

## Wykresy

**Który wykres wybrać:**

| Pytanie czytelnika | Wykres | Wzór |
|---|---|---|
| Jak wynik zmienia się w czasie? | linia w czasie | W3 |
| Kto zyskał, a kto stracił względem poprzedniego okresu? | słupki z poprzednim miesiącem | W4 |
| Jak bardzo modele AI różnią się w ocenie? | rozrzut (pasmo min–maks i średnia) | W5 |
| Jak rozkładają się pozycje na liście odpowiedzi? | struktura 100 % | W6 |
| Wiele pozycji w wielu modelach naraz | tabela z grupą modeli i mapą ciepła | T3 |

- Jedna seria wyróżniona kobaltem, porównawcze w szarości, reszta jako tło w jasnej szarości. Bez wielokolorowych legend.
- Podpisy przy końcach linii (wartość i zmiana) zamiast legendy.
- Siatka: ciągłe linie 1 px (`--pe-dzien-linia-2`, na czerni #1E2027), linia zera mocniejsza. Bez linii kropkowanych.
- Oś wartości od zera, jednostka przy podziałce. Osie Inter 13, cyfry tabelaryczne, kolor metadanych.
- **Tytuł to wniosek** („Sopot rośnie najszybciej”), podtytuł podaje miarę i okres, stopka próbę, źródło i adres.
- Rozrzut = pasmo od minimum do maksimum, bez kresek pojedynczych modeli.
- Pomarańcz tylko dla lidera (koło).
- Na bieli: lider kobaltowy słupek (`--pe-kobalt-500`), pozostałe `--pe-kobalt-100` (#C7D1FF); na czerni w granacie.

## Kolory danych

Jedyny wyjątek od tokenów `--pe-*`: zmienne w `css/dane.css`, ustawiane na ramce `.t2f`, osobno na bieli i na czerni (`.t2f.dk`). Nie wpisuj ich ręcznie, używaj klas; ramka dobierze wersję.

| Zmienna, klasa | Do czego |
|---|---|
| `--q1` … `--q4` (`.q1`–`.q4`) | struktura 100 % (W6), przedziały od najważniejszego |
| `--hm1` … `--hm5` (`.hm1`–`.hm5`) | mapa ciepła w tabelach, 5 kroków od najniższej wartości |
| `--up` (`.up`) | wzrost i awans w rankingu (▲) |
| `--rb`, `--rb1` (`.rb`, `.rb1`) | pasmo rozrzutu (W5): pozostałe i wyróżnione |
| `--ctx` (`.ctx`) | serie tła na wykresie liniowym (W3) |
| `--sea` (`.sea`) | pasmo sezonu (W3) |
| `--base` | linia bazowa osi |
| `--hv` | podświetlenie wiersza pod kursorem (T3) |

## Grafiki do udostępnienia

Formaty: 1080 × 1350 (tabela), 1600 × 900 (wykres, prezentacja), 1080 × 1080 (social). Logo, tytuł, źródło i adres są częścią grafiki. Logo w lewym górnym rogu. Stopka: źródło po lewej, adres po prawej, linia 1 px nad nią.

## Partner (raporty wspólne)

- Zapis: **PromptEye × Partner**. Nasz znak pierwszy, „×” w kolorze metadanych. Znak partnera jednobarwny, optycznie równy naszemu.
- P1 wspólny nagłówek: okładka, grafiki do udostępnienia, pierwsza tabela. P2 pasek raportu: pierwsza grafika rozdziału. P3 partner w stopce: pozostałe grafiki.
- Stopka: „Źródło: PromptEye × Partner”, adres na naszej domenie. Jeden partner na grafikę; przy kilku tylko w stopce.

**Kolor partnera w danych (10 reguł):**
1. Zawsze druga seria. Pierwsza w kobalcie, reszta szara. Hierarchię trzymają grubość linii i podpis.
2. Jedna seria, mapa ciepła i skala jednego koloru zostają w kobalcie.
3. Dane partnera (Google, ruch, sprzedaż) = druga seria; kolor wskazuje źródło.
4. Tylko w danych (słupki, linie, punkty, próbki legendy). Nigdy w tekście, tytułach, nagłówkach, ramkach, tłach, przyciskach.
5. Nigdy jako znaczenie (wzrost, spadek, ostrzeżenie).
6. Oryginalny kolor, jeśli ma z tłem co najmniej 3 : 1; jeśli nie, zmieniasz tylko jasność do 3 : 1.
7. Test rozróżnialności z kobaltem: ΔE OKLab ≥ 0,10 (protanopia, deuteranopia), ≥ 0,05 (tritanopia).
8. Kolizje: bliski kobaltowi → drugi kolor partnera albo grafit; bliski pomarańczowi → lider grafitowym kołem; czerwony tylko po teście.
9. Kolor partnera tylko przy jednym partnerze.
10. Pomarańcz zostaje nasz: oznacza wyłącznie lidera.

---

<!-- docs/raporty.md · PL, źródło · https://brand.prompteye.com/pl/anatomia-raportu/ -->

# Anatomia raportu (wstępne wytyczne)

> **Status: wstępne wytyczne, w trakcie tworzenia.** Pierwszy pełny raport branżowy jest w przygotowaniu. Ten dokument opisuje to, co system ma dziś: szablony okładki, hero, otwarcia rozdziału i artykułu. Po ostylowaniu pierwszego raportu zostanie przepisany. Kolejność i układ części to przykład, nie obowiązujący wzór. Kolory, typografia, motyw, tabele i wykresy obowiązują w pełni (`kolor.md`, `typografia.md`, `motyw.md`, `dane.md`).

Raport branżowy to pomiar całej branży: które marki AI poleca w pytaniach zakupowych i jak to się zmienia w czasie. Jego najważniejszą treścią są tabele i wykresy (`dane.md`). Artykuł z raportu na blogu składa się z tych samych części.

## Części raportu

| Część | Z czego się składa | Wzór w systemie |
|---|---|---|
| Okładka | Hero G (`.ah.dk.gt.gt-k`, `data-pe-hero="g"`): ścieżka „Raport · miesiąc rok”, tytuł, lead, metadane (PromptEye, liczba rozdziałów, modeli AI i pozycji), przyciski `b1b` „Pobierz raport” i `b3` „Zobacz rozdziały” | `templates/okladka-raportu` |
| Otwarcie rozdziału | Pasek raportu `.rnav` (logo, nazwa raportu, spis treści, „Udostępnij rozdział”), zakładki podrozdziałów `.rtabs`, na motywie D: „Rozdział 05 z 12”, tytuł, lead i trzy liczby KPI `.kpis` | `templates/rozdzial-raportu` |
| Treść rozdziału | Na bieli (`.t2f.cx-l`): spis treści po lewej `.t2toc` z ramką pełnego raportu `.t2rb`, tekst w kolumnie `.t2art` | `templates/rozdzial-raportu`, `templates/artykul` |
| Najważniejsze wnioski | Ramka `.t2kt` na początku treści: trzy zdania, każde z liczbą | jw. |
| Rycina | Liderzy kategorii jako rycina liniowa: `.t2fig.fgm`, `data-pe-rycina` | `templates/artykul` |
| Tabele i wykresy | Figury `.t2fig`: sygnatura („Tabela 1 · Nad morze”), tytuł (wykres: wniosek; tabela: wniosek albo opis), miara i okres, stopka ze źródłem, próbą i adresem. Tabele składane z warstw, od minimalnej (T4) do złożonej (T3) | `dane.md`, `guidelines/dane.html` |
| Pytania i odpowiedzi | `.t2faq` | `templates/artykul` |
| Komentarze ekspertów | `data-pe-komentarze="raster"` | `komponenty.md` |
| CTA | `.t2end`, `data-pe-cta="raster"`, przycisk `b1a` | `komponenty.md` |
| Czytaj dalej, stopka | `.t2card`, `.t2ft` | `templates/artykul` |
| Grafiki do udostępnienia | B1 tabela 1080 × 1350, B2 wykres 1600 × 900, B3 wykres 1080 × 1080 | `dane.md`, `guidelines/typografia.html` |
| Partner | P1 wspólny nagłówek, P2 pasek raportu, P3 partner w stopce | `dane.md`, `guidelines/partner.html` |

## Co już obowiązuje

- Tytuł rozdziału to nazwa, więc jest **bez kropki** (`typografia.md`). Kadr otwarcia rozdziału ma punkt motywu, więc kropka i tak by się z nim gryzła (`motyw.md`).
- Tytuł wykresu to wniosek, tytuł tabeli to wniosek albo opis. Każda figura ma stopkę: źródło, próba (n), okres, adres (`dane.md`).
- Dane są liniowe, bez kropek motywu. Motyw tylko w okładce, hero, otwarciu rozdziału, komentarzach i CTA.
- Pomarańcz w danych oznacza wyłącznie lidera.
- Teksty według `marka.md`, tylko potwierdzone liczby.
- Tabele według warstw z `dane.md`: od minimalnej (T4) do złożonej (T3, z kolorowymi znakami modeli, logo podmiotu, mapą ciepła z przełącznikiem i wersją na telefon). Ta sama tabela złożona stoi w szablonach artykułu i otwarcia rozdziału.
- Ikony modeli AI w komórkach danych: sprite `assets/llm/sprite.svg` wklejony raz do strony (`dane.md`).

## Do ustalenia przy pierwszym raporcie

- Kolejność części w rozdziale i liczba figur na rozdział.
- Nawigacja między rozdziałami: pasek, zakładki, spis treści.
- Dobór liczb KPI w otwarciu rozdziału.
- Raport na telefonie (dziś są tylko artykuł i tabele na telefonie: `guidelines/typografia.html` A2, `guidelines/dane.html` T3 i T4).
- Układ wersji PDF do pobrania.

Zanim złożysz pełny raport według tego dokumentu, zapytaj zespół PromptEye, czy wytyczne nie zmieniły się po pierwszym raporcie.

## Szablony poza Claude Design

Szablony `templates/*/*.dc.html` działają w Claude Design. Poza nim weź HTML spomiędzy `<x-dc>` i `</x-dc>`, wpisz wartości `{{ … }}` z `renderVals()` (wariant D) i wczytaj `styles.css` oraz cztery skrypty jak w `00-start.md`. Ścieżki `../../assets/` prowadzą do `assets/`.

---

<!-- docs/kontrola.md · PL, źródło · https://brand.prompteye.com/pl/lista-kontrolna/ -->

# Lista kontrolna przed oddaniem

## Tło i motyw

- [ ] Motyw dodany atrybutem (`data-pe-hero`, `data-pe-cta`, …), nie rysowany ręcznie.
- [ ] Kolumna tekstu wskazana (`.ah-in`, `h2` w CTA albo `data-pe-tekst`). `data-pe-uklad` na sekcji ma oczekiwaną wartość.
- [ ] Obiekt nie wchodzi w tekst, wygasa w jego stronę.
- [ ] Gradient naprzeciw tekstu (tekst na dole → G).
- [ ] Gradient dobrany z tabeli „Jak dobrać i ustawić gradient” (`tla.md`): hero, okładka lub nagłówek bez motywu = G5 łukiem, rozciągnięty.
- [ ] Przejście gradientu zajmuje co najmniej połowę kadru. Nie ma wąskiego paska koloru pod tekstem.
- [ ] Strona w jasnym i ciemnym motywie: nagłówki i gradienty są takie same w obu.
- [ ] Hero: tytuł i lead do 3 linii.
- [ ] Tekst nie stoi na kolorze. Jeśli sekcja ma `data-pe-czytelnosc` większe niż ok. 0,15, tekst jest za długi na kadr: skróć tytuł lub lead albo powiększ kadr.
- [ ] Jasne F: rama według miejsca (www / pudełko / bez ramy), bez mieszania w serii.
- [ ] Siatka kropek tylko na jednolitym tle, nie pod tekstem, nie razem z motywem.
- [ ] Brak gradientów CSS bez ziarna.

## Kolor

- [ ] Tylko tokeny `--pe-*` (albo wartości z `tokens.json`).
- [ ] **Pomarańcz** (`kolor.md`, punkt 2): kropka po tytule nigdy z punktem motywu; przy `b1a` bez kropki po tytule i bez punktów w przyciskach obok; w danych tylko lider.
- [ ] Pomarańcz nie jest tekstem ani tłem. Kobalt nie wypełnia przycisku.
- [ ] Mały tekst ma kontrast ≥ 4,5 : 1 (linki na bieli: Kobalt 600).

## Typografia i układ

- [ ] Geist w nagłówkach, Inter w tekście. Bez trzeciego kroju (poza e-mailem).
- [ ] Rozmiary i marginesy z tabeli formatów (`uklad.md`), pismo zaokrąglone do 4 px.
- [ ] `.dot` tylko w nagłówkach-hasłach; tytuł-pytanie bez kropki.
- [ ] Polskie zasady: `data-pe-typo` albo ręcznie (spacja przed %, spójniki).
- [ ] Logo: właściwy wariant (kolor / biały), właściwy róg, min. 14 px.

## Treść

- [ ] „Poleca”, nie „widać”; efekt, nie czynność (`marka.md`).
- [ ] Liczby tylko potwierdzone. Bez „93 na 100”.
- [ ] Przyciski: czasownik + rzecz, maks. 3 słowa, jeden poziom 1 na sekcję.

## Dane i raporty

- [ ] Tytuł wykresu to wniosek. Tytuł tabeli to wniosek albo opis; tabela w tekście może być bez tytułu i figury. Figura ma stopkę: źródło, próba (n), okres, adres.
- [ ] Ikony modeli z `assets/llm/sprite.svg`, wklejonego raz do strony. Bez niego ikony są puste.
- [ ] Kolory danych z klas `css/dane.css` (`.q1`–`.q4`, `.hm1`–`.hm5`, `.up`), nie wpisane ręcznie.
- [ ] Tytuł rozdziału raportu bez kropki: to nazwa, nie hasło.
- [ ] Strona z blokami systemu wczytuje Geist i Inter (`styles.css` albo Google Fonts jak w arkuszach).
- [ ] Tabela złożona z warstw z `dane.md`, każda dodana z powodu. Każda wartość procentowa ma „%” przy liczbie, liczby stoją w polach `.lv` i przecinki są jeden pod drugim.
- [ ] Najlepszy model w wierszu nie jest grubszy niż najważniejsza miara. Po wyłączeniu mapy ciepła linie wierszy są widoczne.
- [ ] Nowa klasa w `css/` nie powtarza nazwy, która już jest w systemie (np. `.kl`, `.l`, `.v`, `.s`); sprawdź w `css/` i `guidelines/css/`.
- [ ] Tabela na telefonie: nazwy firm są całe (zawijają się, nie ucinają), kropka lidera stoi przy numerze.
- [ ] Szerokości kolumn w `style` na komórkach nagłówka, nie w `<colgroup>`: Claude Design go wyrzuca.

## Eksport i zrzuty

- [ ] PDF, PNG, druk: `data-pe-static` i `await PEmotyw.ready`.
- [ ] Czarny kadr bez kropek = motyw nie wystartował. Wywołaj `PEmotyw.init(document)`. Nie dorysowuj.

## Style strony

- [ ] Style strony (np. `.strona h1 {…}`) nie przeciekają do sekcji systemu. Ogólne selektory piszesz z zakresem (`.strona > header h1`), inaczej nadpisują `.ah-in h1` i hero dostaje zły rozmiar tytułu.

## Najczęstsze błędy

| Błąd | Poprawnie |
|---|---|
| kropki lub mapa narysowane w SVG/CSS | atrybut `data-pe-hero`, rysuje skrypt |
| tekst na środku kadru nad motywem | tekst po lewej, u góry albo na dole; obiekt przy prawej krawędzi |
| kropka po tytule obok punktu motywu | tytuł bez kropki |
| siatka kropek na gradiencie (hero z `tla.html`) | siatka tylko na jednolitym tle |
| gradient ściśnięty w pasek pod tekstem (G3 jako podkreślenie) | G5 rozciągnięty, miejsce na tekst z kadru (`tla.md`) |
| kropka po każdym tytule strony lub rozdziału | `.dot` tylko po nagłówku-haśle (`typografia.md`) |
| `b1a` w nawigacji, także w jasnym hero F | w nawigacji `b1b` (`komponenty.md`, punkt 4) |
| `assets/prompteye-logo-white.svg` wzięte jako logo jednobarwne | pakiet `assets/logo/svg/` (`logo.md`): stary plik to logo w kolorze na ciemne tło |
| kolory „na oko” (#3366FF, #FF6600) | tokeny z `kolor.md` |
| hero z `archive/` lub `explorations/` | tylko `docs/`, `guidelines/`, `templates/` |
| `<use href="#llm-gpt">` bez sprite’a w dokumencie: puste ikony modeli | wklej `assets/llm/sprite.svg` raz do strony (`dane.md`) |
| kropka po nazwie rozdziału raportu | tytuł rozdziału bez kropki (`typografia.md`) |
| pojedyncze pliki CSS bez fontów: Geist i Inter zastąpione fontem systemowym | `styles.css` albo link do Google Fonts |