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

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

## Pasek nad tabelą: widok i lista modeli

Dwie kontrolki do widoków danych na stronie raportu, w tonie przycisku b2 (na bieli ciemne szkło, na czerni jasne). Pełny wzór: `guidelines/dane.html` `#t3f`, zasady: `dane.md`, warstwa 9.

```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>
```

- `.dt-seg`: przełącznik dwóch lub trzech widoków; aktywny segment (`aria-pressed="true"`) na kolorze karty. Nie zastępuje przycisków akcji.
- `.dt-dd`: lista z polami wyboru; etykieta mówi, ile pozycji jest zaznaczonych. Otwarta: `aria-expanded="true"` i bez `hidden`.
- Działają w ramce danych `.t2f` (jasnej i ciemnej). Prostokąt z rogiem 2 px, Inter 500 13, bez pigułek.

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