Color

Brand colours

Cobalt is the brand colour. It appears flat at least once in every frame: as a surface, data or a button on black. Orange is the point: the headline dot, the leader in data, the motif point and the logo. It is never text or background.

Foundation: black and white

The system stands on black and white. The black and white of the gradients are exactly #000000 and #FFFFFF, so sections join seamlessly. Text, however, is not pure black or white: on white we write in ink, on black in paper. Long text on black uses #B9BDC5 (token --pe-noc-tekst-dlugi), because pure white “glows”.

Cobalt: one scale

All shades of cobalt come from one scale. Cobalt 500 on white reaches only 4.3 : 1, so text and links on white use Cobalt 600 (5.3 : 1) and on black Cobalt 300 (7.5 : 1). Cobalt 700 and 900 live only in gradients and cards, never as a flat text colour.

Neutrals: night and day

Every piece of material is either dark (night) or light (day). Both sides have the same roles: background, surface, lines, caption, text and heading. The contrast under each swatch is measured against that side’s background.

Motif colours

The motif dots have their own scales: on black from #1B2B9C to #8DA1FF (no white), on white grey. The motif script sets these colours (js/pe-motyw.js). You never use them by hand. More in the Motif chapter.

Orange is the exception

Orange works because it is rare. In a frame it points at one thing. That is why:

• the headline dot never shares 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.

Contrast and legibility

Small text needs a contrast of at least 4.5 : 1. From 24 px, 3 : 1 is enough. The table shows which colour to use for text on white and on black. The values are computed from the tokens on every build of this site.

Rules

1. Tokens only. Take colours from tokens/colors.css or tokens.json. Never invent new ones.
2. Contrast. Small text at least 4.5 : 1. Links on white in Cobalt 600, small text on black in Cobalt 300.
3. Orange is the exception. One point per frame, never text or background.
4. Cobalt never fills a button. It is for links, focus, selections and data.
5. Text never stands on colour. Body text never lies on the coloured part of a gradient. One light per frame.
6. Data without red and green. The sign carries the meaning: growth in the heading colour, decline in grey.
7. The partner’s colour only in data. Always as the second series.

In code and for agents

Colours are CSS variables with the --pe- prefix. Load styles.css (or just tokens/colors.css) and refer to the tokens:

.etykieta {
  color: var(--pe-dzien-podpis);      /* minimum dla tekstu na bieli */
}
.link {
  color: var(--pe-kobalt-600);        /* linki na bieli */
}
.link:hover {
  color: var(--pe-kobalt-650);
}
.dk .link {
  color: var(--pe-kobalt-300);        /* linki na czerni */
}

The same tokens in DTCG format are in tokens.json. It works with Style Dictionary, Tailwind, Figma and AI agents:

"kobalt-600": {
  "$value": "#3D5AF1",
  "$type": "color",
  "$description": "tekst i linki na bieli, fokus, pierwsza seria danych na bieli (5,4:1; #4D6BFE ma 4,3:1)",
  "css": "--pe-kobalt-600"
}