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

# MVP motif

**AI recommends your brand in the questions that bring customers.** The field of dots is the market of questions. The object emerging through light (the map of Poland) is the questions that bring customers. The orange point is the brand recommended by AI.

Pattern: `guidelines/motyw.html` (1440 compositions), `guidelines/uklad.html` (formats). Settings: `js/pe-motyw.js` (the only place for changes).

**The script draws the motif.** You do not draw dots, raster, map or point in SVG, CSS or your own canvas. You add an attribute and the script does the rest.

## Attributes

| Attribute | On | What it does |
|---|---|---|
| `data-pe-hero="d"` | dark section (`.dk`) | arc from the bottom, raster. Default for article, report, slide |
| `data-pe-hero="f"` | light section (`.ahl.cx-l`) | straight gradient white → black from the bottom, grey raster |
| `data-pe-hero="g"` | dark section (`.dk`) | arc from the top, text at the bottom. Covers and social |
| `data-pe-hero="e"` | dark section (`.dk`) | outline made of dots. Category pages, smaller sections |
| `data-pe-cta="raster|obrys"` | section `.t2end` | dark CTA, cropped part of the object with the point |
| `data-pe-komentarze="raster|obrys"` + `data-kolor="szary|niebieski"` | section `.kx` (white) | small grey element at the right edge |
| `data-pe-rycina` | `div.fgm-b` in a figure | linear figure for data: outline, arcs, one point |
| `data-pe-obiekt="ksiazka"` | section with `data-pe-hero="d"` | **prototype:** an open book instead of the map of Poland (header of the brand book’s start page). Do not use in materials without asking |
| `data-pe-tekst` | element in the section | the text column the motif avoids. Optional value: `lewo|gora|dol` (left, top, bottom) |
| `data-pe-gradient="luk|prosty"` | section | arc or straight (equivalent). Default arc in D, G, E, CTA; straight in F |
| `data-pe-rama="pudelko|brak"` | section F | frame of the light F (`uklad.md`): box or none |
| `data-pe-static` | section | no animation: PDF, print, export, screenshot |
| `data-pe-typo` | any container | Polish typography correction P1 (`typografia.md`) |

The script writes the detected layout to `data-pe-uklad` (`lewo|gora|dol`), the marker `data-pe-ok` (section drawn) and `data-pe-czytelnosc` (how much it moved the gradient below the text; absent = no shift).

## Geometry (computed from the frame)

- Patterns: hero 1440 × 860, CTA 1440 × 560. Object scale s = √(W·H) / √(pattern). When text stands next to the object, min(s, H / pattern height).
- The object is always at the right edge, partly outside the frame.
- The gradient comes from the edge opposite the text: D, F, E, CTA from the bottom; G from the top.
- Mask: the object fades towards the text column and leaves breathing space.
- **Text column:** by default `.ah-in` in the hero and `h2` in the CTA. In any other layout mark it with `data-pe-tekst`. The layout is detected automatically: text on the left (`lewo`), above the object (`gora`), below the object (`dol`). To force it: `data-pe-tekst="gora"`.
- The motif works in any container with `data-pe-hero` or `data-pe-cta` and the dimensions of the format.
- **Legibility (automatic):** text never stands on colour. The script checks the contrast of every text in the column against the gradient below it (≥ 4.5 : 1, from 24 px ≥ 3 : 1; buttons with their own background are skipped) and, if needed, moves the start of the gradient below the text. The gradient then covers at least 0.3 of the frame height.
- **Text length in the hero:** title up to 3 lines, lead up to 3 lines (about 150 characters), meta in one line. The column then ends at about 70 % of the frame height (in 1440 × 860 at about 600 px), and the script moves the gradient by a few per cent at most. Do not force the title into 2 lines (long words, other languages). Longer text stays legible, but the gradient shrinks to a band at the edge.

## Rules (1–12)

1. **Two levels:** raster fill (hero, covers, CTA) and dot outline (category pages, smaller sections).
2. **Grid and shape:** 10 px grid, six dot sizes, the dot is always a circle.
3. **Colour on dark:** #1B2B9C → #8DA1FF, no white. **On white:** grey #E4E5E9 → #8A8E97.
4. **Point:** one orange point per element, a 5 px circle fitted into the grid, the dots below it removed. The first leader not covered by the gradient or the mask.
5. **Object:** large, partly in the frame, scale −13 % from the original, from the right edge. It fades towards the text and never enters the text column.
6. **Small dots outside the object:** follow the shape for about 160 px, slightly ragged, half the size and about 40 % closer to the background in colour (`POLE.fk` = 0.62).
7. **Text does not stand on colour:** the gradient starts below the text column (the script takes care of it, see Geometry).
7a. **Gradient over the motif:** the object hides beneath it, the dots shrink, take the colour of the gradient and disappear in the grain.
8. **Gradient direction:** opposite the text. Gradients stretched and smooth.
9. **Light F:** frame according to `uklad.md` (web, box, no frame).
10. **Data:** tables, charts and figures are linear, without motif dots.
11. **Animation:** only the filling with dots, about 2.5 s, the point at the end. No scan and no loop. Clicking the section replays it.
12. **White in sections** (comments, FAQ): a small grey element at the edge.

**Orange:** if the frame has the motif point, the title has no dot. Other rules: `kolor.md`, point 2. A CTA with the motif and a `b1a` button (motif point next to the Moment button) is a composition from `motyw.html`.

## Running

- On a normal page the motif starts by itself (first frame or 80 ms).
- Content added later (React, SPA): `PEmotyw.init(root)` after mounting. A section with `data-pe-ok` is skipped; to redraw it, remove `data-pe-ok`.
- Export, PDF, screenshot: `data-pe-static` and `await PEmotyw.ready`.
- **A black frame without dots** means the motif has not started yet (for example a background tab). Do not draw it. Call `PEmotyw.init(document)`.

## MVP limitations

The object is the map of Poland. A prototype of another object: `data-pe-obiekt="ksiazka"` in the header of the brand book’s start page; objects are drawn by the `PEobiekty` registry in `js/pe-pl.js` (parts, inner lines, leaders with the brand point). Rules for designing section objects are in preparation. Very small formats (shorter side below about 400 px) give a small object, because the grid has a fixed 10 px; use the dot grid or the plain background there. Looping animation and other objects: to be developed with the website. Postponed directions: `explorations/Motyw - odłożone.html` (do not use).