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

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