To galeria koncepcji — Panel nie jest tu aktywny Demo hubGaleria← aios
01·P1 Grafit + Rdza · jasny·Operator Aion·Puls · fragment · 1440 × 700

Puls

aion-marketing/aion-marketing.pl
Szukaj lub wykonaj…⌘K
BuildLIVE · 14:32
12 min38 s
ok · 4 artykuły · 2 autorów · 5 stron
Gate SEOLIVE · 14:32
4blockery
missing description ×3 · missing sources ×1
UsageLIVE · 14:32
37,20/ 50 USD · 74 %
prognoza 42,92 USD · 85,8 %

Gate przed deployem

GateArtykułAutorStatus
missing descriptionlejek-dwustopniowyandrzej-niemiecblocker
missing sourceskoszt-pozyskania-klienta-cacaion-niemiecblocker
schema Article4 artykuły—przechodzi

Pasek desaturacji

accent-op vs warn ·
accent-cl vs teal ·
accent-cl vs warn ·
accent-op vs critical ·
CTA operator
CTA klient
badge warn4 blockery
badge criticalblocker
to samo w szarości
4 blockeryblocker

Próg: ≥ 1,5:1 wyraźne · 1,25–1,5 słabe · < 1,25 nierozróżnialne. Stosunek luminancji względnej dwóch barw, czyli to, co zostaje po zdjęciu koloru.

Kontrast AA · tekst 11 px na --card

TokenWartośćPróbkaStosunekAA (≥ 4,5:1)
Ostatni build · 12 min
02·P1 Grafit + Rdza · ciemny·Operator Aion·Puls · fragment · 1440 × 700

Puls

aion-marketing/aion-marketing.pl
Szukaj lub wykonaj…⌘K
BuildLIVE · 14:32
12 min38 s
ok · 4 artykuły · 2 autorów · 5 stron
Gate SEOLIVE · 14:32
4blockery
missing description ×3 · missing sources ×1
UsageLIVE · 14:32
37,20/ 50 USD · 74 %
prognoza 42,92 USD · 85,8 %

Gate przed deployem

GateArtykułAutorStatus
missing descriptionlejek-dwustopniowyandrzej-niemiecblocker
missing sourceskoszt-pozyskania-klienta-cacaion-niemiecblocker
schema Article4 artykuły—przechodzi

Pasek desaturacji

accent-op vs warn ·
accent-cl vs teal ·
accent-cl vs warn ·
accent-op vs critical ·
CTA operator
CTA klient
badge warn4 blockery
badge criticalblocker
to samo w szarości
4 blockeryblocker

Próg: ≥ 1,5:1 wyraźne · 1,25–1,5 słabe · < 1,25 nierozróżnialne. Stosunek luminancji względnej dwóch barw, czyli to, co zostaje po zdjęciu koloru.

Kontrast AA · tekst 11 px na --card

TokenWartośćPróbkaStosunekAA (≥ 4,5:1)
Ostatni build · 12 min
03·P2 Grafit + Kobalt · jasny·Operator Aion·Puls · fragment · 1440 × 700

Puls

aion-marketing/aion-marketing.pl
Szukaj lub wykonaj…⌘K
BuildLIVE · 14:32
12 min38 s
ok · 4 artykuły · 2 autorów · 5 stron
Gate SEOLIVE · 14:32
4blockery
missing description ×3 · missing sources ×1
UsageLIVE · 14:32
37,20/ 50 USD · 74 %
prognoza 42,92 USD · 85,8 %

Gate przed deployem

GateArtykułAutorStatus
missing descriptionlejek-dwustopniowyandrzej-niemiecblocker
missing sourceskoszt-pozyskania-klienta-cacaion-niemiecblocker
schema Article4 artykuły—przechodzi

Pasek desaturacji

accent-op vs warn ·
accent-cl vs teal ·
accent-cl vs warn ·
accent-op vs critical ·
CTA operator
CTA klient
badge warn4 blockery
badge criticalblocker
to samo w szarości
4 blockeryblocker

Próg: ≥ 1,5:1 wyraźne · 1,25–1,5 słabe · < 1,25 nierozróżnialne. Stosunek luminancji względnej dwóch barw, czyli to, co zostaje po zdjęciu koloru.

Kontrast AA · tekst 11 px na --card

TokenWartośćPróbkaStosunekAA (≥ 4,5:1)
Ostatni build · 12 min
04·P2 Grafit + Kobalt · ciemny·Operator Aion·Puls · fragment · 1440 × 700

Puls

aion-marketing/aion-marketing.pl
Szukaj lub wykonaj…⌘K
BuildLIVE · 14:32
12 min38 s
ok · 4 artykuły · 2 autorów · 5 stron
Gate SEOLIVE · 14:32
4blockery
missing description ×3 · missing sources ×1
UsageLIVE · 14:32
37,20/ 50 USD · 74 %
prognoza 42,92 USD · 85,8 %

Gate przed deployem

GateArtykułAutorStatus
missing descriptionlejek-dwustopniowyandrzej-niemiecblocker
missing sourceskoszt-pozyskania-klienta-cacaion-niemiecblocker
schema Article4 artykuły—przechodzi

Pasek desaturacji

accent-op vs warn ·
accent-cl vs teal ·
accent-cl vs warn ·
accent-op vs critical ·
CTA operator
CTA klient
badge warn4 blockery
badge criticalblocker
to samo w szarości
4 blockeryblocker

Próg: ≥ 1,5:1 wyraźne · 1,25–1,5 słabe · < 1,25 nierozróżnialne. Stosunek luminancji względnej dwóch barw, czyli to, co zostaje po zdjęciu koloru.

Kontrast AA · tekst 11 px na --card

TokenWartośćPróbkaStosunekAA (≥ 4,5:1)
Ostatni build · 12 min
05·Spec · rekomendacja palety·Operator Aion·decyzja dla K01+
Rekomendacja

P1 Grafit + Rdza

Operator dostaje rdzę, klient kobalt. Ten układ lepiej odróżnia akcent od statusów, bo kobalt klienta nie sąsiaduje z żadnym kolorem stanu, a rdza operatora jest wyraźnie ciemniejsza (jasny) lub jaśniejsza (ciemny) od --warn i --critical. W P2 rdza trafia do klienta — persony nietechnicznej, która najbardziej potrzebuje jednoznacznego „to jest przycisk, a to ostrzeżenie” — i w jasnym motywie ląduje luminancją dokładnie między --warn a --critical. Korekta o −10 % jasności nie ratuje: oddala od warn, ale zbliża do critical.

P1 · 4 z 4 par ≥ 1,5:1 po korekcieP2 · accent-cl jasny słaby vs warn i critical

Uzasadnienie

  • Separacja barwy. Statusy zajmują ciepłą stronę koła (żółty warn, czerwony critical) i zieleń. Kobalt jest jedyną wolną rodziną; powinien należeć do persony, która najczęściej klika CTA obok badge'y — klientowi. Rdza operatora sąsiaduje z critical, ale operator widzi ją tylko na CTA i aktywnym menu, nigdy na badge.
  • Separacja jasności. Tabela obok mierzy stosunek luminancji na żywo z renderowanych tokenów. P1 po trzech korektach spełnia ≥ 1,5:1 dla par CTA-vs-warn w obu motywach. P2 wymagałby zmiany --warn lub --critical, a te są wspólne i już zoptymalizowane pod AA.
  • Kontrast AA. Oba kandydaty przechodzą 4,5:1 dla tekstu 11 px na --card we wszystkich sześciu tokenach i obu motywach. AA nie rozstrzyga — rozstrzyga desaturacja.
  • Odległość od marki. Rdza #8f3312 jest ciemniejsza i mniej nasycona niż pomarańcz strony marketingowej; kobalt nie występuje ani na stronie, ani w hubie. Admin ma wyglądać jak narzędzie, nie jak landing.
  • Ciemny motyw. W P1 ciemnym oba akcenty musiały zostać rozjaśnione (rdza +6, kobalt +8 pkt), bo przy jasności zbliżonej do --warn ciemnego traciły odróżnialność. Po korekcie tekst CTA w --bg utrzymuje > 10:1.

Pomiar desaturacji · stosunek luminancji (na żywo z czterech artboardów)

ParaP1 jasnyP1 ciemnyP2 jasnyP2 ciemnyDlaczego to ważne
accent-op vs warnCTA operatora obok badge'a warn na Pulsie — najczęstsze sąsiedztwo.
accent-cl vs warnTo samo dla klienta — persona nietechniczna, najniższa tolerancja na dwuznaczność.
accent-op vs criticalRdza vs czerwień — sąsiedztwo barwy; ratuje je jasność i to, że critical nigdy nie jest tłem przycisku.
accent-cl vs tealTeal to tag modułu, nie stan — słaby wynik akceptowalny, bo tag nigdy nie jest CTA.

Korekty hexów zapisane w tym pliku

Kandydat · tokenZadanePrzyjęteZmiana
P1 · --accent-cl · jasny#1d4ed8#1a3fb8−7 pkt jasności HSL · vs warn 1,3 → ≈1,7
P1 · --accent-op · ciemny#ffa27a#ffb899+6 pkt · vs warn 1,36 → ≈1,6
P1 · --accent-cl · ciemny#7fb6e0#9ccbee+8 pkt · vs warn 1,23 → ≈1,55
P2 · --accent-cl · jasny#b4531f#9a4519−6 pkt · vs warn 1,0 → ≈1,3; vs critical spada do ≈1,0 — nie do naprawienia bez zmiany statusów
P2 · --accent-op · ciemny#9db4ff#b3c5ff+4 pkt · vs warn 1,32 → ≈1,57
P2 · --accent-cl · ciemny#f3a57e#f7b898+6 pkt · vs warn 1,33 → ≈1,56

Co dalej

  • Przyjąć P1 z korektami jako blok tokenów dla wszystkich plansz K01–K12. Plansza 00 Design System v2 już używa tych wartości.
  • Zamrozić --warn i --critical; każda przyszła zmiana akcentu wraca na ten pasek desaturacji.
  • Jeśli właściciel woli kobalt dla operatora (P2), warunkiem jest zmiana --accent-cl na barwę spoza pasma ciepłego — np. zieleń morska — co koliduje z --teal. Dlatego P2 nie ma prostej ścieżki.
  • Wszystkie liczby na tej planszy są mierzone z renderu, nie wpisane ręcznie — zmiana tokenu w bloku od razu zmienia werdykty.