> **PromptEye Brand Book & Design Language** · Kolor · PL (wersja źródłowa) · stan 28.10.2026
> Strona dla ludzi: https://brand.prompteye.com/pl/kolor/ · English: https://brand.prompteye.com/en/color.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).

# Kolor

Źródło: `tokens/colors.css` (wszystkie kolory w `css/` odwołują się do tych tokenów). Wersja maszynowa: `tokens.json`. Nie wymyślaj nowych kolorów.

## Marka

| Token | Wartość | Rola |
|---|---|---|
| `--pe-kobalt` / `--pe-kobalt-500` | #4D6BFE | kolor marki: powierzchnie, dane, przyciski na czerni |
| `--pe-pomarancz` | #FD723A | punkt: kropka po tytule, lider w danych, punkt motywu, logo. Nigdy tekst ani tło |
| `--pe-pomarancz-hover` | #FF8C5E | tylko hover przycisku `b1a` |

## Kobalt, jedna skala

| Token | Wartość | Rola |
|---|---|---|
| `--pe-kobalt-900` | #0A1256 | głębia gradientu, tło karty w kobalcie |
| `--pe-kobalt-700` | #1E30BE | przejście w gradiencie, nie jako płaski kolor |
| `--pe-kobalt-650` | #2A44D4 | hover linku na bieli |
| `--pe-kobalt-600` | #3D5AF1 | tekst i linki na bieli, fokus, pierwsza seria danych na bieli (5,4 : 1) |
| `--pe-kobalt-300` | #7D93FF | tekst, liczby, linki i dane na czerni (7,5 : 1) |
| `--pe-kobalt-200` | #9DAEFF | słupki i serie danych na bieli |
| `--pe-kobalt-100` | #C7D1FF | słupki drugoplanowe, zaznaczenia |
| `--pe-kobalt-50` | #E4E9FF | tło wyróżnionej karty na bieli |

## Neutralne

| Noc (czerń) | Wartość | Dzień (biel) | Wartość |
|---|---|---|---|
| `--pe-noc-tlo` / `--pe-czern` | #000000 | `--pe-dzien-tlo` / `--pe-biel` | #FFFFFF |
| `--pe-noc-powierzchnia` | #0C0D10 | `--pe-dzien-panel` | #F5F6F8 |
| `--pe-noc-linia` | biel 12 % | `--pe-dzien-linia` | #E6E7EB |
| `--pe-noc-linia-2` | #22252C | `--pe-dzien-linia-2` | #F0F1F3 |
| `--pe-noc-podpis` | #7A7E87 (min. dla tekstu) | `--pe-dzien-podpis` | #6B6F78 (min. dla tekstu) |
| `--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 (długi tekst) | | |
| `--pe-noc-tekst-2` | #C9CCD3 | | |
| `--pe-noc-naglowek` / `--pe-papier` | #F7F8FA | `--pe-dzien-naglowek` / `--pe-atrament` | #0B0D12 |

Na czerni: lead i krótki tekst `--pe-noc-tekst` (#A3A7B0), długi tekst ciągły (artykuł, raport) `--pe-noc-tekst-dlugi` (#B9BDC5). Nigdy biel (biel „świeci”).

## Motyw (kolory kropek)

- Na czerni: `--pe-motyw-noc-0…3` (#1B2B9C → #8DA1FF), bez bieli.
- Na bieli: `--pe-motyw-dzien-0…2` (#E4E5E9 → #8A8E97), szary.
- Punkt: `--pe-motyw-punkt` (#FD723A).

## Zasady

1. **Kontrast:** mały tekst co najmniej 4,5 : 1. Kobalt 500 na bieli ma 4,3 : 1, więc linki i tekst na bieli w Kobalcie 600. Na czerni drobny tekst w Kobalcie 300.
2. **Pomarańcz to wyjątek, nie dekoracja:**
   - kropka po tytule nigdy w kadrze z punktem motywu;
   - przy przycisku Moment (`b1a`) nie ma kropki po tytule ani punktów w przyciskach obok;
   - punkt w przycisku `b1b` (nawigacja, sekcje) może stać w kadrze z punktem motywu, jak w hero D;
   - w tabeli i wykresie jedynym pomarańczem jest lider.
3. **Pomarańcz nigdy jako tekst ani tło** (2,8 : 1 na bieli).
4. **Kobalt nie wypełnia przycisku.** Kobalt to linki, fokus, zaznaczenia i dane.
5. **Tekst ciągły nigdy nie stoi na kolorze** gradientu. Jedno światło na kadr.
6. **Zmiany w danych bez czerwieni i zieleni:** znak niesie znaczenie (`dane.md`).
7. Kolor partnera tylko w danych, jako druga seria (`dane.md`).

Wartości hex w `css/` poza tokenami to palety danych (`dane.css`), kolory partnera (`partner.css`) i pojedyncze odcienie wewnątrz komponentów. Nie używaj ich poza tymi klasami. Zmienne bez prefiksu `--pe-` (`--h`, `--tx`, `--q1`…) są lokalne dla klas.