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

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