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

# Checklist before delivery

## Background and motif

- [ ] The motif is added with an attribute (`data-pe-hero`, `data-pe-cta`, …), not drawn by hand.
- [ ] The text column is marked (`.ah-in`, `h2` in a CTA or `data-pe-tekst`). `data-pe-uklad` on the section has the expected value.
- [ ] The object does not enter the text, it fades towards it.
- [ ] The gradient sits opposite the text (text at the bottom → G).
- [ ] The gradient is chosen from the table "Jak dobrać i ustawić gradient" (`tla.md`): a hero, cover or header without the motif = G5 as an arc, stretched.
- [ ] The gradient transition covers at least half of the frame. There is no narrow strip of colour under the text.
- [ ] A website with light and dark themes: headers and gradients are the same in both.
- [ ] Hero: title and lead up to 3 lines.
- [ ] Text does not stand on colour. If the section has `data-pe-czytelnosc` above about 0.15, the text is too long for the frame: shorten the title or lead, or enlarge the frame.
- [ ] Light F: frame according to where it is used (web / box / no frame), never mixed within a series.
- [ ] The dot grid only on a solid background, never under text, never together with the motif.
- [ ] No CSS gradients without grain.

## Colour

- [ ] Only `--pe-*` tokens (or values from `tokens.json`).
- [ ] **Orange** (`kolor.md`, point 2): the headline dot never with the motif point; next to `b1a` no headline dot and no points in the buttons beside it; in data only the leader.
- [ ] Orange is never text or background. Cobalt never fills a button.
- [ ] Small text has contrast ≥ 4.5 : 1 (links on white: Cobalt 600).

## Typography and layout

- [ ] Geist for headings, Inter for text. No third typeface (except e-mail).
- [ ] Sizes and margins from the table of formats (`uklad.md`), type rounded to 4 px.
- [ ] `.dot` only in slogan headlines; a question headline has no dot.
- [ ] Polish typesetting: `data-pe-typo` or by hand (space before %, one-letter words).
- [ ] Logo: the right variant (colour / white), the right corner, min. 14 px.

## Content

- [ ] "Recommends", not "visible"; the effect, not the activity (`marka.md`).
- [ ] Only confirmed numbers. No "93 out of 100".
- [ ] Buttons: verb + object, max. 3 words, one level-1 button per section.

## Data and reports

- [ ] The title of a chart is a conclusion. The title of a table is a conclusion or a description; a table in text may have no title and no figure. A figure has a footer: source, sample (n), period, address.
- [ ] Model icons from `assets/llm/sprite.svg`, pasted into the page once. Without it the icons are empty.
- [ ] Data colours from the classes in `css/dane.css` (`.q1`–`.q4`, `.hm1`–`.hm5`, `.up`), not typed in by hand.
- [ ] A report chapter title has no dot: it is a name, not a slogan.
- [ ] A page with system blocks loads Geist and Inter (`styles.css` or Google Fonts as in the sheets).
- [ ] A table is built from the layers in `dane.md`, each added for a reason. Every percentage value has "%" next to the number, numbers sit in `.lv` fields and the decimal commas line up.
- [ ] The best model in a row is not heavier than the main measure. With the heat map off, the row lines are visible.
- [ ] A new class in `css/` does not repeat a name already in the system (e.g. `.kl`, `.l`, `.v`, `.s`); check `css/` and `guidelines/css/`.
- [ ] A table on a phone: company names are whole (they wrap, they are not cut), the leader dot stands next to the rank number.
- [ ] Column widths in `style` on the header cells, not in `<colgroup>`: Claude Design drops it.
- [ ] Sorting and the model filter only where a script runs (the report page). In PDF, a graphic and an article the table has no markers and is sorted by the main measure.
- [ ] The sort marker stands right after the last word of the header (`.so-t`), not at the column edge, and does not stick out of the cell. Under the headers there is one 2 px line: under the column you sort by.
- [ ] With a model switched off, visibility, `#` and the leader are recalculated, and the average position and opens-the-list are dimmed, with a note under the toolbar.

## Export and screenshots

- [ ] PDF, PNG, print: `data-pe-static` and `await PEmotyw.ready`.
- [ ] A black frame without dots = the motif has not started. Call `PEmotyw.init(document)`. Never draw it yourself.

## Page styles

- [ ] Page styles (e.g. `.strona h1 {…}`) do not leak into system sections. Write general selectors with a scope (`.strona > header h1`), otherwise they override `.ah-in h1` and the hero gets the wrong title size.

## Common mistakes

| Mistake | Correct |
|---|---|
| dots or a map drawn in SVG/CSS | the `data-pe-hero` attribute, the script draws it |
| text in the middle of the frame over the motif | text on the left, at the top or at the bottom; the object at the right edge |
| a headline dot next to the motif point | the title without the dot |
| a dot grid on a gradient (hero from `tla.html`) | the grid only on a solid background |
| a gradient squeezed into a strip under the text (G3 as an underline) | G5 stretched, room for text from the frame (`tla.md`) |
| a dot after every page or chapter title | `.dot` only after a slogan headline (`typografia.md`) |
| `b1a` in navigation, also in the light hero F | `b1b` in navigation (`komponenty.md`, point 4) |
| `assets/prompteye-logo-white.svg` taken as the one-colour logo | the set in `assets/logo/svg/` (`logo.md`): the old file is the colour logo for dark backgrounds |
| colours "by eye" (#3366FF, #FF6600) | tokens from `kolor.md` |
| a hero from `archive/` or `explorations/` | only `docs/`, `guidelines/`, `templates/` |
| `<use href="#llm-gpt">` without the sprite in the document: empty model icons | paste `assets/llm/sprite.svg` into the page once (`dane.md`) |
| a dot after a report chapter name | the chapter title without a dot (`typografia.md`) |
| single CSS files without fonts: Geist and Inter replaced by a system font | `styles.css` or a link to Google Fonts |