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

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