> **PromptEye Brand Book & Design Language** · Layout and formats · EN (translation of the Polish source; the Polish file wins on conflict) · state 28.10.2026
> For people: https://brand.prompteye.com/en/layout/ · Polish source: https://brand.prompteye.com/pl/uklad.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`.

# Layout and frame

Pattern: `guidelines/uklad.html`. Tokens: `tokens/layout.css`.

## One scale

**s = √(W · H) / 1113**, where 1113 = √(1440 · 860). The 1440 × 860 web hero has s = 1.

Every new format is derived from the reference with the same s: margin, spacing, type and the motif. Round type to 4 px and spacing to 8 px. The motif computes itself (when text stands beside the object, the motif scale is min(s, H / 860)).

## Grid

- **Web, slide, OG, LinkedIn:** 12 columns.
- **Posts (1080 × 1350, 1080 × 1080):** 6 columns.
- Web: margin 48, gutter 24, column 90, content 1344. Text column 660 = 6 columns; hero column 680.
- Vertical spacing in steps of 8: 8, 16, 24, 32, 48, 64, 96, 128 (`--pe-o-1…8`).
- Corner radius: 2 px (`--pe-promien`). No pills.
- Hero: title and lead up to 3 lines, the bottom of the text column at about 70% of the frame height, so the gradient keeps its scale (`motyw.md`, Legibility).

## Formats

| Format | s | Motif scale | Margin | Columns · gutter | Logo | H1 | Lead | Small text | Motif |
|---|---|---|---|---|---|---|---|---|---|
| Web hero 1440 × 860 | 1 | 1 | 48 | 12 · 24 | 22 | 64 | 21 | 14 | D, F, E · G on a cover |
| Slide 1920 × 1080 | 1.29 | 1.26 | 64 | 12 · 32 | 28 | 80 | 28 | 20 | D, E, boxed F · G on a cover |
| Post 1080 × 1350 | 1.09 | 1.09 | 72 | 6 · 24 | 32 | 72 | 28 | 22 | D text at the top · G text at the bottom · F without frame |
| Post 1080 × 1080 | 0.97 | 0.97 | 72 | 6 · 24 | 32 | 64 | 26 | 20 | as above |
| OG 1200 × 630 | 0.78 | 0.73 | 64 | 12 · 16 | 28 | 56 | 24 | 20 | D · F without frame |
| LinkedIn cover 1584 × 396 | 0.71 | 0.46 | 56 | 12 · 24 | none | 52 | – | – | D, text from 400 px |

A format not in the table: take the closest one (channel and proportions) and multiply its values by the new s ÷ the s from the table.

## Logo

Top left corner on the margin. In G (text at the bottom) the logo sits below the text, in the bottom left corner. Details: `logo.md`.

## The light F frame

| Variant | Attribute | When |
|---|---|---|
| web | no attribute | hero F on the website: frame on the sides (48), the white page closes the bottom |
| B · box | `data-pe-rama="pudelko"` | a standalone page: slide, report, print |
| C · no frame | `data-pe-rama="brak"` | a platform tile: post, OG, banner |

- Frame = the format margin (`--pe-rama` on the section).
- The text stands one margin inside the frame (in B: frame margin + margin).
- Never mix B and C within one series or document.
- Dark D, G, E never have a frame.

## Safe areas

- LinkedIn cover: the bottom left corner (about 56–256 px from the left, from 250 px from the top) is covered by the profile photo. Text from 400 px.
- Roll-up: content from 30 to 140 cm measured from the top, the bottom 60 cm background only.