> **PromptEye Brand Book & Design Language** · O brand booku · PL (wersja źródłowa) · stan 28.10.2026
> Strona dla ludzi: https://brand.prompteye.com/pl/ · English: https://brand.prompteye.com/en/start.md · indeks dla agentów: https://brand.prompteye.com/llms.txt
> Ścieżki plików są względne wobec https://brand.prompteye.com/ds/ (np. `tokens/colors.css` → https://brand.prompteye.com/ds/tokens/colors.css), odwołania do `*.md` wobec https://brand.prompteye.com/ds/docs/. Poza Claude Design zamiast `_ds_bundle.js` wczytaj `styles.css` i skrypty `js/pe-light.js`, `js/pe-pl.js`, `js/pe-raster.js`, `js/pe-motyw.js` (w tej kolejności).

# 00 · Start: jak korzystać z systemu

PromptEye · identyfikacja v2 (MVP) · stan 28.10.2026. Ten folder opisuje system dla agenta AI i dla dewelopera. Opis dla ludzi (brand book) powstaje osobno i może się na nim opierać.

## Zasada

System to **klocki**, a nie zestaw gotowych formatów. Każdy materiał (strona, raport, slajd, post, baner, ulotka) składasz z tych samych klocków:

1. **Tło** – gradient z ziarnem albo jednolite tło z siatką kropek (`tla.md`).
2. **Motyw** – obiekt z kropek wyłaniający się z pola, z jednym pomarańczowym punktem (`motyw.md`). Rysuje go skrypt, nigdy Ty.
3. **Typografia** – Geist i Inter, skala liczona od kadru (`typografia.md`, `uklad.md`).
4. **Kolor** – tokeny z `tokens/colors.css` (`kolor.md`).
5. **Komponenty** – przyciski, nawigacja, sekcje (`komponenty.md`), dane (`dane.md`), raport (`raporty.md`, wstępne wytyczne).

Najpierw digital: strona www, raporty interaktywne, prezentacje, social media. Druk składa się z tych samych klocków.

## Ładowanie

```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` importuje fonty, tokeny i `css/*.css`. Cztery skrypty rysują tła i motyw; wczytuj je w tej kolejności. W Claude Design zamiast nich jest jeden plik `_ds_bundle.js` (zawiera też `image-slot.js` i komponent Logo); poza Claude Design go nie ma. Szczegóły dla projektu w kodzie: `HANDOFF.md`.

## Kolejność czytania

1. `docs/00-start.md` (ten plik)
2. `docs/formaty.md` – co budujesz → z jakich klocków, gotowe szkielety HTML
3. Plik klocka, którego używasz
4. `docs/kontrola.md` – lista kontrolna przed oddaniem

## Co jest nadrzędne

1. `docs/` i `readme.md`, potem `guidelines/motyw.html` i `guidelines/uklad.html`. Przy sprzeczności wygrywają.
2. `guidelines/kolor.html`, `typografia.html`, `dane.html`, `partner.html`, `tla.html`, `kanaly.html`: wzory w swoim zakresie. Hero pokazane w `tla.html` (siatka kropek na gradiencie, tekst na środku) jest sprzed motywu. Hero bierzesz z `motyw.html` i `uklad.html`.
3. `js/pe-motyw.js`: jedyne miejsce ustawień motywu. Zmiany motywu tylko tam.
4. **Nie są częścią systemu:** `archive/`, `explorations/`, `scraps/`, `uploads/`. Nie czytaj, nie kopiuj.

## Pliki

| Plik | Zawartość |
|---|---|
| `tokens/colors.css` | kolory (tokeny `--pe-*`) |
| `tokens/typography.css` | kroje i skala pisma |
| `tokens/layout.css` | margines, kolumny, odstępy, rama, promień |
| `tokens.json` | te same tokeny w formacie maszynowym |
| `css/base.css` | ramy, kropka po tytule, nawigacja raportu |
| `css/typografia.css` | artykuł, figury, tabele, FAQ, stopka, kanały |
| `css/dane.css` | tabele złożone, wykresy |
| `css/partner.css` | raporty z partnerem |
| `css/przyciski.css` | przyciski, sekcje strony |
| `css/strony.css` | hero D/F/G/E, CTA, komentarze, rycina |
| `js/pe-light.js` | renderer tła (gradienty, ziarno, siatka kropek) |
| `js/pe-pl.js`, `js/pe-raster.js` | mapa Polski, raster punktowy |
| `js/pe-motyw.js` | motyw MVP, włączany atrybutem |
| `assets/` | logo (`assets/logo/`), ikony modeli AI do danych (`assets/llm/sprite.svg`) |
| `templates/` | szablony stron (DC): okładka i rozdział raportu, hero, artykuł |

## Test dokumentacji

`explorations/test-z-dokumentacji.html`: siedem kadrów złożonych wyłącznie ze szkieletów w `formaty.md` (slajd D, slajd treści z siatką, post G, post F bez ramy, OG, ostatni slajd CTA, slajd F w pudełku). Wynik zgodny z zasadami. W zwykłej karcie motyw startuje sam; w ukrytym podglądzie trzeba wywołać `PEmotyw.init(document)`.

## Statusy

- **MVP, obowiązuje:** wszystko w `docs/`, o ile nie jest oznaczone inaczej.
- **Wstępne wytyczne:** `raporty.md` (anatomia raportu). Przepiszemy go po pierwszym pełnym raporcie; zanim złożysz według niego cały raport, zapytaj.
- **Do rozwoju przy stronie www:** wersje mobilne, strona główna, animacja w pętli, obiekty inne niż mapa Polski, komponenty React poza Logo. Nie używaj bez pytania.