To galeria koncepcji — Panel nie jest tu aktywny Demo hubGaleria← aios
00-A·Tokeny · paleta P1 Grafit + Rdza·Operator Aion·jasny (klient) + ciemny (operator)

Motyw jasny · :root

domyślny dla klienta
--bg
--card
--surface-2
--surface-3
--line
--line-soft
--text
--muted
--ok
--warn
--critical
--teal
--blue
--purple (zadeklarowany, nieużywany)
--accent-op rdza
--accent-cl kobalt · skorygowany
Pasek desaturacji · jasność par (filtr szarości po prawej, wskaźnik = stosunek luminancji)
accent-op vs warn ·
accent-cl vs teal ·
accent-cl vs warn ·
accent-op vs critical ·
CTA klient
CTA operator
badge warn4 blockery
badge criticalzablokowane
badge okok

Motyw ciemny · [data-theme="operator"]

domyślny dla operatora
--bg
--card
--surface-2
--surface-3
--line
--line-soft
--text
--muted
--ok
--warn
--critical
--teal
--blue
--purple (zadeklarowany, nieużywany)
--accent-op rdza · skorygowany
--accent-cl kobalt · skorygowany
Pasek desaturacji · jasność par (filtr szarości po prawej, wskaźnik = stosunek luminancji)
accent-op vs warn ·
accent-cl vs teal ·
accent-cl vs warn ·
accent-op vs critical ·
CTA operator
CTA klient
badge warn4 blockery
badge criticalzablokowane
badge okok

Skala odstępów · 4 px

--sp-1 4 · --sp-2 8 · --sp-3 12 · --sp-4 16 · --sp-5 20 · --sp-6 24 · --sp-7 32 · --sp-8 40

Rytm 8 px wewnątrz sekcji, 32–40 px między sekcjami.

Promienie i wymiary

--r-card 12 · --r-ctl 9 · --r-chip 999

--tap 44 · --dur 140ms · --nav-w 244 · --nav-w-min 64 · --line-w 56 · --topbar-h 56 · --fold 810

Odcienie tylko przez color-mix

Hex wyłącznie w dwóch blokach tokenów. Tła badge'y = 12–14 % tokenu na przezroczystym; skeleton 6–12 % tekstu; aktywna pozycja menu 12 % akcentu. Zero opacity.

00-B·Typografia · 7 stopni·wszystkie persony·--font-ui = stack systemowy · --font-mono tylko liczby, czas, ID, hash, kod
--fs-h1 · 26 / 600Puls tenanta aion-marketingTytuł ekranu „Witaj”, nagłówek widoku Exit. Jeden na ekran.
--fs-num · 28 mono / 50037,20 / 50 USDLiczba główna StatCard i StatusTile. Zawsze mono, zawsze z jednostką.
--fs-h2 · 18 / 600Gate SEO · 4 blockeryNagłówek sekcji w treści widoku, tytuł drawera.
--fs-title · 15 / 600Build & DeployTytuł w topbarze, brand, nagłówek karty.
--fs-body · 13 / 400Directus zostaje edytorem treści; admin pokazuje to, czego Directus nie widzi: moduły, gate'y SEO, WebMCP, usage, exit-readiness.Tekst podstawowy, komórki tabel, pozycje menu, przyciski.
--fs-meta · 11 / 400–500Ostatni build: ok · 12 min · 38 s · 4 artykuły · 2 autorów · 5 stronEtykiety, badge, okruszki, nagłówki tabel, signpost-row. Minimalny rozmiar testowany na AA.
--fs-mini · 10 monoLIVE · 14:32   UNVERIFIED   STALE · 26 h   BLOCKED   7f3a9c2Wyłącznie etykiety wiarygodności, skróty klawiszowe, hash. Nigdy zdania.

Zasady zapisu

  • Sentence case wszędzie: „Widok pełny”, nie „WIDOK PEŁNY”. Zero wersalików z CSS, zero rozstrzelenia liter.
  • Liczby po polsku: przecinek dziesiętny, spacja przed jednostką i %: 37,20 USD · 74 %.
  • Separator list „ · ” (spacja, kropka środkowa, spacja). Czas hh:mm, czas trwania 12 min · 38 s.

Mono — gdzie tak, gdzie nie

  • Tak: 37,20, 14:32, aion-marketing, 7f3a9c2, lejek-dwustopniowy, ID autora, kod.
  • Nie: nagłówki, opisy, przyciski, treść komórek tekstowych, etykiety menu.

Wagi

  • 400tekst, meta, komórki
  • 500badge, aktywna pozycja menu, liczby mono, primary CTA
  • 600h1, h2, title, brand — nic powyżej 600
00-C·Komponenty · stany · jasny·Klient owner (akcent kobalt)

Przyciski

primary
hover
focus
tap 44
secondary
hover
ghost
disabled (bez opacity)
pole
Szukaj artykułu…
focus
intencja-nie-keyword

Badge i etykiety wiarygodności

ok4 blockeryzablokowaneaios-seo2 autorów
LIVE · 14:32UNVERIFIEDSTALE · 26 hBLOCKED

Status = ikona + tekst + etykieta wiarygodności. Nigdy sam kolor. Gdy nie ma problemu — brak badge'a („cisza jako OK”).

.mode-badge · .mode-switch

aionstandalonePodstawowyPełnyPodstawowyPełny

.conceal · sekrety

ukryty
••••••••••••••••
odsłonięty (auto-ukrycie po 5 s)
••••••••••••••••

.kill-lock

Commercekill-gate Discovery

.status-tile · trzy stany

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
TrackingUNVERIFIED
GA4skonfigurowany
brak odczytu z produkcji — zweryfikuj po deployu

.stat-card · .chart-bars

Usage · bieżący miesiąc37,20 / 50 USD74 %
Prognoza na koniec miesiąca42,92 USD85,8 % · zbliża się do limitu
Koszt dzienny · USDLIVE · 14:32
1 wrzdziś · 14prognoza · 30

.gate-table

GateArtykułIleStatus
missing descriptionlejek-dwustopniowy1blocker
missing descriptionintencja-nie-keyword1blocker
missing descriptionnie-sprzedajemy-pakietow1blocker
missing sourceskoszt-pozyskania-klienta-cac1ostrzeżenie
schema Article4 artykuły0przechodzi
Blockery 4Ostrzeżenia 1Przechodzi 11

.event-stream

Build zakończony · 12 min 38 ssystem
Opublikowano koszt-pozyskania-klienta-cacandrzej-niemiec
Gate SEO: missing description ×3aios-seo
WebMCP: odświeżono pack content-credentialsaion-niemiec
Usage: próg 70 % przekroczonysystem

.diff-panel

poprzedni build · 7f3a9c2
site: aion-marketing.pl
articles: 3
authors: [andrzej-niemiec]
pages: 5
webmcp: [site-nav, contact]
ten build · b81e0d4
site: aion-marketing.pl
articles: 4
authors: [andrzej-niemiec, aion-niemiec]
pages: 5
webmcp: [site-nav, contact, content-credentials]

.blocked-banner · .empty-checklist · .skeleton

Deploy zablokowany przez gate SEO3 artykuły bez description · BLOCKED · 14:32
Tracking nie jest jeszcze skonfigurowany
Dodaj ID GA4 w Ustawieniach
Włącz moduł aios-tracking
Zrób rebuild i zweryfikuj odczyt z produkcji

.signpost-row · .drawer

Ukryte w widoku podstawowym|Build: ok · 12 min·Tracking: skonfigurowany·Usage: 74 %Pokaż widok pełny

Jeden wiersz read-only na Starcie. Bez badge'y, bez kolorów stanu — tylko liczby mono i link do trybu pełnego. Znika w widoku pełnym.

lejek-dwustopniowy
Autor
andrzej-niemiec
Status
published
Gate SEO
missing description
Ostatni build
b81e0d4 · 14:32
00-D·Komponenty · stany · ciemny·Operator Aion (akcent rdza)

Przyciski

primary
hover
focus
tap 44
secondary
hover
ghost
disabled (bez opacity)
pole
Szukaj artykułu…
focus
intencja-nie-keyword

Badge i etykiety wiarygodności

ok4 blockeryzablokowaneaios-seo2 autorów
LIVE · 14:32UNVERIFIEDSTALE · 26 hBLOCKED

Status = ikona + tekst + etykieta wiarygodności. Nigdy sam kolor. Gdy nie ma problemu — brak badge'a („cisza jako OK”).

.mode-badge · .mode-switch

aionstandalonePodstawowyPełnyPodstawowyPełny

.conceal · sekrety

ukryty
••••••••••••••••
odsłonięty (auto-ukrycie po 5 s)
••••••••••••••••

.kill-lock

Commercekill-gate Discovery

.status-tile · trzy stany

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
TrackingUNVERIFIED
GA4skonfigurowany
brak odczytu z produkcji — zweryfikuj po deployu

.stat-card · .chart-bars

Usage · bieżący miesiąc37,20 / 50 USD74 %
Prognoza na koniec miesiąca42,92 USD85,8 % · zbliża się do limitu
Koszt dzienny · USDLIVE · 14:32
1 wrzdziś · 14prognoza · 30

.gate-table

GateArtykułIleStatus
missing descriptionlejek-dwustopniowy1blocker
missing descriptionintencja-nie-keyword1blocker
missing descriptionnie-sprzedajemy-pakietow1blocker
missing sourceskoszt-pozyskania-klienta-cac1ostrzeżenie
schema Article4 artykuły0przechodzi
Blockery 4Ostrzeżenia 1Przechodzi 11

.event-stream

Build zakończony · 12 min 38 ssystem
Opublikowano koszt-pozyskania-klienta-cacandrzej-niemiec
Gate SEO: missing description ×3aios-seo
WebMCP: odświeżono pack content-credentialsaion-niemiec
Usage: próg 70 % przekroczonysystem

.diff-panel

poprzedni build · 7f3a9c2
site: aion-marketing.pl
articles: 3
authors: [andrzej-niemiec]
pages: 5
webmcp: [site-nav, contact]
ten build · b81e0d4
site: aion-marketing.pl
articles: 4
authors: [andrzej-niemiec, aion-niemiec]
pages: 5
webmcp: [site-nav, contact, content-credentials]

.blocked-banner · .empty-checklist · .skeleton

Deploy zablokowany przez gate SEO3 artykuły bez description · BLOCKED · 14:32
Tracking nie jest jeszcze skonfigurowany
Dodaj ID GA4 w Ustawieniach
Włącz moduł aios-tracking
Zrób rebuild i zweryfikuj odczyt z produkcji

.signpost-row · .drawer

Ukryte w widoku podstawowym|Build: ok · 12 min·Tracking: skonfigurowany·Usage: 74 %Pokaż widok pełny

Jeden wiersz read-only na Starcie. Bez badge'y, bez kolorów stanu — tylko liczby mono i link do trybu pełnego. Znika w widoku pełnym.

lejek-dwustopniowy
Autor
andrzej-niemiec
Status
published
Gate SEO
missing description
Ostatni build
b81e0d4 · 14:32
00-E1·Shell · widok podstawowy · jasny·Klient owner·data-mode="basic" · data-role="client"

Start

aion-marketing/aion-marketing.pl
Szukaj lub wykonaj…⌘K

Dobry wieczór. Strona działa.

ArtykułyLIVE · 14:32
4opublikowane
ostatni: koszt-pozyskania-klienta-cac
SEOLIVE · 14:32
4do poprawy
3 artykuły bez opisu
ObrazyLIVE · 14:32
38zoptymalizowane
wszystkie mają alt

Co wymaga uwagi

Wszystkie w SEO
ArtykułProblemAkcja
lejek-dwustopniowybrak opisu (description)Uzupełnij w Directus
intencja-nie-keywordbrak opisu (description)Uzupełnij w Directus
nie-sprzedajemy-pakietowbrak opisu (description)Uzupełnij w Directus
koszt-pozyskania-klienta-cacbrak źródełDodaj źródła
Ukryte w widoku podstawowym|Build: ok · 12 min·Tracking: skonfigurowany·Usage: 74 %Pokaż widok pełny
00-E2·Shell · widok pełny · ciemny · drawer otwarty·Operator Aion·data-mode="full" · data-role="operator" · data-theme="operator"

Puls

aion-marketing/aion-marketing.pl
Szukaj lub wykonaj…⌘K

Puls · aion-marketing.pl

ArtykułyLIVE · 14:32
4opublikowane
ostatni: koszt-pozyskania-klienta-cac
SEOLIVE · 14:32
4do poprawy
3 artykuły bez opisu
ObrazyLIVE · 14:32
38zoptymalizowane
wszystkie mają alt

Co wymaga uwagi

Wszystkie w SEO
ArtykułProblemAkcja
lejek-dwustopniowybrak opisu (description)Uzupełnij w Directus
intencja-nie-keywordbrak opisu (description)Uzupełnij w Directus
nie-sprzedajemy-pakietowbrak opisu (description)Uzupełnij w Directus
koszt-pozyskania-klienta-cacbrak źródełDodaj źródła
Ukryte w widoku podstawowym|Build: ok · 12 min·Tracking: skonfigurowany·Usage: 74 %Pokaż widok pełny
Ostatni build · b81e0d4
Wynik
ok · 12 min · 38 s
Artykuły
4
Autorzy
2
Strony
5
WebMCP
site-nav · contact · content-credentials
Odczyt
LIVE · 14:32
zmiany vs 7f3a9c2
articles: 4
authors: +aion-niemiec
webmcp: +content-credentials
00-E3·Shell · widok podstawowy · ciemny·Klient member (redaktor)·data-mode="basic" · data-role="client" · data-theme="operator"

Start

aion-marketing/aion-marketing.pl
Szukaj lub wykonaj…⌘K

Dobry wieczór, Andrzej. Strona działa.

ArtykułyLIVE · 14:32
4opublikowane
ostatni: koszt-pozyskania-klienta-cac
SEOLIVE · 14:32
4do poprawy
3 artykuły bez opisu
ObrazyLIVE · 14:32
38zoptymalizowane
wszystkie mają alt

Co wymaga uwagi

Wszystkie w SEO
ArtykułProblemAkcja
lejek-dwustopniowybrak opisu (description)Uzupełnij w Directus
intencja-nie-keywordbrak opisu (description)Uzupełnij w Directus
nie-sprzedajemy-pakietowbrak opisu (description)Uzupełnij w Directus
koszt-pozyskania-klienta-cacbrak źródełDodaj źródła
Ukryte w widoku podstawowym|Build: ok · 12 min·Tracking: skonfigurowany·Usage: 74 %Pokaż widok pełny
00-E4·Shell · widok pełny · jasny · standalone·Self-host standalone·data-mode="full" · data-role="operator" · data-eco="standalone"

Puls

aion-marketing/aion-marketing.pl
Szukaj lub wykonaj…⌘K

Puls · aion-marketing.pl

ArtykułyLIVE · 14:32
4opublikowane
ostatni: koszt-pozyskania-klienta-cac
SEOLIVE · 14:32
4do poprawy
3 artykuły bez opisu
ObrazyLIVE · 14:32
38zoptymalizowane
wszystkie mają alt

Co wymaga uwagi

Wszystkie w SEO
ArtykułProblemAkcja
lejek-dwustopniowybrak opisu (description)Uzupełnij w Directus
intencja-nie-keywordbrak opisu (description)Uzupełnij w Directus
nie-sprzedajemy-pakietowbrak opisu (description)Uzupełnij w Directus
koszt-pozyskania-klienta-cacbrak źródełDodaj źródła
Ukryte w widoku podstawowym|Build: ok · 12 min·Tracking: skonfigurowany·Usage: 74 %Pokaż widok pełny
00-F·Spec · zasady i decyzje·Operator Aion·wiążące dla K01+

Cisza jako OK

  • Brak problemu = brak badge'a. StatusTile w stanie OK ma przezroczystą lewą krawędź, ikonę check w --ok i zwykły tekst. Nie ma zielonych pastylek „wszystko dobrze”.
  • Badge pojawia się tylko dla --warn i --critical oraz dla tagów neutralnych (moduł, liczba autorów). badge-ok istnieje wyłącznie dla wyników testów (AA, desaturacja) i checklist.
  • Kolor stanu wolno położyć w trzech miejscach: badge, licznik (np. słupek warn na wykresie), lewa krawędź 3 px StatCard/StatusTile. Nigdzie indziej — nie na tle karty, nie na wierszu tabeli, nie na ikonie menu.
  • Wyjątek: .blocked-banner ma tło 8 % --critical na karcie — jedyny komponent z barwionym tłem, bo blokuje akcję (deploy) i musi być widoczny nad foldem.
  • Status nigdy samym kolorem: ikona + tekst + etykieta wiarygodności. Wygaszanie przez --muted i kreskowany obrys, nie opacity.

Gdzie wolno użyć akcentu

  • Jeden primary CTA na widok (Rebuild, Otwórz w Directus, Zapisz). Tekst CTA w --bg, dzięki czemu na jasnym jest jasny, na ciemnym ciemny.
  • Aktywna pozycja menu (tło 12 % akcentu + tekst i ikona w akcencie), podkreślenie aktywnego taba, focus ring 2 px, linki, znak brandu 20 px.
  • Nie: badge, wiersze tabel, słupki, ikony dekoracyjne, nagłówki, ramki kart, tło sekcji, ModeBadge, AionLine.
  • Akcent zależy od roli: [data-role="operator"] → rdza, [data-role="client"] → kobalt. Motyw (data-theme) i tryb (data-mode) nie zmieniają akcentu; data-mode nie zmienia żadnego koloru.
  • --teal = tag modułu i kropka „aion” w ModeBadge. --blue = link w treści Directus-owej i diff „info” — nie jest stanem. --purple zadeklarowany, nieużywany (rezerwa na Commerce po zniesieniu kill-gate).

Mapowanie wiarygodności → komponenty

EtykietaZnaczenieWyglądKomponenty
LIVE · 14:32Odczyt z systemu źródłowego (Directus, build log, provider usage) młodszy niż próg widoku (Puls 15 min, Usage 1 h).Ikona zegara + LIVE · hh:mm mono 10 px w --muted. Bez koloru stanu — wiarygodność ≠ stan.status-tile · stat-card · gate-table (nagłówek) · event-stream · chart-bars · signpost-row
UNVERIFIEDWartość zadeklarowana przez człowieka (ID GA4, klucz, domena), której system nie potwierdził odczytem z produkcji.Kreskowany obrys chip, ikona „?”, tekst w --muted. Liczba główna pozostaje w --text, opis pod nią mówi co zrobić.status-tile · conceal · empty-checklist · signpost-row · drawer (kv)
STALE · 26 hOstatni udany odczyt starszy niż próg; system próbował i nie dostał nowych danych.Kreskowany obrys, ikona koła z kreską, wiek danych zamiast godziny. Wartość liczbowa w --muted. Słupki prognozy kreskowane.status-tile · stat-card · chart-bars (is-forecast) · event-stream
BLOCKEDGate zatrzymał akcję (deploy, publikację) albo moduł jest za kill-gate.Jedyna etykieta w kolorze — --critical, ikona przekreślonego koła. Zawsze z powodem i przyciskiem „Pokaż blockery” / tooltipem „kill-gate Discovery”.blocked-banner · gate-table (badge-critical) · kill-lock · status-tile (is-critical)

Decyzje o korektach hexów (P1)

TokenZadanePrzyjętePowód
--accent-cl · jasny#1d4ed8Desaturacja vs --warn dawała ≈1,3:1 (słabe). Przyciemnienie o ~7 pkt jasności HSL → ≈1,7:1, kontrast na --card rośnie do ≈8,6:1.
--accent-op · ciemny#ffa27aVs --warn ciemny ≈1,36:1. Rozjaśnienie o ~6 pkt → ≈1,6:1; tekst CTA w --bg (ciemny) zachowuje > 10:1.
--accent-cl · ciemny#7fb6e0Vs --warn ciemny ≈1,23:1 (nierozróżnialne). Rozjaśnienie o ~8 pkt → ≈1,55:1.
--accent-op · jasny#8f3312Bez zmian. Vs --warn ≈1,6:1, kontrast na karcie ≈7,9:1. Sąsiedztwo barwy z --critical akceptowalne: krytyczne występuje tylko na badge z ikoną, akcent tylko na CTA/menu.
reszta paletywg §3bez zmianWszystkie tokeny tekstowe 11 px na --card ≥ 5,0:1 w obu motywach (pomiar na żywo na 00-A i w pliku 00b).

Pozostałe decyzje

  • Tryby. [data-mode] steruje tylko display: klasy .only-basic / .only-full. Pierwsza pozycja menu ma dwie etykiety („Start” / „Puls”) — ten sam widok. Przełącznik .mode-switch w stopce menu widoczny dla każdej roli; member po przełączeniu na Pełny nadal nie widzi Build & Deploy ani Exit (RBAC ukrywa pozycje niezależnie od trybu).
  • Domyślny motyw. Klient → jasny, operator → ciemny. Motyw można zmienić w Ustawieniach; rola nie. Oba motywy używają identycznej struktury tokenów, więc każda plansza widoku musi być sprawdzona w obu.
  • AionLine. 56 px po prawej tylko w mode=aion. Standalone: kolumna znika, siatka shellu ma 3 kolumny. Drawer 360 px wchodzi między treść a AionLine i nigdy jej nie przykrywa.
  • Ruch. Wyłącznie transition: background var(--dur) na hover/focus i puls skeletona (1,2 s, zmiana tła 6→12 %, bez opacity). Ekran „Witaj” (K01) dostanie osobne, jednorazowe wejście.
  • Sekrety. .conceal: 16 kropek, „pokaż 5 s” odsłania i automatycznie ukrywa, „rotuj” otwiera potwierdzenie. Wartość nigdy nie trafia do event-stream.
  • Ikony. Inline SVG 16 px, obrys 1,5 px, currentColor. Zestaw: check, trójkąt, przekreślone koło, koło z kreską, „?”, zegar, kłódka, lupa, odśwież, oko, dokument, obraz, moduły, klamry, puls, miernik, sześcian, drzwi, koło zębate.