> **PromptEye Brand Book & Design Language** · Formats · EN (translation of the Polish source; the Polish file wins on conflict) · state 28.10.2026
> For people: https://brand.prompteye.com/en/formats/ · Polish source: https://brand.prompteye.com/pl/formaty.md · index for agents: https://brand.prompteye.com/llms.txt
> File paths are relative to https://brand.prompteye.com/ds/ (e.g. `tokens/colors.css` → https://brand.prompteye.com/ds/tokens/colors.css); `*.md` references resolve to https://brand.prompteye.com/ds/docs/en/ (translations) or https://brand.prompteye.com/ds/docs/ (Polish source). Outside Claude Design load `styles.css` and the scripts `js/pe-light.js`, `js/pe-pl.js`, `js/pe-raster.js`, `js/pe-motyw.js` (in this order) instead of `_ds_bundle.js`.

# Formats: what you build → which blocks

Values (margin, type, logo) from the table in `uklad.md`. The skeleton code assumes `styles.css` and the four scripts from `js/` are loaded (`00-start.md`; in Claude Design `_ds_bundle.js`). Adjust the paths to `assets/` to your project.

## The decision in three questions

1. **Does the frame have the motif object?** Cover, hero, title slide, slogan post, CTA → yes (`data-pe-hero` / `data-pe-cta`). Content slide, quote or number post, business card → no (dot grid or a plain background, `tla.md`). Data → a linear figure or a chart (`dane.md`).
2. **Dark or light?** Dark D by default. Covers and social posts with text at the bottom → G. Light → F (frame: `uklad.md`).
3. **Where does the text stand?** On the left or at the top → D/F/E. At the bottom → G. Mark the column with `data-pe-tekst`.

## Web hero and article

Ready: `templates/hero-raportu`, `templates/artykul`. Structure: `komponenty.md` (Hero).

## Title slide 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">Report · Tourism</div>
    <h1 style="font-size:80px">Where does AI send Poles to the seaside?</h1>
    <p style="font-size:28px;max-width:760px">12,000 answers from seven AI models.</p>
  </div>
</section>
```

Light slide: `class="ah ahl cx-l" data-pe-hero="f" data-pe-rama="pudelko" style="…;--pe-rama:64px"`, colour logo, logo and text from 128 px (frame + margin).

## Content slide 1920 × 1080 (no motif)

```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)">At the seaside AI recommends three brands<span class="dot"></span></h1>
</div>
```

`data-dm` cuts the dots out from under the text. The title has the dot because it is a slogan (`typografia.md`); a label title such as "Three conclusions from the report" would have none.

## Post 1080 × 1350

**Text at the top (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">Where does AI send Poles to the seaside?</h1><p style="font-size:28px;max-width:800px">12,000 answers from seven AI models.</p></div>
</section>
```

**Text at the bottom (G):** `class="ah dk gt" data-pe-hero="g"`, `.ah-in` with `left:72px;bottom:152px;top:auto;width:936px`, logo at `left:72px;bottom:72px`.

**Light (F, no frame):** `class="ah ahl cx-l" data-pe-hero="f" data-pe-rama="brak"`, colour logo.

Post 1080 × 1080: the same, 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">Where does AI send Poles to the seaside?</h1></div>
</section>
```

Export to PNG: add `data-pe-static`, wait for `await PEmotyw.ready`.

## LinkedIn cover 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">See how AI recommends your brand</h1></div>
</section>
```

No logo in the frame. Text from 400 px (profile photo).

## CTA (page, last slide)

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

## Print

- **Flyer, A4 offer:** light F in a box (`data-pe-rama="pudelko"`) or white with text. A4: body 11 pt, 20 mm margins, one orange. Always `data-pe-static`.
- **Roll-up 85 × 200 cm:** D, text at the top (`data-pe-tekst="gora"`), content from 30 to 140 cm measured from the top, the bottom 60 cm background only.
- **Business card 85 × 55 mm:** front = dot grid on black with the logo, back = white with the details. Name Geist 500 10 pt, the rest Inter 7 pt.
- Templates: `guidelines/kanaly.html` (D1–D3).

## E-mail

Arial (Geist and Inter do not work in mail clients), 13–15 px, the logo as an image. Template: `guidelines/kanaly.html` (D6).