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

# Dane: tabele, wykresy, partner

Wzory 1:1: `guidelines/dane.html` (T4 tabela minimalna, T3 tabela złożona na komputer i telefon, T3 z sortowaniem i filtrem modeli `#t3f`, 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ą i linią 2 px pod spodem, słupek `.vb` | 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) |
| 9. Sortowanie i filtr | pasek `.dt-tb` (widok `.dt-seg`, lista modeli `.dt-dd`), przyciski `.so` w nagłówkach, `table.dt.srt`, widok wykresu `.dt.wk` (`#t3f`) | tylko na stronie raportu, gdzie działa skrypt (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. Remis (ta sama wartość po zaokrągleniu do wyświetlanego miejsca po przecinku): ta sama pozycja, a następna ją przeskakuje (1, 2, 2, 4). Kolejność remisujących wierszy alfabetyczna; przy remisie na 1. miejscu koło lidera mają oba.
- **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, linia 2 px pod nagłówkiem. Bez linii pionowej po kolumnie: linia pod nagłówkiem to ta sama, którą sortowanie oznacza aktywną kolumnę, a tabela jest domyślnie posortowana po najważniejszej mierze. 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 (690 px z sortowaniem: widoczność 74, średnia pozycja 68, modele po 80), 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, słupek, linia pod nagłówkiem), 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` na bokach grupy kolumn. Pod nagłówkiem najważniejszej miary (albo kolumny, po której sortujesz) linia 2 px w kolorze nagłówków.
- **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.
- **Tabela bez sortowania** (PDF, grafika, artykuł, strona bez skryptu) jest posortowana malejąco po najważniejszej mierze, pozycja `#` wynika z tego sortowania, a opis pod tytułem mówi, po czym jest ranking.

### Sortowanie i filtr (warstwa 9)

Wzór `#t3f` w `guidelines/dane.html`: stan domyślny, model wyłączony z otwartą listą, widok wykresu, ciemne, telefon. Tylko na stronie raportu: kolejność wierszy i przeliczenia robi skrypt strony, CSS daje wygląd i stany.

```html
<div class="dt-tb">
  <div class="dt-seg" role="group" aria-label="Widok"><button type="button" aria-pressed="true">Tabela</button><button type="button" aria-pressed="false">Wykres</button></div>
  <div class="dt-dd">
    <button type="button" class="dt-dd-t" aria-expanded="false" aria-controls="t1-modele">Modele AI <span>wszystkie</span><i></i></button>
    <div class="dt-dd-p" id="t1-modele" role="group" aria-label="Modele AI" hidden>
      <label class="dt-dd-o"><input type="checkbox" checked><b></b><img src="assets/llm/gpt.svg" alt=""><span>ChatGPT</span></label>
      …
      <div class="dt-dd-f"><button type="button">Zaznacz wszystkie</button></div>
    </div>
  </div>
</div>
<!-- nagłówek, po którym można sortować; aktywny: class="s-dn" (malejąco) albo "s-up" i aria-sort -->
<th class="n mg s-dn" aria-sort="descending" style="width:190px"><button type="button" class="so">Widoczność<small>wszystkie <span class="so-t">modele<span class="so-i" aria-hidden="true"></span></span></small></button></th>
<th class="n" style="width:108px"><button type="button" class="so"><span class="sl">Średnia</span><span class="sl"><span class="so-t">pozycja<span class="so-i" aria-hidden="true"></span></span></span></button></th>
```

- **Pasek nad tabelą** (`.dt-tb`, między nagłówkiem figury a tabelą): przełącznik widoku Tabela | Wykres (`.dt-seg`) i lista „Modele AI” z polami wyboru (`.dt-dd`). Oba w tonie przycisku b2, aktywny segment na kolorze karty. Etykieta listy mówi, ile modeli jest włączonych („wszystkie”, „3 z 4”). Lista zamyka się kliknięciem obok i klawiszem Esc; „Zaznacz wszystkie” wraca do pełnej tabeli. Nie da się wyłączyć ostatniego modelu.
- **Znacznik sortowania:** nagłówek to przycisk `.so`, a znacznik `.so-i` wisi za ostatnim słowem nagłówka (w `.so-t`), 4 px od tekstu, na telefonie 3 px. Nie zajmuje miejsca, więc nazwa zostaje wyśrodkowana pod znakiem modelu, a znaczniki wszystkich kolumn stoją w jednym rzędzie. Rysunek: dwie cienkie strzałki, jak strzałka listy modeli, w kolorze metadanych.
- **Aktywna kolumna:** `th.s-dn` (malejąco) albo `th.s-up` (rosnąco) i `aria-sort`: jedna strzałka w kolorze nagłówków i linia 2 px pod nagłówkiem. Linia jest jedna: gdy sortujesz po innej kolumnie, znika spod najważniejszej miary.
- **Po czym sortować:** po nazwie i po każdej kolumnie z liczbą. Nie po pozycji `#` (wynika z najważniejszej miary) ani po typie. Domyślnie malejąco po najważniejszej mierze. Pierwsze kliknięcie: liczby malejąco, nazwa i średnia pozycja rosnąco (najlepsza na górze); drugie kliknięcie odwraca kierunek.
- **Wyłączony model:** kolumna przygaszona, bez mapy ciepła (`.wyl` na `th` i `td`), nie da się po niej sortować (`disabled`). Widoczność przelicza się z włączonych modeli (średnia ważona liczbą odpowiedzi modelu), a za nią pozycja `#`, słupki, lider i najlepszy w wierszu. Druga linia nagłówka mówi, z ilu modeli („3 z 4 modeli”).
- **Miary liczone ze wszystkich modeli** (średnia pozycja, otwiera listę) przy wyłączonym modelu się wygaszają (`.wyg`, `disabled`), bo nie da się ich przeliczyć bez danych na model. Nota `.dt-nt` pod paskiem mówi dlaczego. Gdy dane mają te miary osobno dla każdego modelu, przeliczasz je jak widoczność i niczego nie wygaszasz. Jeśli sortowanie stało na mierze, która się wygasza, wraca na najważniejszą miarę.
- **Widok wykresu** (`table.dt.srt.wk`): #, podmiot, typ i najważniejsza miara jako długi słupek (tor 560 px = 100 %, na telefonie 108 px), bez rozbicia na modele. Sortowanie po nazwie albo po mierze; inne sortowanie przy przejściu na wykres wraca na miarę. Filtr modeli działa tak samo.
- **Telefon:** ten sam pasek (mniejsze przyciski), tabela `.dt.srt` ma szersze kolumny (690 px), więc wskazówka przewijania to `.dmx-cue.srt`.

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