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

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