Stan 27.10.2026Obowiązują: paleta, kontrasty, zasady przycisków. Tokeny: tokens/colors.css (uzupełnione o odcienie neutralne). Źródło prawdy: docs/.
Kolor v2 — paleta zaakceptowana do nowego systemu · tokens/colors.css bez zmian do czasu przebudowy · P1, P2, P5 w „Tła v2 — legacy”
P3 · Paleta v2 — zaakceptowana kolor marki bez zmian · jedna skala kobaltu · neutralne szarości zamiast niebieskawych

Paleta v2

Kontrasty liczone dla małego tekstu (norma 4,5 : 1). Nowy jest tylko Kobalt 600. Pozostałe kolory już działają w arkuszach v2 albo pochodzą z rampy gradientu.

Markabez zmian

Kobalt 500#4D6BFE

Kolor marki. Płasko co najmniej raz w każdym kadrze. Na bieli tylko jako powierzchnia lub tekst od 24 px.

Pomarańcz#FD723A

Punkt: kropka po tytule, lider w danych, logo. Nigdy tekst ani tło (2,8 : 1 na bieli).

Kobalt — skala900 i 700 z rampy gradientu

900#0A1256

Głębia gradientu, tło karty w kobalcie.

700#1E30BE

Przejście w gradiencie. Nie jako płaski kolor.

600nowy#3D5AF1

Linki, tekst i przyciski z białym tekstem na bieli. 5,3 : 1.

500 · marka#4D6BFE

Powierzchnie, dane, przyciski na czerni.

300#7D93FF

Tekst, liczby i dane na czerni. 7,5 : 1. Zastępuje #7088FF.

200#9DAEFF

Słupki i serie danych na bieli.

100#C7D1FF

Słupki drugoplanowe, zaznaczenia.

50#E4E9FF

Tło wyróżnionej karty na bieli.

Nocneutralne, bez niebieskiego

Tło#000000

Strona, okładka.

Powierzchnia#0C0D10

Karty i panele na czerni.

Liniabiel 12 %

Hairliny, ramki, podział tabel.

AaPodpis#7A7E87

Minimum dla tekstu. 5,2 : 1.

AaTekst#A3A7B0

Tekst ciągły, lead. 8,7 : 1.

AaNagłówek#F7F8FA

Nagłówki, liczby. 19,8 : 1.

Dzieńneutralne, bez niebieskiego

Tło#FFFFFF

Strona, raport.

Panel#F5F6F8

Wykresy, karty, tabele.

Linia#E6E7EB

Hairliny, ramki.

AaPodpis#6B6F78

Minimum dla tekstu. 5,0 : 1.

AaTekst#464A53

Tekst ciągły, lead. 8,9 : 1.

AaNagłówek#0B0D12

Nagłówki, liczby. 19,4 : 1.

P4 · Kontrast mały tekst wymaga 4,5 : 1

Gdzie kobalt i pomarańcz się nie bronią

Czytaj raport →Kobalt 500 na bieli4,33Za mało dla linków i małego tekstu → Kobalt 600
Czytaj raport →Biały na Kobalcie 5004,33Za mało dla przycisku 16 px → tło Kobalt 600
Czytaj raport →Kobalt 600 na bieli5,34OK. Linki i tekst na jasnym
Czytaj raport →Biały na Kobalcie 6005,34OK. Przycisk kobaltowy na jasnym
Czytaj raport →Kobalt 500 na czerni4,85OK, na granicy. Drobny tekst lepiej w 300
Czytaj raport →Kobalt 300 na czerni7,49OK. Tekst i liczby w kobalcie na ciemnym
Czytaj raport →Pomarańcz na bieli2,75Nigdy jako tekst. Kropka po tytule i pełne koło OK
Okres badania · marzec 2026Szary #80848C na bieli3,75Podpisy w obecnych arkuszach → #6B6F78 (5,04)
Przyciski „Pomarańcz to podpis, nie przycisk” · standard monochromatyczny · pełny pomarańcz tylko jako Moment
V1 · System przycisków wynik recenzji 4 perspektyw · standard monochromatyczny · pełny pomarańcz tylko jako Moment

Pomarańcz to podpis, nie przycisk

Główny przycisk jest biały na ciemnym i czarny na jasnym, z pomarańczową kropką. Pełny pomarańcz to Moment: jeden na stronę, tylko na czerni, tylko w głównej konwersji na końcu ścieżki.

Czerń
Biel
Kobalt i gradient
Poziom 1 · standardwszędzie, także w aplikacji
Poziom 1 · Momentwyjątek · pełny pomarańcz · tekst czarny, 7,6 : 1
Umów demo1 na stronę
Nie stosujemy
Nie stosujemy
Poziom 2neutralny, wypełniony · bez ramki
Poziom 3tekst ze strzałką · podkreślenie po najechaniu
Link w tekściekobalt · tylko w treści

Szczegóły w metodologii badania.

Szczegóły w metodologii badania.

Szczegóły w metodologii badania.

Moment — wszystkie warunki naraz

  1. Tylko na czerni. Nigdy na bieli, kobalcie ani gradiencie.
  2. Najwyżej jeden na stronę lub widok.
  3. Tylko główna konwersja na końcu ścieżki: zamknięcie raportu, „Umów demo”, landing kampanii.
  4. Nigdy w nawigacji ani w aplikacji.
  5. W tej sekcji nie ma innego pomarańczu: bez kropki po tytule i w przyciskach.

Recenzja — 4 perspektywy

Klient · dyrektorka marketingu
Pełny pomarańcz czyta jako promocję, monochrom jako narzędzie analityczne.
Designer · identyfikacja B2B
Kolor logo na każdym przycisku traci znaczenie. Dawkować.
CRO · konwersja
Widoczność daje kontrast i przestrzeń. Pomarańcz tam, gdzie przycisk walczy o uwagę.
Design system · wdrożenie
Wyjątek jako nazwany wariant z twardymi warunkami, inaczej rozleje się wszędzie.

Kobalt

Linki, fokus, zaznaczenia. Nigdy wypełnienie przycisku.

  • Kształt: prostokąt 2 px, bez ramek i cieni.
B2 · Desktop standard B · Moment tylko w zamknięciu strony, na czerni

Zobacz, jak AI widzi Twoją markę

PromptEye mierzy, jak często ChatGPT, Gemini, Perplexity i Claude polecają Twoją markę — i co zrobić, żeby polecały częściej.

Raport · Turystyka 2026

Turystyka w rekomendacjach AI

RozdziałBiura podróży

Które biura podróży modele AI polecają najczęściej.

Czytaj rozdział
RozdziałHotele

Jak modele AI wybierają i polecają hotele.

Czytaj rozdział
Rozdział 05Regiony Polski

Dokąd AI wysyła Polaków nad morze, w góry i na Mazury.

Czytaj rozdział

Pytania, modele i sposób liczenia widoczności opisujemy w metodologii badania.

Sprawdź, gdzie jest Twoja marka

Pokażemy, jak modele AI polecają Ciebie i konkurencję.

  • Do zamknięcia strony wygląda jak B: spokojnie, pomarańcz tylko jako kropka.
  • Moment pojawia się raz, na czerni, w ostatniej decyzji. Bo jest rzadki, widać go mocniej niż w A.
B3 · Telefon
Hero · standard
PromptEye

Zobacz, jak AI widzi Twoją markę

Mierzymy, jak modele AI polecają Twoją markę.

Treść · standard na bieli
PromptEye
Raport · Turystyka 2026

Rozdziały raportu

Biura podróżyKtóre biura AI poleca najczęściej.Czytaj
HoteleJak AI wybiera i poleca hotele.Czytaj
Regiony PolskiDokąd AI wysyła Polaków na urlop.Czytaj

Sposób liczenia opisujemy w metodologii.

Wszystkie raportyUmów demo
CTA · Moment na czerni
PromptEye

Sprawdź, gdzie jest Twoja marka

Pokażemy, jak modele AI polecają Ciebie i konkurencję.

Przyciski — reguły dobrze / źle · 13 reguł · wynik recenzji 4 perspektyw

Przyciski — reguły

Hierarchię budują kontrast, rozmiar i kropka. Pełny pomarańcz to Moment: rzadki, nazwany wyjątek z twardymi warunkami. Kobalt nie wypełnia przycisków — prowadzi linki, fokus i dane.

Poziom 1 · standardBiały na czerni, czarny na bieli, z pomarańczową kropką. Wszędzie, także w aplikacji.
Poziom 1 · MomentPełny pomarańcz. Raz na stronę, tylko na czerni, tylko w ostatniej decyzji.
Poziom 2Tonalny: biel 10 % na czerni, czerń 9 % na bieli. Bez ramki i bez kropki.
Poziom 3Sam tekst ze strzałką. Podkreślenie dopiero po najechaniu.
01 · Hierarchia

Jeden przycisk poziomu 1 na sekcję

Drugi wybór to poziom 2 albo 3. Dwa równorzędne przyciski każą klientowi zgadywać.

Dobrze

Od razu widać, co jest główne.

Źle

Dwa białe przyciski konkurują ze sobą.

02 · Hierarchia

Poziom 1 to kontrast, nie kolor

Standard wyróżnia się jasnością na tle i kropką. Pomarańcz zostaje podpisem, jak w logo.

Dobrze

Zobacz, jak AI widzi Twoją markę

Umów demo

Spokojnie i pewnie. Pomarańcz jako punkt.

Źle

Zobacz, jak AI widzi Twoją markę

Umów demo

Pomarańcz jako standard wygląda jak promocja, nie jak analityka.

03 · Hierarchia

Poziom 3 to sam tekst ze strzałką

Bez ramki i bez tła. Podkreślenie pojawia się dopiero po najechaniu.

Dobrze

Lekko, czytelnie, jak część tekstu.

Źle

Ramka wprowadza linie, z których rezygnujemy. Na gradiencie ginie.

04 · Moment

Moment tylko na czerni

Na czerni pomarańcz świeci jak sygnał. Na bieli wygląda jak ostrzeżenie albo wyprzedaż.

Dobrze

Ostatnia decyzja na stronie, na czerni.

Źle

Na bieli kojarzy się z promocją.

05 · Moment

Moment nie stoi na kolorze

Pomarańcz obok kobaltu albo na świetle gradientu wibruje i traci powagę.

Dobrze

Na czerni, z dala od światła.

Źle

Na kobalcie dwa nasycone kolory walczą ze sobą.

06 · Moment

Przy Momencie nie ma innego pomarańczu

Znika kropka po tytule i kropka w przyciskach obok. W kadrze zostaje jeden pomarańcz.

Dobrze

Twój region zmienia pozycję co tydzień

Umów prezentację

Tytuł bez kropki, jeden pomarańcz.

Źle

Twój region zmienia pozycję co tydzień

Umów prezentację

Kropka i Moment: dwa pomarańcze w jednym kadrze.

07 · Moment

Nigdy w nawigacji ani w aplikacji

Nawigacja jest na każdym ekranie, więc pomarańcz przestaje tam być wyjątkiem. W aplikacji akcji jest za dużo.

Dobrze
PromptEyeProduktRaportyZalogujUmów demo

Umów demo w nawigacji jako poziom 2.

Źle
PromptEyeProduktRaportyZalogujUmów demo

Pomarańcz w nawigacji to wyjątek na każdym ekranie.

08 · Kolor

Kobalt nie wypełnia przycisku

Kobalt to linki, fokus, zaznaczenia i dane. Kobaltowy przycisk na czerni to język Chatbit.

Dobrze

Kobalt jako link w treści.

Źle

Kobaltowy przycisk: wyglądamy jak konkurencja.

09 · Forma

Kropka tylko w poziomie 1

Kropka oznacza główną akcję. Na poziomie 2 i 3 rozmywa hierarchię.

Dobrze

Jedna kropka, jedna główna akcja.

Źle

Kropki wszędzie: nie wiadomo, co jest główne.

10 · Forma

Prostokąt z rogiem 2 px

Taki sam jak kwadrat w znaku. Pigułka jest miękka i konsumencka.

Dobrze

Precyzyjnie, w rodzinie kwadratu.

Źle

Pigułka gryzie się z kwadratową kropką.

11 · Kontekst

Przycisk stoi na spokojnym tle

Na czerni, bieli albo w ciemnej części gradientu. Nigdy w najjaśniejszym miejscu światła.

Dobrze

Nad światłem, na czerni.

Źle

Biały przycisk ginie w jasnym świetle.

12 · Treść

Czasownik i rzecz, najwyżej 3 słowa

Bez wykrzyknika i bez „kliknij”. Klient ma wiedzieć, co się stanie.

Dobrze

Konkretnie, spokojnie, po polsku.

Źle

Krzyk i ogólniki obniżają zaufanie.

13 · Telefon

Jeden przycisk na pełną szerokość

Poziom 1 na całą szerokość na dole ekranu, drugi wybór jako poziom 3 pod nim.

Dobrze

Jedna decyzja pod kciukiem.

Źle

Dwa pełne przyciski: dwa razy więcej wahania.

Ściąga

Pomarańcz to podpis, nie przycisk

Standard
Kontrast i kropka. Biały na czerni, czarny na bieli.
Moment
Pełny pomarańcz raz na stronę, na czerni, w ostatniej decyzji. Nigdy w nawigacji i aplikacji.
Kobalt
Linki, fokus, zaznaczenia i dane. Nigdy wypełnienie przycisku.
Forma
Prostokąt 2 px, czasownik i rzecz, najwyżej 3 słowa.
Szum — przejście w biel i czerń N1 standard · N2 alternatywa zapisana · N0 i N3 w „Tła v2 — legacy”
N1 · Ziarno tylko w kolorze rekomendacja · czyste końce
Sekcja jasna · #FFFFFF
Karta w kolorze tła#FFFFFF
Karta w kolorze tła#000000
Sekcja ciemna · #000000
1 · Sekcja → gradient → karta
2 · Wyjście z bieli
3 · Karta → gradient → sekcja
  • Ziarno rośnie razem z kolorem i znika na obu końcach. Biel i czerń gradientu to dokładnie #FFFFFF i #000000.
  • Sekcje i elementy w kolorze tła zlewają się bez szwu. W kolorze ziarno zostaje, więc nie ma pasm.
N2 · Ziarno rozpływa się dłuższy, miękki zanik
Sekcja jasna · #FFFFFF
Karta w kolorze tła#FFFFFF
Karta w kolorze tła#000000
Sekcja ciemna · #000000
1 · Sekcja → gradient → karta
2 · Wyjście z bieli
3 · Karta → gradient → sekcja
  • Ziarno sięga dalej w biel i czerń i gaśnie stopniowo (lupa 2). Sam koniec nadal jest czysty, więc szwu nie ma.
  • Bardziej miękkie i „analogowe”, ale w jasnej części pod tekstem zostaje lekka faktura.