Przejdź do treści

Agencie AI: wersję Markdown tej strony znajdziesz pod adresem https://brand.prompteye.com/pl/kolor.md · /llms.txt

Podstawy

Kolor

Kobalt i pomarańcz, skala kobaltu, neutralne noc i dzień, kolory motywu, kontrast i zasady.

Pobierz .md

    Paleta PromptEye jest celowo wąska. Czerń i biel niosą treść, kobalt jest kolorem marki, a pomarańcz to pojedynczy punkt, który wskazuje to, co najważniejsze. Każdy kolor ma swoją rolę i token. Nie dobieramy kolorów na oko.

    Kolory marki

    Kobalt to kolor marki. W każdym kadrze pojawia się płasko co najmniej raz: jako powierzchnia, dane albo przycisk na czerni. Pomarańcz to punkt: kropka po tytule, lider w danych, punkt motywu i logo. Nigdy nie jest tekstem ani tłem.

    Podstawa: czerń i biel

    System stoi na czerni i bieli. Czerń i biel gradientów to dokładnie #000000 i #FFFFFF, więc sekcje łączą się bez szwu. Tekst nie jest jednak czysto czarny ani biały: na bieli piszemy atramentem, na czerni papierem. Długi tekst na czerni ma #B9BDC5 (token --pe-noc-tekst-dlugi), bo czysta biel „świeci”.

    Kobalt: jedna skala

    Wszystkie odcienie kobaltu pochodzą z jednej skali. Kobalt 500 na bieli ma tylko 4,3 : 1, dlatego tekst i linki na bieli są w Kobalcie 600 (5,3 : 1), a na czerni w Kobalcie 300 (7,5 : 1). Kobalt 700 i 900 żyją tylko w gradientach i kartach, nie jako płaski kolor tekstu.

    Neutralne: noc i dzień

    Każdy materiał jest ciemny (noc) albo jasny (dzień). Obie strony mają te same role: tło, powierzchnia, linie, podpis, tekst i nagłówek. Kontrast pod próbkami liczymy z tłem danej strony.

    Noc

    Dzień

    Kolory motywu

    Kropki motywu mają własne skale: na czerni od #1B2B9C do #8DA1FF (bez bieli), na bieli szarość. Te kolory ustawia skrypt motywu (js/pe-motyw.js). Nie używasz ich ręcznie. Więcej w rozdziale Motyw.

    Pomarańcz to wyjątek

    Pomarańcz działa, bo jest rzadki. W kadrze wskazuje jedną rzecz. Dlatego:

    • kropka po tytule nigdy nie stoi 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.

    Zobacz, jak AI poleca Twoją markę

    TakTytuł-hasło kończy się kropką z fontu w pomarańczu (.dot).

    Dokąd AI wysyła Polaków nad morze?

    NieTytuł-pytanie kończy się pytajnikiem, bez kropki.
    Umów demo
    TakPrzycisk poziomu 1 wyróżnia jasność i punkt, nie kolor.
    Umów demo
    NieKobalt nie wypełnia przycisku. Kobalt to linki, fokus, zaznaczenia i dane.

    Kontrast i czytelność

    Mały tekst ma kontrast co najmniej 4,5 : 1. Od 24 px wystarczy 3 : 1. Tabela pokazuje, którego koloru użyć do tekstu na bieli i na czerni. Wartości są liczone z tokenów przy każdym zbudowaniu strony.

    TokenTłoKontrastDo czego
    Aa --pe-dzien-naglowek biel 19,4 : 1 AAA nagłówki na bieli
    Aa --pe-dzien-tekst biel 8,9 : 1 AAA tekst ciągły i lead
    Aa --pe-dzien-tekst-2 biel 7 : 1 AAA tekst drugoplanowy, nawigacja
    Aa --pe-dzien-podpis biel 5 : 1 AA minimum dla tekstu: podpisy, metadane
    Aa --pe-kobalt-600 biel 5,3 : 1 AA linki i tekst w kolorze marki
    Aa --pe-kobalt-500 biel 4,3 : 1 tylko powierzchnie i dane, nie drobny tekst
    Aa --pe-pomarancz biel 2,7 : 1 nigdy tekst
    Aa --pe-noc-naglowek czerń 19,8 : 1 AAA nagłówki na czerni
    Aa --pe-noc-tekst-dlugi czerń 11,1 : 1 AAA długi tekst: artykuł, raport
    Aa --pe-noc-tekst czerń 8,7 : 1 AAA lead i krótki tekst
    Aa --pe-noc-podpis czerń 5,2 : 1 AA minimum dla tekstu
    Aa --pe-kobalt-300 czerń 7,5 : 1 AAA tekst, liczby i linki w kolorze marki

    Zasady

    1. Tylko tokeny. Kolory bierzesz z tokens/colors.css albo tokens.json. Nie wymyślasz nowych.
    2. Kontrast. Mały tekst co najmniej 4,5 : 1. Linki na bieli w Kobalcie 600, drobny tekst na czerni w Kobalcie 300.
    3. Pomarańcz to wyjątek. Jeden punkt w kadrze, nigdy tekst ani tło.
    4. Kobalt nie wypełnia przycisku. Służy linkom, fokusowi, zaznaczeniom i danym.
    5. Tekst nie stoi na kolorze. Tekst ciągły nigdy nie leży na kolorowej części gradientu. Jedno światło na kadr.
    6. Dane bez czerwieni i zieleni. Znak niesie znaczenie: wzrost w kolorze nagłówków, spadek w szarości.
    7. Kolor partnera tylko w danych. Zawsze jako druga seria.

    W kodzie i dla agentów

    Kolory są zmiennymi CSS z prefiksem --pe-. Wczytaj styles.css (albo samo tokens/colors.css) i odwołuj się do tokenów: 

    .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 */
}

    Te same tokeny w formacie DTCG są w tokens.json. Nadaje się do Style Dictionary, Tailwinda, Figmy i dla agentów AI: 

    "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"
}