# PromptEye Brand Book & Design Language · full documentation (EN)

State 28.10.2026. Index: https://brand.prompteye.com/llms.txt. File paths are relative to https://brand.prompteye.com/ds/. 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`. Where a document is not translated yet, the Polish source is included.

# PromptEye Brand Book & Design Language (identity v2)

State: 28.10.2026. Always-current online version: https://brand.prompteye.com/llms.txt. Brand Book & Design Language for people: https://brand.prompteye.com/en/ (English), https://brand.prompteye.com/pl/ (Polish).

This folder mirrors https://brand.prompteye.com/ds/. Relative paths below resolve against this folder offline, or against https://brand.prompteye.com/ds/ online.

## Language

The documentation in `docs/` is written in Polish and is the source of truth. English translations of every file are in `docs/en/`. Where a translation differs from the Polish file, the Polish file wins. Write the user's material in the user's language. Class names, attributes and tokens are Polish words (`--pe-kobalt`, `data-pe-hero`, `.dot`): use them exactly as written.

## Read in this order

1. `docs/00-start.md`: principles, priority of sources, file map.
2. `docs/formaty.md`: what you are building → which blocks, with ready HTML skeletons per format.
3. The block you use: `marka.md` (idea, messaging, vocabulary), `logo.md`, `kolor.md`, `typografia.md`, `uklad.md` (layout, table of formats), `tla.md` (backgrounds), `motyw.md` (dot motif), `komponenty.md`, `dane.md` (tables, charts, data colours, AI model icons, partner reports), `raporty.md` (report anatomy, preliminary).
4. `docs/kontrola.md`: checklist before you deliver.

`guidelines/*.html` are 1:1 reference sheets. Copy blocks from them (for example `#t3`, `#w3` in `guidelines/dane.html`) and replace the content.

## Loading in HTML

The docs mention `_ds_bundle.js`. That file exists only inside Claude Design. Everywhere else load:

```html
<link rel="stylesheet" href="styles.css">
<script src="js/pe-light.js"></script>
<script src="js/pe-pl.js"></script>
<script src="js/pe-raster.js"></script>
<script src="js/pe-motyw.js"></script>
<!-- only if you use <image-slot>: <script src="image-slot.js"></script> -->
```

Hosted alternative: `https://brand.prompteye.com/ds/styles.css` and `https://brand.prompteye.com/ds/js/…` in the same order. The React `Logo` component mentioned in `docs/logo.md` also exists only in Claude Design. Use the SVG files from `assets/logo/svg/`.

## Rules you never break

- The motif is added with an attribute (`data-pe-hero`, `data-pe-cta`, `data-pe-komentarze`, `data-pe-rycina`) and the text column is marked with `data-pe-tekst`. The script draws the motif, never you: no dots, raster, map or point in SVG, CSS or your own canvas.
- Orange (#FD723A) is the exception, not decoration. The dot after a headline (`.dot`) never appears in a frame with the motif point. Next to the `b1a` button there is no headline dot and no points in neighbouring buttons. In data only the leader is orange. Orange is never text or background.
- The headline dot (`.dot`) goes only after a slogan headline. Never after every heading, page title or chapter title, never after a question.
- `b1a` (orange) closes an article or a page, only on black. Never in navigation, also not in the light hero F: there the navigation button is `b1b`.
- Colours only from `--pe-*` tokens (`tokens/colors.css`, `tokens.json`). Gradients only from `js/pe-light.js` (with grain), never a CSS gradient.
- Choose the gradient from the table "Jak dobrać i ustawić gradient" in `docs/tla.md`. A hero, cover or page header without the motif uses G5 as an arc, stretched like the hero D light. The transition covers at least half of the frame: never squeeze a gradient into a strip under the text. Make room for text by enlarging the frame, not by shortening the gradient. Light and dark site themes use the same header and gradient.
- The dot grid goes only on a solid background, never together with the motif.
- Data (tables, charts) is always linear, without motif dots. AI model icons come from the sprite `assets/llm/sprite.svg`, pasted once into the page (without it `<use href="#llm-…">` draws nothing). Data colours come from the classes in `css/dane.css`, never typed in by hand.
- A report chapter title is a name, not a slogan: no headline dot.
- Fonts: Geist (headlines, numbers) and Inter (text, data). No third typeface. E-mail is the exception: Arial.
- Messaging follows `docs/marka.md`: "AI recommends your brand" (not "visibility"), the effect rather than the activity, only confirmed numbers.

## Export and screenshots

Add `data-pe-static` to the section and `await window.PEmotyw.ready`. A black frame without dots means the motif has not started: call `PEmotyw.init(document)`, never draw it yourself.

## Formats without a browser (DOCX, PPTX, Google Docs and Slides, Canva)

The motif and grain gradients are drawn by JavaScript and cannot be rebuilt in Office tools. There use the colour tokens, Geist and Inter, the logo files, solid black or white backgrounds and the type sizes from `docs/uklad.md`. Do not imitate the motif or the gradients with shapes or pictures.

## Logo files

SVG is the preferred format; PNG only where SVG is not accepted.

| File | Use |
|---|---|
| `assets/logo/svg/prompteye-logo-color-on-light.svg` | colour logo on white and light backgrounds |
| `assets/logo/svg/prompteye-logo-color-on-dark.svg` | colour logo on black, gradient, photo |
| `assets/logo/svg/prompteye-logo-black.svg`, `prompteye-logo-white.svg` | one-colour uses |
| `assets/logo/svg/prompteye-mark-color.svg`, `-black.svg`, `-white.svg` | mark only: avatar, favicon, very small spaces |
| `assets/logo/png/<name>-<width>.png` | the same files as PNG, transparent background |

Minimum height 14 px. Clear space equals the height of the mark on every side. Placement and size per format: `docs/logo.md` and `docs/uklad.md`.

## Not part of the system yet

Items marked "do rozwoju przy stronie www" (to be developed with the website): mobile versions, home page, looping animation, objects other than the map of Poland, React components other than Logo. Ask before using them.

The report anatomy (`docs/raporty.md`) is a preliminary guideline: the first full report is still being styled. Tables, charts, colours and type rules apply in full; ask before building a whole report from the anatomy.


---

<!-- docs/00-start.md · EN, translation of the Polish source · https://brand.prompteye.com/en/ -->

# 00 · Start: how to use the system

PromptEye · identity v2 (MVP) · state 28.10.2026. This folder describes the system for AI agents and developers. The description for people (brand book) is built separately and may rely on it.

## Principle

The system is a set of **blocks**, not a set of finished formats. Every piece of material (page, report, slide, post, banner, flyer) is assembled from the same blocks:

1. **Background**: a gradient with grain, or a solid background with a dot grid (`tla.md`).
2. **Motif**: an object made of dots emerging from a field, with one orange point (`motyw.md`). A script draws it, never you.
3. **Typography**: Geist and Inter, scale computed from the frame (`typografia.md`, `uklad.md`).
4. **Colour**: tokens from `tokens/colors.css` (`kolor.md`).
5. **Components**: buttons, navigation, sections (`komponenty.md`), data (`dane.md`), report (`raporty.md`, preliminary guidelines).

Digital first: website, interactive reports, presentations, social media. Print is assembled from the same blocks.

## Loading

```html
<link rel="stylesheet" href="styles.css">
<script src="js/pe-light.js"></script>
<script src="js/pe-pl.js"></script>
<script src="js/pe-raster.js"></script>
<script src="js/pe-motyw.js"></script>
```

`styles.css` imports the fonts, tokens and `css/*.css`. The four scripts draw the backgrounds and the motif; load them in this order. In Claude Design a single file `_ds_bundle.js` replaces them (it also contains `image-slot.js` and the Logo component); outside Claude Design it does not exist. Details for a code project: `HANDOFF.md`.

## Reading order

1. `docs/00-start.md` (this file)
2. `docs/formaty.md`: what you build → which blocks, ready HTML skeletons
3. The file of the block you use
4. `docs/kontrola.md`: checklist before delivery

## What takes precedence

1. `docs/` and `readme.md`, then `guidelines/motyw.html` and `guidelines/uklad.html`. In a conflict they win.
2. `guidelines/kolor.html`, `typografia.html`, `dane.html`, `partner.html`, `tla.html`, `kanaly.html`: patterns within their scope. The hero shown in `tla.html` (dot grid on a gradient, text centred) predates the motif. Take the hero from `motyw.html` and `uklad.html`.
3. `js/pe-motyw.js`: the only place for motif settings. Motif changes happen only there.
4. **Not part of the system:** `archive/`, `explorations/`, `scraps/`, `uploads/`. Do not read or copy.

## Files

| File | Contents |
|---|---|
| `tokens/colors.css` | colours (`--pe-*` tokens) |
| `tokens/typography.css` | typefaces and type scale |
| `tokens/layout.css` | margin, columns, spacing, frame, radius |
| `tokens.json` | the same tokens in machine format |
| `css/base.css` | frames, headline dot, report navigation |
| `css/typografia.css` | article, figures, tables, FAQ, footer, channels |
| `css/dane.css` | complex tables, charts |
| `css/partner.css` | reports with a partner |
| `css/przyciski.css` | buttons, page sections |
| `css/strony.css` | hero D/F/G/E, CTA, comments, figure |
| `js/pe-light.js` | background renderer (gradients, grain, dot grid) |
| `js/pe-pl.js`, `js/pe-raster.js` | map of Poland, dot raster |
| `js/pe-motyw.js` | MVP motif, switched on with an attribute |
| `assets/` | logo (`assets/logo/`), AI model icons for data (`assets/llm/sprite.svg`) |
| `templates/` | page templates (Claude Design format): report cover and chapter, hero, article |

## Documentation test

`explorations/test-z-dokumentacji.html`: seven frames built only from the skeletons in `formaty.md` (slide D, content slide with grid, post G, post F without frame, OG, final CTA slide, slide F in a box). The result follows the rules. In a normal tab the motif starts by itself; in a hidden preview call `PEmotyw.init(document)`.

## Statuses

- **MVP, in force:** everything in `docs/`, unless marked otherwise.
- **Preliminary guidelines:** `raporty.md` (report anatomy). It will be rewritten after the first full report; ask before you build a whole report from it.
- **To be developed with the website:** mobile versions, home page, looping animation, objects other than the map of Poland, React components other than Logo. Do not use without asking.

---

<!-- docs/formaty.md · EN, translation of the Polish source · https://brand.prompteye.com/en/formats/ -->

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

---

<!-- docs/marka.md · EN, translation of the Polish source · https://brand.prompteye.com/en/brand/ -->

# Brand: idea, messaging, method

**Status: in force (27.10.2026).** All PromptEye communication is built on this idea: the website, use cases, case studies and the visual motif. Changes come from the team.

## Idea

**AI recommends your brand in the questions that bring customers.**

(Polish original: „AI poleca Twoją markę w pytaniach, które przynoszą klientów.”)

- **"Recommends", not "is visible".** Visibility is the category word; every competitor uses it. What the customer cares about is that AI points to their brand when someone asks what to buy or whom to choose. AI is becoming the most important recommender today.
- **"In the questions that bring customers", not "everywhere".** This sets us apart from tools that show a general visibility score. Being in the answer to a question that sells nothing means nothing.

Being recommended by AI where it makes sense builds brand awareness and, as a result, brings customers. The outcome is not the same for every customer, which is why the idea connects to use cases.

The same idea is the theme of the visual motif: the field of dots is the market of questions, the object emerging through light is the questions that bring customers, the orange point is the brand recommended by AI (`motyw.md`).

## Why we build on it

In the age of AI, features can be built or copied in a week. Communication based on features ages together with them. The idea has to be true today, in six months and in a year.

Three things cannot be copied (differentiators):

1. **The effect.** "AI recommends your brand" stays true whatever models and features exist a year from now.
2. **People and their track record.** Years in SEO, exits, GEO done for agency clients before the tool existed.
3. **Data collected over time.** Measurements of whole industries, reports, the Atlas, the history of model answers. A competitor can copy a feature but cannot measure backwards how AI talked about a market six months ago. This advantage grows every month.

## Order in communication

From the most durable to the fastest-changing:

1. The effect (permanent).
2. Why it works with us: method, people, data (permanent).
3. Use cases (change slowly).
4. Features (change every week). We show them only as proof that the method can be carried out, never as the main message.

## Use cases: forms of one effect

Different personas use PromptEye and work with us through use cases, i.e. concrete usage scenarios. We describe every use case as a variant of the same effect, so the communication stays consistent even though the goals differ.

| The persona wants to… | The effect in the language of the idea |
|---|---|
| Win customers | AI recommends the brand in buying questions |
| Shape how the brand is perceived | AI describes the brand the way it wants to be seen |
| Publish many good articles for SEO/GEO | The content is cited by AI in important questions |

This is the start of the list; there are more use cases. **Describe a use case by its effect, not by the activity.** "Publishing articles" is an activity in which we compete with every content generator. "Content cited by AI" is an effect that keeps us in our category. Do not add new use cases without the team.

## The method in three steps

Every use case answers two customer questions: how do we know AI will recommend the brand, and how do we know these particular questions bring customers. One method, shared by all use cases, answers them:

1. **We choose the questions that bring customers.** We know which ones thanks to SEO experience (purchase intent) and data from measuring whole industries.
   In practice: selecting questions and grouping them into topics and intents, assessing the quality of the question set, business priorities, suggestions on which questions to add, remove or replace.
2. **We change what decides the AI answer:** content, sources and publications, in one place. Buying links and publications directly in the system is a road to the goal, not a differentiator in itself.
   In practice: recommendations based on monitoring, AI bot traffic and technical analysis of the site; content gaps against competitors; creating and optimising content; buying links and publications in the system.
3. **We check whether AI has started recommending and whether customers came.**
   In practice: monitoring AI model answers (share of recommendations and position against competitors, how the brand is described, sources and citations), AI traffic on the customer's site, change in visibility after published content.

The same elements appear in the offer as layers: monitoring is steps 1 and 3, visibility management is step 2. **In communication use the steps of the method**; the layers stay in the offer and the price list. The ChatGPT app is a separate enterprise product, outside the core offer and outside the method.

The method has no name yet. **Do not invent one.** Describe it with the three steps.

## The team and the limit of promises

The "we have an experienced team" story on its own is weak, because every start-up says it. It works only when the team stands behind the method and case studies show that the method gives the same result in different situations.

To the question "how do we know these questions bring customers" we answer today with experience. A full answer from data requires measuring AI traffic and conversions at the customer. Until we have that, in promises about customers and conversions we say "we help", not "we do".

## Case study: fixed template

Every case study has the same structure. Repeatability shows when the "why it worked" section returns to the same three steps of the method every time.

1. Who and which scenario.
2. Starting point: a measurement from the tool.
3. What we did: the three steps of the method.
4. Result: numbers from the tool and, where possible, traffic or customers.
5. Why it worked: the same three reasons.

Only confirmed case studies. Where there is no customer yet for a use case, there are two honest substitutes: a case from the agency GEO days, or PromptEye as its own case (SEO/GEO on a new website).

## Vocabulary: rules

- **Yes:** recommends, recommendation, AI recommendation, questions that bring customers, effect, method, measurement.
- **Careful:** "visibility" only as the name of a metric in data ("visibility in the model, %"), never as a promise.
- **"We help", not "we do"** in promises about customers and conversions (section "The team and the limit of promises").
- **"We have an experienced team"** is not an argument on its own. The team always stands behind the method and the cases.
- **Features** only as proof that the method can be carried out, never as the main message.
- **Numbers:** only confirmed ones. Do not use "93 out of 100 pieces of content raise visibility in the first month" until it is confirmed.
- Polish spelling and typesetting rules: `typografia.md` (P1).

---

<!-- docs/logo.md · EN, translation of the Polish source · https://brand.prompteye.com/en/logo/ -->

# Logo

## Files

Logo set: SVG (primary) in `assets/logo/svg/`, PNG in `assets/logo/png/` (width in the file name, transparent background).

| File (`assets/logo/svg/`) | When |
|---|---|
| `prompteye-logo-color-on-light.svg` | colour logo: white and light backgrounds (panel, light F), documents |
| `prompteye-logo-color-on-dark.svg` | colour logo for dark backgrounds: black, gradient, photo; default in hero D, G, E |
| `prompteye-logo-black.svg` | one-colour black: one-colour print, engraving, stamps |
| `prompteye-logo-white.svg` | one-colour white: dark backgrounds where orange clashes with the background |
| `prompteye-mark-color.svg`, `prompteye-mark-black.svg`, `prompteye-mark-white.svg` | mark only: avatar, favicon, very small spaces |

Older files in `assets/` stay for the templates: `assets/prompteye-logo.svg` is `color-on-light`, and `assets/prompteye-logo-white.svg` is `color-on-dark` (orange mark, white wordmark), **not** the one-colour file of the same name in the set. Use the set in new material.

Claude Design also has a React `Logo` component from the bundle (`window.<Namespace>.Logo`, `variant="color"|"white"`, `height`). It does not exist outside Claude Design.

## Rules

- Minimum height 14 px (digital).
- Clear space = the height of the mark on every side.
- Height per format (`uklad.md`): web 22, slide 28, post 32, OG 28 px.
- Placement: top left corner, on the format margin. Exception: variant G (text at the bottom), where the logo sits below the text, in the bottom left corner.
- Figure within text (table, chart in an article): logo in the top right corner of the figure. Shareable graphic: top left corner.
- LinkedIn cover: no logo in the frame, the bottom left corner is covered by the profile photo.
- Report with a partner: written as "PromptEye × Partner", our logo first (`dane.md`, Partner section).

## Don'ts

Recolouring, stretching, shadows, rotation, outlines, the logo on the brightest part of a gradient, the logo as an element of the motif.

---

<!-- docs/kolor.md · EN, translation of the Polish source · https://brand.prompteye.com/en/color/ -->

# Colour

Source: `tokens/colors.css` (every colour in `css/` refers to these tokens). Machine version: `tokens.json`. Do not invent new colours.

Token names are Polish: kobalt = cobalt, pomarancz = orange, czern = black, biel = white, atrament = ink, papier = paper, noc = night (dark), dzien = day (light), tlo = background, powierzchnia = surface, panel = panel, linia = line, podpis = caption, sciezka = breadcrumb, nawigacja = navigation, tekst = text, naglowek = heading, motyw = motif, punkt = point.

## Brand

| Token | Value | Role |
|---|---|---|
| `--pe-kobalt` / `--pe-kobalt-500` | #4D6BFE | brand colour: surfaces, data, buttons on black |
| `--pe-pomarancz` | #FD723A | the point: dot after a headline, leader in data, motif point, logo. Never text or background |
| `--pe-pomarancz-hover` | #FF8C5E | only the hover of the `b1a` button |

## Cobalt, one scale

| Token | Value | Role |
|---|---|---|
| `--pe-kobalt-900` | #0A1256 | depth of the gradient, background of a cobalt card |
| `--pe-kobalt-700` | #1E30BE | transition in a gradient, not as a flat colour |
| `--pe-kobalt-650` | #2A44D4 | link hover on white |
| `--pe-kobalt-600` | #3D5AF1 | text and links on white, focus, first data series on white (5.4 : 1) |
| `--pe-kobalt-300` | #7D93FF | text, numbers, links and data on black (7.5 : 1) |
| `--pe-kobalt-200` | #9DAEFF | bars and data series on white |
| `--pe-kobalt-100` | #C7D1FF | secondary bars, selections |
| `--pe-kobalt-50` | #E4E9FF | background of a highlighted card on white |

## Neutrals

| Night (black) | Value | Day (white) | Value |
|---|---|---|---|
| `--pe-noc-tlo` / `--pe-czern` | #000000 | `--pe-dzien-tlo` / `--pe-biel` | #FFFFFF |
| `--pe-noc-powierzchnia` | #0C0D10 | `--pe-dzien-panel` | #F5F6F8 |
| `--pe-noc-linia` | white 12 % | `--pe-dzien-linia` | #E6E7EB |
| `--pe-noc-linia-2` | #22252C | `--pe-dzien-linia-2` | #F0F1F3 |
| `--pe-noc-podpis` | #7A7E87 (minimum for text) | `--pe-dzien-podpis` | #6B6F78 (minimum for text) |
| `--pe-noc-sciezka` | #8A8E97 | `--pe-dzien-tekst-2` | #555962 |
| `--pe-noc-nawigacja` | #9A9EA7 | `--pe-dzien-hover` | #E2E4E9 |
| `--pe-noc-tekst` | #A3A7B0 | `--pe-dzien-tekst` | #464A53 |
| `--pe-noc-tekst-dlugi` | #B9BDC5 (long text) | | |
| `--pe-noc-tekst-2` | #C9CCD3 | | |
| `--pe-noc-naglowek` / `--pe-papier` | #F7F8FA | `--pe-dzien-naglowek` / `--pe-atrament` | #0B0D12 |

On black: lead and short text `--pe-noc-tekst` (#A3A7B0), long body text (article, report) `--pe-noc-tekst-dlugi` (#B9BDC5). Never white (white "glows").

## Motif (dot colours)

- On black: `--pe-motyw-noc-0…3` (#1B2B9C → #8DA1FF), no white.
- On white: `--pe-motyw-dzien-0…2` (#E4E5E9 → #8A8E97), grey.
- Point: `--pe-motyw-punkt` (#FD723A).

## Rules

1. **Contrast:** small text at least 4.5 : 1. Cobalt 500 on white is 4.3 : 1, so links and text on white use Cobalt 600. Small text on black uses Cobalt 300.
2. **Orange is the exception, not decoration:**
   - the headline dot is never in a frame with the motif point;
   - next to the Moment button (`b1a`) there is no headline dot and no points in the buttons beside it;
   - the point in the `b1b` button (navigation, sections) may share a frame with the motif point, as in hero D;
   - in a table or chart the only orange is the leader.
3. **Orange is never text or background** (2.8 : 1 on white).
4. **Cobalt does not fill buttons.** Cobalt is for links, focus, selections and data.
5. **Body text never stands on the colour** of a gradient. One light per frame.
6. **Changes in data without red and green:** the sign carries the meaning (`dane.md`).
7. The partner's colour only in data, as the second series (`dane.md`).

Hex values in `css/` outside the tokens are data palettes (`dane.css`), partner colours (`partner.css`) and single shades inside components. Do not use them outside those classes. Variables without the `--pe-` prefix (`--h`, `--tx`, `--q1`…) are local to their classes.

---

<!-- docs/typografia.md · EN, translation of the Polish source · https://brand.prompteye.com/en/typography/ -->

# Typography

Typefaces: **Geist** (headings, numbers; `--pe-font-display`) and **Inter** (text, data, interface; `--pe-font-text`). No third typeface. Exception: the e-mail footer in Arial.

## Web scale (reference, s = 1)

| Style | Typeface | Size / line height | Tracking | Colour on white |
|---|---|---|---|---|
| Display `.d1` | Geist 400 | 120 / 0.95 | −0.048 em | ink |
| H1 | Geist 400 | 64 / 1.05 | −0.04 em | ink |
| Lead | Inter 400 | 21 / 1.5 | −0.012 em | `--pe-dzien-tekst-2` |
| H2 | Geist 400 | 36 / 1.08 | −0.035 em | ink |
| H3 | Geist 500 | 21 | | ink |
| Body | Inter 400 | 16 / 1.65 | −0.011 em | `--pe-dzien-tekst` |
| Metadata, captions | Inter 500 | 13–14 | | `--pe-dzien-podpis` |

- Text column 660 px (`--pe-kolumna`), about 80 characters. Tables and charts up to 972 px.
- 24 px between paragraphs, 64 px above an H2.
- Heading line height 1.02–1.1 (Polish diacritics touch at 1.0).
- The smaller the heading, the heavier (H1, H2 400; H3 500).
- Links in text: Cobalt 600 with a 1 px underline; on black Cobalt 300.
- Tabular figures in data, decimal comma in Polish.

**Dark version:** the same sizes. Body text `--pe-noc-tekst-dlugi` (#B9BDC5), 16 / 1.7, −0.006 em; lead `--pe-noc-tekst`. Small text +0.01 em.

**Phone:** H1 36, lead 18, H2 28, body 16 / 1.6, 20 px margins (to be developed with the website).

**PDF A4:** body 10 / 15 pt, column 122 mm, H1 30 pt, H2 17 pt, H3 11.5 pt, metadata 7.5–8 pt.

## Other formats

Type sizes for slides, posts, OG and banners: the table in `uklad.md`. Rule: reference size × s of the format, rounded to 4 px. Social media has a higher minimum (small text at least 20 px at a width of 1080).

## The headline dot

```html
<h1>See how AI recommends your brand<span class="dot"></span></h1>
```

- `.dot` inserts the font's "." in #FD723A. Do not type your own full stop before the `<span>`.
- Only in slogan headlines. A slogan is a thesis sentence that promises or states something ("See how AI recommends your brand", "At the seaside AI recommends three brands"). A label or the name of a page, chapter or section ("Industry reports", "Colour", "Three conclusions from the report") gets no dot.
- A question headline ends with a question mark, without the dot.
- Never in a frame with the motif point or with the `b1a` button.

## P1: Polish typesetting (automatic)

The `data-pe-typo` attribute on a container runs the correction:
- an en dash instead of an em dash in a sentence (" – "),
- a narrow no-break space before % and p.p. ("38 %"),
- one-letter Polish words (a, i, o, u, w, z) never stay at the end of a line.

Writing by hand: no orphans, a number never separates from its unit, a space before %.

---

<!-- docs/uklad.md · EN, translation of the Polish source · https://brand.prompteye.com/en/layout/ -->

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

---

<!-- docs/tla.md · EN, translation of the Polish source · https://brand.prompteye.com/en/backgrounds/ -->

# Backgrounds: gradients, grain, dot grid

Renderer: `js/pe-light.js`. A background is a `<canvas class="lt" data-m="…">` as the first child of a container with `position: relative` (the canvas fills it entirely). It renders by itself when the page loads. For content added later: `PE_LIGHT.render(canvas)`.

In sections with the motif (`data-pe-hero`, `data-pe-cta`) you do not add a background: the motif draws its own (`motyw.md`). This file is about backgrounds **without the motif**.

## Gradients (always with N1 grain)

| Code | Description | When | Attributes |
|---|---|---|---|
| G5 | arc, black → cobalt → white from the bottom | core: covers, heroes, social | `data-m="lin" data-cu=".16" data-v0=".2" data-v1=".95" data-gm=".75" data-g=".1" data-nz="fade"` |
| G2 | white → black | core, the strongest | `data-m="lin" data-t0="1" data-t1="0" data-v0=".1" data-v1=".88" data-gm=".75" data-g=".1" data-nz="fade"` |
| G1 | black → white (G2 reversed) | transition from a dark section to a light one | `data-m="lin" data-v0=".12" data-v1=".9" data-gm=".75" data-g=".1" data-nz="fade"` |
| G3 | black → cobalt | the section ends in colour; cover of a dark article | `data-m="lin" data-t1=".62" data-v0=".05" data-v1="1" data-gm=".8" data-g=".1" data-nz="fade"` |
| G4 | white → cobalt | as above, on light | `data-m="lin" data-pal="day" data-t1=".55" data-v0=".3" data-v1="1.02" data-gm=".9" data-g=".08" data-nz="fade"` |

- **Arc and straight are equal.** Arc: `data-cu` (positive: arc from the bottom, negative: from the top). Straight: without `data-cu`.
- `data-v0` / `data-v1`: start and end of the transition as a fraction of the height. `data-t0` / `data-t1`: brightness at the start and end (0 black, 1 white).
- **N1 grain** (`data-nz="fade"`, `data-g`): only in the colour, fading out at both ends. The black and white of a gradient are exactly #000000 and #FFFFFF, so sections join seamlessly. A CSS gradient without grain is forbidden.
- One light per frame. Body text never stands on colour.

## How to choose and set a gradient

| What you build | Background | Notes |
|---|---|---|
| Hero, cover, page or chapter header **without the motif** | G5 as an arc, stretched like the hero D light: `data-m="lin" data-cu=".16" data-v0=".38" data-v1="1.12" data-gm=".75" data-g=".1" data-nz="fade"` | Black → navy → cobalt → almost white in the middle of the bottom edge, light cobalt at the sides: the bottom edge is visible as the edge of the sheet. When a white section must join seamlessly across the full width, use G5 from the table above (`data-v1=".95"`). |
| Section with the motif (`data-pe-hero`, `data-pe-cta`) | none | The motif draws its own light (`motyw.md`). |
| Transition from a dark section to a light one | G1 | |
| The section ends in colour and the next one starts with colour | G3 (on black), G4 (on white) | Not as a decorative strip under a header. |
| Content slide, quote or number post, article OG | solid background + dot grid | No gradient. |

- **The transition is long and smooth.** From `data-v0` to `data-v1` the light covers at least half of the frame height. Never squeeze a gradient into a strip under the text: a narrow black → cobalt strip looks like a sticker, not light.
- **Make room for text with the frame, not the gradient.** If the text does not fit on black, enlarge the frame below the text and move `data-v0` down. Never shorten the transition (`data-v1` stays 1.12 for G5).
- **Text stands on black or dark navy.** Below the last line of text and below the buttons the gradient brightness is at most about 0.36. With stretched G5 this gives `data-v0 ≈ (y − 0.37) / 0.67`, where `y` is the bottom edge of the text as a fraction of the frame height (at least 0.2).
- **The same gradient in the light and dark site theme.** The gradient belongs to the content, not to the site's colour theme. On a dark page the bottom edge of G5 is the edge of the sheet.

## Dot grid (solid background + dots)

The block for material without the motif: content slides, quote or number posts, article OG images, the front of a business card. **Only on a solid background** (black or white), never on a gradient or under the motif.

| Variant | Attributes (reference, s = 1) |
|---|---|
| On black, neutral (white 15%) | `data-m="flat" data-t="0" data-nz="fade" data-dp="20" data-dh="d" data-dk="cover" data-da=".15" data-dsz="1.5"` |
| On white, neutral (black 9%) | `data-m="flat" data-t="0" data-pal="day" data-nz="fade" data-dp="20" data-dh="l" data-dk="cover" data-da=".09" data-dsz="1.5"` |
| On black, cobalt (tone #111B6A) | `data-m="flat" data-t="0" data-nz="fade" data-dp="20" data-dh="d" data-dk="tone" data-dsz="1.5"` |

- `data-dp`: pitch in px, `data-dsz`: dot side in px. A grid dot is a **square** (by design).
- Other formats: pitch 20 × s (rounded to 2 px), dot 1.5 × s (rounded to 0.5 px, at least 1.5). Examples: slide 1920 → 26 / 2; post 1080 → 22 / 1.5; OG → 16 / 1.5.
- One type of dots per frame. Never under the lead, buttons, tables or charts (the mask `data-dm="x0,y0,x1,y1"` in fractions of the frame cuts an area out).
- The grid has no motif point, so the dot after a headline is allowed.

```html
<div class="t2f dk" style="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"></canvas>
  …content with position:absolute…
</div>
```

## Rejected (do not use)

Cobalt dots on white, shrinking dots, disintegration, a raster that builds a gradient (G1b, G1c), full cobalt (G6), an edge hero across the whole frame (H1–H3), noise N0 and N3, a CSS gradient without grain. The hero from `tla.html` (grid on a gradient, text in the middle) predates the motif.

---

<!-- docs/motyw.md · EN, translation of the Polish source · https://brand.prompteye.com/en/motif/ -->

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

---

<!-- docs/komponenty.md · EN, translation of the Polish source · https://brand.prompteye.com/en/components/ -->

# Components (CSS classes)

Components are classes from `css/`. The only React component is Logo, and only in Claude Design; outside it you insert the logo as an SVG file (`logo.md`). Patterns: `guidelines/motyw.html`, `guidelines/kanaly.html`, `guidelines/kolor.html`.

## Context

- `.dk` – dark background (black, text in paper).
- `.pp` – light background (white, text in ink).
- `.cx-l` – light context for buttons and links (e.g. `b1b` turns black).

## Buttons

```html
<a class="b b1b" href="#">Book a demo</a>
```

| Class | Level | Look | When |
|---|---|---|---|
| `b1b` | 1 · standard | light with an orange point; black in `.cx-l` | the main action of a section |
| `b1a` | 1 · Moment | orange | only to close an article or page, only on black |
| `b1w` | 1 | white | exceptionally on a photo or colour |
| `b2` | 2 | glass / frame | the second choice |
| `b3` | 3 | text with an arrow | the third choice, links in sections; `.n` without the arrow |

Sizes: `S` 36 px, default 48 px, `L` 56 px, `F` full width (52 px).

Rules:
1. One level-1 button per section. The second choice is level 2 or 3.
2. Level 1 stands out through lightness and the point, not colour.
3. Level 3 is just text with an arrow; the underline appears only on hover.
4. **Moment (`b1a`)** only on black, not on colour, not next to cobalt, never in navigation or in an app. With the Moment there is no other orange in the frame.
5. Cobalt never fills a button.
6. The point only in level 1.
7. A rectangle with a 2 px corner. No pills.
8. A button stands on a calm background: black, white or the dark part of a gradient. Never in the brightest part of the light.
9. Wording: verb and object, at most 3 words. No exclamation mark and no "click".
10. Phone: level 1 full width at the bottom, the second choice as level 3 below it.

## Site navigation (in the hero)

```html
<header class="hn">
  <img src="assets/logo/svg/prompteye-logo-color-on-dark.svg" alt="PromptEye">
  <nav><a href="#">Product</a><a href="#">Reports</a><a class="on" href="#">Blog</a><a href="#">Pricing</a></nav>
  <span class="r"><a class="b b3 n S" href="#">Log in</a><a class="b b1b S" href="#">Book a demo</a></span>
</header>
```

`a.on` – the active item. In light F use `prompteye-logo-color-on-light.svg`, and the navigation button is still `b1b` (never `b1a`).

## Hero (1440 × 860)

```html
<section class="ah dk" data-pe-hero="d">
  <header class="hn">…</header>
  <div class="ah-in">
    <div class="ah-cr"><a href="#">Blog</a><span>/</span><span>Regions of Poland</span></div>
    <h1>Where does AI send Poles to the seaside?</h1>
    <p>Lead, max. 3 lines (about 150 characters).</p>
    <div class="ah-m"><b>PromptEye research team</b><span>23 October 2026</span><span>9 min read</span></div>
  </div>
</section>
```

| Variant | Section classes |
|---|---|
| D dark | `ah dk` + `data-pe-hero="d"` |
| F light | `ah ahl cx-l f86` + `data-pe-hero="f"` |
| G cover | `ah dk gt gt-k` + `data-pe-hero="g"` |
| E outline | `ah dk` + `data-pe-hero="e"` |

`.ah-in`: the text column (left 48, top 184, width 680). H1 64 up to 3 lines, lead 21 up to 3 lines. `.ah-cr` breadcrumb, `.ah-m` meta.

## CTA (1440 × 560)

```html
<section class="t2end" data-pe-cta="raster">
  <div class="t2end-in">
    <h2>See how AI recommends your region</h2>
    <p>We will show your brand's results against the competition. The demo takes 30 minutes.</p>
    <div class="pb-ctas"><a class="b b1a L" href="#">Book a demo</a><a class="b b3 L" href="#">Download the report</a></div>
  </div>
</section>
```

## Expert comments

```html
<section class="kx" data-pe-komentarze="raster" data-kolor="szary">
  <div class="kx-in">
    <div class="kx-h"><small>Expert comments</small><h2>What practitioners say about the results</h2></div>
    <div class="kx-g">
      <article class="kx-c">
        <div class="kx-p"><image-slot id="foto-1" shape="circle" placeholder=""></image-slot><div><b>Name Surname</b><span>Role</span><span>Company</span></div></div>
        <blockquote>Quote, max. 5 lines.</blockquote>
        <a class="b b3" href="#">Read the comment</a>
      </article>
      …(3 cards)
    </div>
  </div>
</section>
```

## Linear figure (data)

```html
<figure class="t2fig t2fw fgm">
  <div class="t2fig-h"><div><small>Figure 1 · Regions of Poland</small><h4>Category leaders in AI recommendations</h4><p>Measure, period.</p></div><img src="assets/logo/svg/prompteye-logo-color-on-light.svg" alt="PromptEye"></div>
  <div class="fgm-b" data-pe-rycina><ul class="fgm-l"><li><small>Seaside</small><b>Sopot</b><span>30.9%</span></li>…</ul></div>
  <div class="t2fig-f"><span>Source: PromptEye, …</span><b>prompteye.com/raporty</b></div>
</figure>
```

## Other page sections

Exact patterns in `guidelines/kanaly.html` (C1, C2) and `guidelines/typografia.html` (A1, A2): the "how it works" section (`.pb-sh`, `.pb-cards`), reports (`.t2sp`), pricing (`.t2pr`, `.t2pk`, `.t2p`, `.t2p.ft` highlighted), comparison (`.t2cmp`), FAQ (`.t2fq`, `.t2faq`), related (`.t2rel`, `.t2card`), footer (`.t2ft`). Copy the block from the sheet and replace the content.

## Templates

`templates/hero-raportu`, `templates/okladka-raportu`, `templates/artykul`, `templates/rozdzial-raportu`. They load the system via `ds-base.js`.

---

<!-- docs/dane.md · EN, translation of the Polish source · https://brand.prompteye.com/en/tables/ -->

# Data: tables, charts, partner

Exact patterns: `guidelines/dane.html` (T4 minimal table, T3 complex table for desktop and phone, W3 line over time, W4 bars, W5 spread, W6 structure; each light and dark), `guidelines/typografia.html` (A1 and A2 table in an article, B1–B3 shareable graphics), `guidelines/partner.html` (P1 co-branded table). Copy a block from the sheet (e.g. `#t3`, `#w3`) and replace the data. Data is linear, without motif dots.

## Figure

```html
<figure class="t2fig">
  <div class="t2fig-h"><div><small>Tabela 1 · Nad morze</small><h4>Top 10 miejsc nad morzem w rekomendacjach AI</h4><p>Widoczność: odsetek odpowiedzi, w których AI poleca miejsce. Marzec 2026.</p></div><img src="assets/logo/svg/prompteye-logo-color-on-light.svg" alt="PromptEye"></div>
  <table class="dt">…</table>
  <div class="t2fig-f"><span>Źródło: PromptEye, raport …</span><b>prompteye.com/raporty</b></div>
</figure>
```

## Tables

You build every table from the same blocks: start with the minimal table and add layers, each for a specific reason. The lower bound is T4 (`#t4`, rows and columns only), the upper bound is T3 (`#t3`, almost all layers). The same complex table in an article column: `guidelines/typografia.html` A1 and A2, `templates/artykul`, `templates/rozdzial-raportu`. With a partner: `guidelines/partner.html` P1. Shareable: B1.

### Layers

| Layer | What it adds (classes) | When |
|---|---|---|
| 1. Table | rows, columns, headers, numbers (`table.dt`, `th.rk`/`td.rk`, `td.pc`, `.n` with `.lv`) | always |
| 2. Figure | label, title, description of measures, logo, footer (`figure.t2fig`, `.t2fig-h`, `.t2fig-f`) | when the table stands alone: report, article, graphic |
| 3. Main measure | header `th.mg` with a second line, bar `.vb`, line `.gk` after the column | when one measure says the most (e.g. visibility) |
| 4. Entity | logo `.co` in the name (`.pn`), type in a `td.ty` column or under the name (`<small>`) | when rows are companies or brands; places and things have no logo |
| 5. Column group | label `.gx` above the group, frame `.gk`, model marks `img.zm` | when several columns are the same measure in different models |
| 6. Heat map | `td.hm` with `.hm1`–`.hm5`, `.bx`, switch `input.hm-sw` + `label.hm-tg`, legend `.hm-lg` | when a group has several columns of the same measure |
| 7. Leader and changes | `tr.ld`, `span.mk`, "▲1" / "▼1", `.dn` | when you show a ranking or a change over time |
| 8. Partner | shared header P1–P3, footer "PromptEye × Partner" | a co-branded report (below) |

Do not add a layer without a reason. A table in the body of an article often needs nothing beyond layer 1.

### Title

- **A conclusion as the title** when the table carries one message ("Pięć pierwszych miejsc zajmują sieci handlowe").
- **A descriptive title** when the table is a listing to browse ("Widoczność sklepów z elektroniką w AI, marzec 2026").
- **No title and no figure** when the table stands in text that introduces it. The text then gives the source.
- A figure always has a footer: source, sample (n), period, address. The description under the title says what the measures are.

### Columns

- **Order:** who (#, entity, type) | the main measure | supporting measures (e.g. position on the list) | the breakdown by AI model. From the general to the detail.
- **Rank `#`:** `th.rk` / `td.rk`, 40–52 px, the number in bold (`<b>`) in a table with layer 7, regular in the minimal one.
- **Entity:** `td.pc`, text left-aligned, wraps to 2–3 lines, never cut. A second line (type, region) in `<small>`.
- **Type, category:** a separate `td.ty` column (Inter 14, secondary colour) when there is room; in a narrow table a second line under the name.
- **Number:** `.n`, centred, in a fixed-width `.lv` field aligned right, so the decimal commas line up (`.lv.lz` for numbers without %). Tabular figures. One decimal place across the whole column, or whole numbers across the whole column.
- **A percent sign next to every percentage value** ("61,1 %", with a non-breaking space). The header does not repeat it. Only what is not a percentage has no unit (average position).
- **Change:** "+2,4" / "−0,6" in percentage points (p.p. in the header, because it is not a percentage), a decrease `.dn` in grey. A rank change "▲1" / "▼1" next to the number, only when it changed.
- **Text** (e.g. the most frequent source): left-aligned, Inter 14, secondary colour.
- **No data:** "—" in grey (`td.na`), never "0".
- **The main measure** (e.g. visibility): a header in the text colour with a second line saying what it is counted from (`th.mg` and `<small>wszystkie modele</small>`), a bar `.vb` (an 80 px track = 100 %, the leader in cobalt), the number left-aligned right after the bar, a vertical line on the right (`.gk`). Visibility is the share of all answers, not an average of the models, so do not call it an "average".

### Widths

- The sum of the columns = the table width: 1210 px in a report across the full body width (T3), 896 px in an article block (A1), 972 px for a table without a figure in an article block (T4), 588 px on a phone with scrolling, 350 px on a phone without scrolling.
- Fixed columns first: # 40–52, a number 86–108 (a field for "61,1 %"), a model 85–100. The entity gets the rest.
- When space runs out, in this order: the type under the name, a shorter header, the phone layout with scrolling. Do not reduce the font size: rows 15 (phone 14), headers 12 (phone 11).
- Put the widths in `style` on the header cells. Place the group label `.gx` above the table with `margin-left` = the sum of the columns before the group and `width` = the sum of the group's columns. This works both in plain HTML and in Claude Design (`.dc.html`), whose engine drops `<colgroup>`.

### Headers

- Inter 500 12 in the metadata colour, aligned like the values below. A two-word header has one word per line (`span.sl`). The main measure: the text colour and a second line.
- **Column group:** a `.gx` label with a line; the line is the top of the frame, and the frame sides (`.gk` on the last column before the group and on the last column of the group) run down to the end of the table, 20 px above the model marks.
- **Model marks in colour** above the name: `<img class="zm" src="assets/llm/<model>.svg" alt="">`. On black, ChatGPT and Grok in the light version (`gpt-jasny.svg`, `grok-jasny.svg`). The colour of a mark is identification, not a data colour.

### Colour, lines, emphasis

- Data in cobalt: the bar `--bar`, the leader's bar `--pe-kobalt-500`, the heat map in 5 steps. Text in text colours, never in cobalt.
- **Orange only for the leader:** the circle `.mk` next to the name, on a phone next to the rank number.
- **No red and green:** the sign carries the meaning, an increase in the heading colour, a decrease in grey, a rank gain in cobalt.
- **Emphasis:** the main measure (weight 500 and a bar), the best in a row (500), the leader (circle). Nothing is heavier than 500. Without the heat map only the best in a row has the heading colour.
- Horizontal lines: `--ln2` between rows, `--ln` under the header. Vertical lines only `.gk`: after the main measure and on the sides of a group.
- **The entity logo:** a 28 px square `.co` (phone `.co.cm`, 24 px) with a line, the logo inside at 20 px (`<img>`). Without a logo, the first letter of the name (`.co.bz`).

### Heat map

- 5 cobalt steps (`.hm1`–`.hm5`) with a 2 px gap; you choose the thresholds for the data and give them in the legend with "%". Legend swatches have an outline.
- On by default. The reader turns it off with a switch in the legend: `<input type="checkbox" class="hm-sw" id="…" checked>` before the table (and before `.gx`) and `<label class="hm-tg" for="…">Mapa ciepła</label>` in `.hm-lg`, no script. Off: cells without a fill, with row lines.
- In PDF and shareable graphics it is always on, without a switch.

### Behaviour

- The row under the cursor: an `--hv` overlay on the whole row, the heat map cells included. The first column is indented 12 px (phone 8 px), so the number does not sit on the edge of the highlight.
- **Sorting and filtering: there is no pattern yet.** Until there is, the table is sorted descending by the main measure, the rank `#` follows from that sorting, and the description under the title says what the ranking is by.

### Phone

- The table fits in 350 px (e.g. T4, five columns): no scrolling, names wrap.
- It does not fit (T3, A2): the entity and the main measure are frozen (`.stk`, `.stk2`), the rest scrolls sideways (`.dmx` > `.dmx-s`). The hint "Przewiń w bok →" with a bar (`.dmx-cue`) stands above the scrolling part, right after the frozen columns. The bar and the fade on the right follow the scroll through `animation-timeline`, with no script; an older browser shows the bar at the start. The widths (164 + 64 frozen, 588 in total) and the bar are set for 390 px; in another layout set them again.
- The entity type under the name, the leader dot next to the rank number.

### Partner

- A co-branded table: a shared header in place of the logo (P1, `guidelines/partner.html`), the footer "Źródło: PromptEye × Partner".
- The partner colour only as the second data series (rules below), never in headers, lines, the frame or the heat map. The heat map stays cobalt.

### Formats

- Light and dark: the same markup in a `.t2f` or `.t2f.dk` frame.
- A shareable graphic (B1, 1080 × 1350): `table.dt.xl`, rows 24, headers 18, a 160 px bar. No breakdown by model: four model columns in a graphic in a feed would be about 8 px on a phone screen.
- Model icons in data cells (e.g. presence in models): one colour, in the text colour. A missing model = a dimmed icon (`.mic.off`), the legend below the header. Source: the sprite `assets/llm/sprite.svg` (symbols `llm-gpt`, `llm-gemini`, `llm-perplexity`, `llm-ai-overview`, `llm-claude`, `llm-grok`, `llm-deepseek`). Paste it into the page once, then `<svg class="mic" width="18" height="18" viewBox="0 0 24 24"><use href="#llm-gpt" width="24" height="24"/></svg>`. Without the sprite the icons are empty.

## Charts

**Which chart to choose:**

| The reader’s question | Chart | Pattern |
|---|---|---|
| How does the score change over time? | line over time | W3 |
| Who gained and who lost against the previous period? | bars with the previous month | W4 |
| How much do AI models differ in their assessment? | spread (min–max band and average) | W5 |
| How are positions in the answer list distributed? | 100% structure | W6 |
| Many items across many models at once | a table with a model group and a heat map | T3 |

- One series highlighted in cobalt, comparison series in grey, the rest as a light grey background. No multicolour legends.
- Labels at the ends of lines (value and change) instead of a legend.
- Grid: solid 1 px lines (`--pe-dzien-linia-2`, on black #1E2027), the zero line stronger. No dotted lines.
- The value axis starts at zero, the unit next to the tick. Axes Inter 13, tabular figures, metadata colour.
- **The title is a conclusion** ("Sopot grows the fastest"), the subtitle gives the measure and period, the footer the sample, source and address.
- Spread = a band from minimum to maximum, without ticks for individual models.
- Orange only for the leader (circle).
- On white: the leader is a cobalt bar (`--pe-kobalt-500`), the others `--pe-kobalt-100` (#C7D1FF); on black in navy.

## Data colours

The only exception to the `--pe-*` tokens: variables in `css/dane.css`, set on the `.t2f` frame, separately on white and on black (`.t2f.dk`). Do not type them in by hand, use the classes; the frame picks the version.

| Variable, class | Used for |
|---|---|
| `--q1` … `--q4` (`.q1`–`.q4`) | 100% structure (W6), segments from the most important |
| `--hm1` … `--hm5` (`.hm1`–`.hm5`) | heat map in tables, 5 steps from the lowest value |
| `--up` (`.up`) | increase and rank gain (▲) |
| `--rb`, `--rb1` (`.rb`, `.rb1`) | spread band (W5): others and highlighted |
| `--ctx` (`.ctx`) | background series in a line chart (W3) |
| `--sea` (`.sea`) | season band (W3) |
| `--base` | axis baseline |
| `--hv` | row highlight under the cursor (T3) |

## Shareable graphics

Formats: 1080 × 1350 (table), 1600 × 900 (chart, presentation), 1080 × 1080 (social). The logo, title, source and address are part of the graphic. The logo in the top left corner. Footer: source on the left, address on the right, a 1 px line above it.

## Partner (co-branded reports)

- Written as: **PromptEye × Partner**. Our logo first, "×" in the metadata colour. The partner's logo in one colour, optically equal to ours.
- P1 shared header: cover, shareable graphics, the first table. P2 report bar: the first graphic of a chapter. P3 partner in the footer: the other graphics.
- Footer: "Source: PromptEye × Partner", the address on our domain. One partner per graphic; with several, only in the footer.

**The partner's colour in data (10 rules):**
1. Always the second series. The first in cobalt, the rest grey. Line weight and labels keep the hierarchy.
2. A single series, a heat map and a one-colour scale stay in cobalt.
3. Partner data (Google, traffic, sales) = the second series; the colour indicates the source.
4. Only in data (bars, lines, points, legend swatches). Never in text, titles, headings, frames, backgrounds or buttons.
5. Never as a meaning (increase, decrease, warning).
6. The original colour if it has at least 3 : 1 against the background; if not, change only the lightness to 3 : 1.
7. Distinguishability test against cobalt: ΔE OKLab ≥ 0.10 (protanopia, deuteranopia), ≥ 0.05 (tritanopia).
8. Collisions: close to cobalt → the partner's second colour or graphite; close to orange → the leader as a graphite circle; red only after testing.
9. The partner's colour only with a single partner.
10. Orange stays ours: it marks only the leader.

---

<!-- docs/raporty.md · EN, translation of the Polish source · https://brand.prompteye.com/en/report-anatomy/ -->

# Report anatomy (preliminary guidelines)

> **Status: preliminary guidelines, work in progress.** The first full industry report is being prepared. This document describes what the system has today: the cover, hero, chapter opening and article templates. It will be rewritten once the first report is styled. The order and layout of the parts are an example, not a binding pattern. Colours, typography, the motif, tables and charts apply in full (`kolor.md`, `typografia.md`, `motyw.md`, `dane.md`).

An industry report measures a whole industry: which brands AI recommends in buying questions and how that changes over time. Its most important content is tables and charts (`dane.md`). An article from the report on the blog is made of the same parts.

## Parts of a report

| Part | What it is made of | Pattern in the system |
|---|---|---|
| Cover | Hero G (`.ah.dk.gt.gt-k`, `data-pe-hero="g"`): breadcrumb “Report · month year”, title, lead, metadata (PromptEye, number of chapters, AI models and items), buttons `b1b` “Download the report” and `b3` “See chapters” | `templates/okladka-raportu` |
| Chapter opening | Report bar `.rnav` (logo, report name, table of contents, “Share the chapter”), subchapter tabs `.rtabs`, on motif D: “Chapter 05 of 12”, title, lead and three KPI numbers `.kpis` | `templates/rozdzial-raportu` |
| Chapter body | On white (`.t2f.cx-l`): table of contents on the left `.t2toc` with the full-report box `.t2rb`, text in a column `.t2art` | `templates/rozdzial-raportu`, `templates/artykul` |
| Key findings | The `.t2kt` box at the start of the body: three sentences, each with a number | as above |
| Figure | Category leaders as a linear figure: `.t2fig.fgm`, `data-pe-rycina` | `templates/artykul` |
| Tables and charts | `.t2fig` figures: label (“Table 1 · Seaside”), a title (chart: a conclusion; table: a conclusion or a description), measure and period, a footer with source, sample and address. Tables built from layers, from minimal (T4) to complex (T3) | `dane.md`, `guidelines/dane.html` |
| Questions and answers | `.t2faq` | `templates/artykul` |
| Expert comments | `data-pe-komentarze="raster"` | `komponenty.md` |
| CTA | `.t2end`, `data-pe-cta="raster"`, button `b1a` | `komponenty.md` |
| Read next, footer | `.t2card`, `.t2ft` | `templates/artykul` |
| Shareable graphics | B1 table 1080 × 1350, B2 chart 1600 × 900, B3 chart 1080 × 1080 | `dane.md`, `guidelines/typografia.html` |
| Partner | P1 shared header, P2 report bar, P3 partner in the footer | `dane.md`, `guidelines/partner.html` |

## What already applies

- A chapter title is a name, so it has **no dot** (`typografia.md`). The chapter opening frame has the motif point, so a dot would clash with it anyway (`motyw.md`).
- The title of a chart is a conclusion, the title of a table a conclusion or a description. Every figure has a footer: source, sample (n), period, address (`dane.md`).
- Data is linear, without motif dots. The motif only in the cover, hero, chapter opening, comments and CTA.
- Orange in data marks only the leader.
- Copy follows `marka.md`, only confirmed numbers.
- Tables follow the layers in `dane.md`: from minimal (T4) to complex (T3, with colour model marks, the entity logo, a heat map with a switch and a phone version). The same complex table stands in the article and chapter opening templates.
- AI model icons in data cells: the sprite `assets/llm/sprite.svg` pasted into the page once (`dane.md`).

## To be decided with the first report

- The order of parts in a chapter and the number of figures per chapter.
- Navigation between chapters: bar, tabs, table of contents.
- The choice of KPI numbers in the chapter opening.
- The report on a phone (today there are only the article and the tables on a phone: `guidelines/typografia.html` A2, `guidelines/dane.html` T3 and T4).
- The layout of the downloadable PDF.

Before you build a full report from this document, ask the PromptEye team whether the guidelines changed after the first report.

## Templates outside Claude Design

The templates `templates/*/*.dc.html` work in Claude Design. Outside it, take the HTML between `<x-dc>` and `</x-dc>`, fill in the `{{ … }}` values from `renderVals()` (variant D) and load `styles.css` and the four scripts as in `00-start.md`. The `../../assets/` paths lead to `assets/`.

---

<!-- docs/kontrola.md · EN, translation of the Polish source · https://brand.prompteye.com/en/checklist/ -->

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

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