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

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

## Toolbar above a table: view and model list

Two controls for data views on the report page, in the tone of the b2 button (dark glass on white, light glass on black). Full pattern: `guidelines/dane.html` `#t3f`, rules: `dane.md`, layer 9.

```html
<div class="dt-tb">
  <div class="dt-seg" role="group" aria-label="Widok"><button type="button" aria-pressed="true">Tabela</button><button type="button" aria-pressed="false">Wykres</button></div>
  <div class="dt-dd"><button type="button" class="dt-dd-t" aria-expanded="false" aria-controls="t1-modele">Modele AI <span>wszystkie</span><i></i></button>
    <div class="dt-dd-p" id="t1-modele" role="group" aria-label="Modele AI" hidden><label class="dt-dd-o"><input type="checkbox" checked><b></b><img src="assets/llm/gpt.svg" alt=""><span>ChatGPT</span></label>…<div class="dt-dd-f"><button type="button">Zaznacz wszystkie</button></div></div>
  </div>
</div>
```

- `.dt-seg`: a switch between two or three views; the active segment (`aria-pressed="true"`) on the card colour. It does not replace action buttons.
- `.dt-dd`: a list with checkboxes; the label says how many items are selected. Open: `aria-expanded="true"` and no `hidden`.
- They work in the `.t2f` data frame (light and dark). A rectangle with a 2 px corner, Inter 500 13, no pills.

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