# Creative Brief KONTRA — Akademia Claude CFS · Moduł M3 „Bezpieczeństwo i poufność" (prototyp fundamentu)

> Faza 1, **wersja 2 — PIVOT 2026-07-14** (v1 odrzucone przez usera, patrz niżej). Zakres bez zmian:
> **prototyp modułu M3** + fundament wizualny całego huba (żeby M3 dowiózł styl, w którym zbuduje się
> reszta poziomów 0–5). Materiał źródłowy: `Akademia-Claude-CFS/Plan-*.md`,
> `Specyfikacja-wykonawcza-*.md`, `Wideo-instruktazowe-*.md`, mapa mermaid.
> Twarde ograniczenia usera: paleta zablokowana na markę CFS, WCAG AA, prostota ponad popis.

## PIVOT — co i dlaczego się zmieniło (2026-07-14)

**Werdykt usera o v1 (cytat):** „co to za gówno z tą barierą, do wyjebania, nie żłużę sobie takiej
amatorszczyzny." Trzy konkretne odrzucenia, wszystkie zaadresowane w v2:

1. **Cały parasol „szlaban/bramka/przepustka" wyleciał** — nie tylko animacja demo, cały motyw
   (nazewnictwo „punkt kontrolny", „karta przejazdu", „dziennik kontrolny", „kwit", memorable element
   „belka szlabanu"). Usunięte ze WSZYSTKICH sekcji poniżej, nie tylko z §9.
2. **Zakaz nowej metafory-gadżetu.** To powtarzalny błąd KONTRA (por. memory `koncept-z-dystansu-nie-z-branzy`,
   `zakaz inflacji frazy w motyw`) — wciskanie tematycznego konceptu na siłę zamiast budowania
   charakteru rzemiosłem. **W v2 NIE MA nowego parasola-fabuły.** Parasol jest przedefiniowany jako
   **rejestr/dyscyplina** (jak strona się ZACHOWUJE i jest ZROBIONA), nie jako opowieść/mechanizm
   (patrz §1 — self-check „to nie jest inflacja frazy" zastosowany na serio, nie deklaratywnie jak w v1).
3. **Layout poszerzony.** v1 zamykał treść lekcji w `min(68ch)` na tle ogromnego pustego marginesu —
   user: absurdalnie wąska kolumna. v2 wprowadza **układ z marginaliami** — szeroka ramka strony,
   kolumna czytania nadal ~68–72ch (bo to fizyczna granica czytelności długiego tekstu, nie estetyka),
   ale osadzona w świadomie zaprojektowanym, PRACUJĄCYM marginesie (numeracja, status, nawigacja „na tej
   stronie"), nie w martwej pustce. Viewport jest wykorzystany, nie ozdobiony ciszą.

**Treść M3 — pivot merytoryczny (decyzja usera, „Zgoda + zakres, nie ukrywanie"):** stara treść
(anonimizowane „Klient A / kwota XXX") wyleciała jako bez sensu — user: „po to Claude ma dostęp do
takich danych aby je przetwarzać, na chuj mi analiza jak nie podam danych". Nowa doktryna, patrz §2.

---

## 0. Archetyp i rejestr

- **Archetyp:** dokumentacja / wewnętrzne narzędzie edukacyjne (L&D hub, nie landing sprzedażowy).
- **Rejestr:** **utility** — z dyscypliną edytorialną w aparacie redakcyjnym (numeracja, etykiety,
  didaskalia), bez montażu filmowego. Wpisuję JEDNĄ wartość: **utility**.
- **Cel biznesowy:** informacja + zmiana zachowania (świadome korzystanie z narzędzi Claude: zgoda,
  zakres, ostrożność przy operacjach zmieniających) + adopcja narzędzia w firmie o różnym poziomie
  obycia z technologią.
- **Rola filmowości:** brak jako esencja strony. Jedyny ruchomy element to jeden, lokalny, **sterowany
  klikiem** komponent demo w M3 (patrz §9) — nie storyboard całej strony, nie autoplay, nie scroll-jacking.
  Bramka filmowego storyboardu (kontra-gate) NIE dotyczy tego briefu.
- **Dlaczego nie filmowy:** odbiorca to kadra i biuro w trakcie pracy, częściowo mało obeznana z
  technologią — ma szybko ZROZUMIEĆ i BEZPIECZNIE DZIAŁAĆ, nie przeżyć spektakl. **Craft idzie w
  typografię, hierarchię, przestrzeń i dyscyplinę redakcyjną — nie w wymyślony mechanizm ani montaż.**

## 1. PARASOL

**Parasol jednym zdaniem:** to nie jest metafora ani opowieść — to **rejestr**: Akademia ma czytać się
i działać jak dobrze złożony, wewnętrzny dokument techniczny firmy inżynierskiej — precyzyjny,
numerowany, bez ozdoby — a charakter strony bierze się WYŁĄCZNIE z tego, jak rygorystycznie ten rejestr
jest utrzymany (typografia, hierarchia, rytm pionowy, ograniczona paleta jako czysty sygnał stanu), nie
z żadnego wymyślonego mechanizmu/gadżetu/świata.

**Zdanie nadrzędne:** Ta strona ma być odebrana jako **wewnętrzny podręcznik napisany przez samą firmę
inżynierską dla własnych ludzi** — ktoś usiadł i porządnie to złożył (typografia, numeracja, marginalia),
bo tak się u nich robi dokumentację — a nie jako kurs online zlecony agencji e-learningowej. Nie ma tu
fabuły do odkrycia; jest tylko widoczna, konsekwentna dyscyplina.

**Samokontrola „czy to znowu inflacja frazy w motyw" (obowiązkowa po odrzuceniu v1):** v1 wziął fakt
„CFS buduje szlabany" i zrobił z niego dosłowny świat UI (belka, bramka, karta przejazdu) — to była
DOKŁADNIE zabroniona inflacja: hasło/fakt o kliencie potraktowany jako fabuła. v2 świadomie NIE robi
tego zamiennika w drugą stronę (np. „linie drogowe", „tablice sterowania ruchem" jako nowy motyw
dekoracyjny) — jedyne, co v2 bierze z tego, że CFS jest firmą inżynierską, to: (a) realny kolor marki
jako jedyny akcent (bo to dosłownie ich barwa, nie wybór estetyczny), (b) rejestr typograficzny
dokumentacji technicznej jako STYL, nie jako scenografia. Zero nowego „świata" do udekorowania.

**Audience:** kadra zarządzająca i biuro CFS, różny poziom obycia z technologią i angielskim — chce
zrozumieć bez wysiłku, poczuć się bezpiecznie z nowym narzędziem i wiedzieć dokładnie, gdzie jest
granica; boi się zrobić coś źle i boi się materiału infantylnego albo zaśmieconego żargonem.

**Test parasola (sekcja → jak realizuje rejestr, BEZ metafory):**
- Hub start / kafle modułów → katalog modułów z numeracją i stanem ukończenia — jak spis treści
  podręcznika technicznego, nie „karta produktu SaaS". Status = czysty sygnał (kolor + słowo), nie
  ilustracja fabularna.
- Widok lekcji M3 → dokument: numer modułu, cel, treść w blokach, demo, log ukończenia w marginesie.
  Aparat redakcyjny = numeracja, kickery, tabularne liczby — nie dekoracyjne ikonki.
- Demo „przepływ zgody" → wierna, sprawdzalna **replika realnego UI**, w którym Claude faktycznie prosi
  o dostęp (patrz §9) — nie wymyślony mechanizm, tylko pokazanie PRAWDZIWEGO produktu w akcji.
- Blok „Spróbuj sam" → neutralne pole z realnym promptem + przycisk „Kopiuj". Zero metafory.
- Quiz → jedno pytanie, natychmiastowy feedback, bez oceniania, zero motywu.
- Pasek/licznik postępu → „3/10 ukończone" — czysta liczba, nie symbol.

Efekt/sekcja bez powodu z tego rejestru = odrzuć. Rygor jest jednolity — nie ma sekcji „neutralnych"
bo nie ma tu warstwy do wyłączania: albo dyscyplina jest wszędzie, albo jej nie ma.

## 2. Dramaturgia — łuk widoku lekcji M3 (rejestr utility: pacing pojedynczej lekcji, nie montaż strony)

- **Wejście:** nagłówek lekcji z kickerem `MODUŁ M3 · BEZPIECZEŃSTWO I POUFNOŚĆ · 03/10` + cel lekcji
  jednym zdaniem („Poznasz trzy zasady, dzięki którym możesz bezpiecznie dać Claude dostęp do
  prawdziwych danych: poczty, faktur, Trello"). Ton **umożliwiający**, nie straszący — od pierwszego
  zdania jasne, że to lekcja „jak móc", nie „czego się bać".
- **Napięcie (treść — NOWA doktryna, patrz niżej):** trzy filary zasad w krótkich, skanowalnych
  blokach, z KONKRETAMI z realnej pracy biura CFS (Trello, poczta, smartinvoice — **z prawdziwymi
  danymi**, nie anonimizowanymi zmiennymi). Gęstość rośnie, ale bloki max 3–4 linie.
  1. **Zgoda** — Claude pyta, zanim sięgnie po narzędzie (pocztę/kalendarz/Trello/Dysk). Nic nie dzieje
     się bez pytania.
  2. **Zakres** — dostęp jest ograniczony do tego, na co świadomie się zgodziłeś (np. „tylko odczyt
     folderu Faktury", nie „cała skrzynka na zawsze").
  3. **Operacje zmieniające tylko na wyraźne polecenie** — Claude może PRZECZYTAĆ dużo, ale nic nie
     WYSYŁA, nie ZMIENIA, nie KASUJE bez osobnego, jawnego „zrób to".
  Podane REALNE dane biura — bo to jest ich wartość edukacyjna: analiza faktur/maili/Trello ma sens
  tylko na prawdziwym materiale. Bezpieczeństwo NIE polega na ukrywaniu danych przed Claude, tylko na
  tych trzech filarach.
- **Reveal:** demo „przepływ zgody" — user SAM klika i widzi realistyczną replikę okna, w którym Claude
  prosi o konkretny, ograniczony zakres dostępu, user odpowiada „Zezwól” / „Odmów”, log zapisuje
  zdarzenie. Punkt kulminacyjny — wiedza abstrakcyjna staje się namacalnym, WIARYGODNYM doświadczeniem
  (bo wygląda jak prawdziwy produkt), nie akapitem do przeczytania i nie zabawką.
- **Rozwiązanie:** blok „Spróbuj sam" (bezpieczny, realny prompt do przetestowania na własnych danych)
  → mikro-quiz (jedno pytanie, cichy feedback) → „oznacz jako ukończone" — kafel modułu na stronie
  startowej zmienia stan. Domyka pętlę hubu, nie tylko lekcji.
- **Próg/prolog:** brak osobnego ekranu wejścia (to nie brand-story) — nagłówek lekcji JEST progiem.
- **Puenta:** moduł kończy się jednym zdaniem przypominającym zasadę i wskazaniem następnego modułu —
  spokojnie, bez celebracji, bez straszenia.

**Rytm makro huba (poza M3, dla kontekstu):** start = gęściej (kafle + role picker), lekcja = rozrzedzone
(kolumna czytania + marginalia), demo = chwila skupienia (izolowany kontener), powrót do kafli = znowu
gęściej. Naprzemienność gęstość↔oddech zamiast płaskiego jednego rytmu na cały hub.

## 3. Architektura 3 warstw

- **DOM-narrator:** cała treść lekcji, nagłówki, quiz, CTA, nawigacja — statyczny, semantyczny HTML,
  czytelny bez JS (poza samym demo/localStorage). SEO nieistotne (hub wewnętrzny za autoryzacją), ale
  a11y i czytelność bez JS — TAK, to narzędzie pracy.
- **Scena:** BRAK pełnoekranowego canvas/WebGL. Jedna cienka warstwa materiału (nie motywu): drobna
  siatka milimetrowa w stylu papieru kreślarskiego/arkusza specyfikacji technicznej, czysty CSS
  (`repeating-linear-gradient`/SVG), opacity 3–5%, WYŁĄCZNIE za nagłówkami sekcji i w marginesie
  numeracji. To jest MATERIAŁ (Prawo Estetyki #6), nie scenografia świata CFS — świadomie nie
  wykorzystujemy tu literalnych odniesień do produktu klienta (linie drogowe, tablice sterowania ruchem)
  bo to byłby powrót do inflacji frazy w motyw w miniaturze. Zero storytellingu, sama tekstura.
- **Scroll = zwykły przepływ czytania.** NIE oś czasu montażu. Jedyny „czas" w systemie: (a) stan
  lokalny modułu sterowany klikiem/localStorage, (b) demo zgody sterowane wprost interakcją usera
  (klik), nie pozycją scrolla.
- **Stany (atrybuty `data-*`, nie klasy dekoracyjne):**
  - `data-module-status="nieukonczony | w-trakcie | ukonczony"` — na kaflu modułu.
  - `data-required="true"` — na kaflu/nagłówku M3 (obowiązkowy).
  - `data-consent-state="czeka | prosi | zezwolono | odmowiono"` — state machine demo „przepływ
    zgody" (4 stany — dodany `odmowiono`, bo realne UI zgody MUSI pokazywać też odmowę, nie tylko
    happy path; to część wiarygodności, patrz §9).
  - `data-quiz-state="nieodpowiedziano | dobrze | prawie"` — feedback quizu.

## 4. Storyboard aktów

**Pominięty jako tabela filmowa** — rejestr utility. Zamiast montażu: mapa hierarchii + rytm (§2 wyżej)
i opis pojedynczego komponentu-demo (§9) jako jedynego zaprojektowanego „ujęcia interakcji" na stronie.

**Mapa hierarchii widoku lekcji (skanowalność, kolejność wizualna):**

| # | Blok | Waga wizualna | Dominanta |
|---|------|----------------|-----------|
| 1 | Nagłówek + kicker + cel | wysoka (typografia) | kicker „MODUŁ M3 · 03/10" + tytuł + duży numer-znak wodny w marginesie |
| 2 | Treść w blokach (3 filary: zgoda / zakres / operacje na polecenie) | średnia, skanowalna | krótkie akapity + status-kolor przy przykładach z realnymi danymi |
| 3 | Demo „przepływ zgody" | **najwyższa** (jedyny interaktywny element) | replika realnego UI zgody Claude |
| 4 | „Spróbuj sam" | średnia, wyodrębniona ramką | realny prompt + przycisk kopiuj |
| 5 | Mikro-quiz | niska-średnia, neutralna | pytanie + feedback |
| 6 | Nawigacja poprzednia/następna + „oznacz ukończone" + margines „na tej stronie" | niska, ale zawsze widoczna | CTA końcowy + kotwice |

## 5. Makrostruktura i nawigacja

- **Typ strony:** narzędzie/dokumentacja (hub startowy z kaflami + widok lekcji z marginaliami).
- **Makrostruktura hub-start:** **H10 Archival index** (katalog, numeracja, autorytet struktury) —
  bez zmian z v1, to była trafna decyzja niezależna od motywu bramki.
- **Makrostruktura widoku lekcji — PRZEBUDOWANA (v1 zbyt wąska, odrzucone):**
  **S1 Single-column editorial + marginalia** zamiast gołego `min(68ch)` na pustce:
  - Ramka strony: `max-width: min(1440px, 100% - 96px)`, wyśrodkowana.
  - Wewnątrz: asymetryczny dwukolumnowy grid — **kolumna czytania** `min(70ch, 100%)` (fizyczna
    granica czytelności długiego tekstu — to NIE jest estetyczna wąskość, to typografia) +
    **margines-aparat** `260px` po prawej (desktop ≥1100px): duży wyblakły numer modułu (znak
    wodny, patrz §9), spis „na tej stronie" (kotwice do sekcji: Zgoda / Zakres / Operacje / Demo /
    Spróbuj sam / Quiz), status ukończenia, link do poprzedniego/następnego modułu.
  - Poniżej 1100px margines-aparat spada pod treść jako pozioma belka meta (numer + status + kotwice
    w linii), nie znika (memory `tekst-dopasowany-do-viewport`).
  - Sekcje-nagłówki (kicker, H1, H2 aktów) mogą PRZEKRACZAĆ szerokość kolumny czytania i rozciągać się
    w stronę marginesu — to jest miejsce, gdzie typografia „oddycha" na całym viewporcie, podczas gdy
    akapity zostają w czytelnej mierze. Różnica względem v1: pustka wokół tekstu zamieniona na
    PRACUJĄCĄ przestrzeń (aparat), nie na dekoracyjny odstęp.
- **Nav archetype:** **Masthead** — nazwa huba lewo, poziomy środek, licznik „X/10 modułów
  ukończonych" prawo, sticky. Odrzucone: Command-bar (zbyt zimne dla kadry nietechnicznej),
  Floating island/glass (zbyt dekoracyjne dla tego rejestru).
- **Dlaczego ten układ:** Archival index dla startu daje odbiorcy natychmiastową orientację; editorial
  + marginalia dla lekcji maksymalizuje czytelność DŁUGIEGO tekstu (kolumna 70ch), a jednocześnie
  wykorzystuje resztę viewportu do czegoś użytecznego (nawigacja, kontekst, numeracja) zamiast do
  czystej, niewytłumaczonej pustki, która była właściwym źródłem skargi usera na v1 — problemem nie
  była wąska kolumna tekstu samą w sobie (to standard typograficzny), tylko brak zaprojektowanej
  treści dookoła niej.

## 6. Dyscyplina środków — paleta (paleta ZABLOKOWANA na markę CFS — decyzja usera, nienegocjowalna)

Bez zmian względem v1 — kolory nie były przedmiotem odrzucenia. Drobna korekta uzasadnień: zero
odniesień do „bramki"/„przejazdu", akcent zielony uzasadniony wprost jako realny kolor marki/produktu.

| Rola | Kolor (intencja) | ~% ekranu |
|------|-------------------|-----------|
| Neutral (canvas) | off-white ciepławy + `--cfs-bg-soft` | 80–90% |
| Primary (tekst/tło sekcji) | `--cfs-ink` (tekst), `--cfs-graphite` (ciemne akcenty/inwersja punktowa) | największy wolumen tekstu |
| Akcent | zieleń marki `--cfs-green` (500/600/700 wg kontrastu) — TYLKO na stanach aktywnych/CTA/„ukończony" | <5%, z TREŚCI — to dosłownie kolor marki i produktu CFS, nie dobrany dekoracyjnie |
| Materiał neutralny (nie osobna barwa treści) | srebro RAL 9006 „white aluminium" — linie, obwódki tabliczek, aparat redakcyjny | akcent industrialny, achromatyczny — nie łamie zasady ≤3 kolorów |

- **Temperatura:** neutralna-chłodna (papier/aluminium), z jednym ciepłym punktem żywej zieleni jako
  jedynym sygnałem „aktywne/ukończone".
- **Materiał:** tło NIE jest płaskim heksem — subtelna siatka milimetrowa (§3 „Scena"), tabliczki
  modułów mają cienką ramkę „aluminiową" (1px silver + delikatny górny highlight) zamiast card-shadow
  slop.
- **Status „w toku":** amber `--cfs-warning` (semantyka statusów zachowana, nie do zmiany) — to STATUS,
  nie ozdoba.

**Mapa CFS → tokeny semantyczne (OKLCH) — bez zmian, patrz `DESIGN.md` §1 dla pełnych liczb.**

## 7. Dyscyplina środków — typografia i aparat redakcyjny

**Para krojów bez zmian z v1 (już wtedy NIE była Inter — to była trafna decyzja, niezależna od motywu
bramki). W v2 typografia niesie WIĘCEJ ciężaru, bo nie ma już żadnego innego nośnika charakteru — więc
craft musi być podkręcony, nie zamieniony.**

- **Display/Label:** **Space Grotesk** (waga 500–600 nagłówki, 600–700 liczby/kickery aparatu
  redakcyjnego) — geometryczny grotesk o technicznym rysunku liter (kwadratowe kropki, bar w „G"),
  czyta się jak pismo ze schematu technicznego/tabliczki znamionowej. Open-source, Google Fonts, OFL.
  **Sprawdzone w bazie `uiux-data --domain typography`** przeciw alternatywom (industrial/condensed:
  Saira Condensed, Barlow Condensed; korporacyjne: Lexend+Source Sans 3 „Corporate Trust"; klasyczne
  edytorialne: EB Garamond+Lato, Newsreader+Roboto) — żadna nie biła obecnej pary dla TEGO konkretnego
  zestawu wymagań (techniczny rysunek liter + neutralność + brak kiczu brutalistycznego, do którego
  Space Grotesk bywa ciągnięty w wersji 700–900 uppercase — MY jej świadomie unikamy, patrz niżej).
  **Decyzja: zostaje**, ale z ostrzejszą dyscypliną użycia (żeby nie ześlizgnąć się w „każdy startup ma
  Space Grotesk hero" — to jest realne ryzyko generyku 2026, patrz anti-slop):
  - Display trzymamy MAŁY i spokojny (`clamp(28px,3vw,42px)` na H1 lekcji — NIE gigantyczny hero 80px+
    jak w typowym „kinetic brutalism" użyciu tego kroju).
  - Zero uppercase poza kickerami/etykietami (12–13px).
  - Główny nośnik charakteru to NIE rozmiar nagłówka, tylko **tabularne liczby** (numeracja modułu, znak
    wodny w marginesie, licznik postępu) — to jest miejsce, gdzie krój dostaje unikalną rolę, jakiej
    generyczne SaaS-y z tym samym fontem nie robią.
- **Body:** **Source Sans 3** — waga 400/450, zaprojektowany pod czytelność UI/dokumentacji, zero
  ozdobności. Fallback `system-ui`.
- **Kontrast skali:** display lekcji `clamp(1.75rem, 3vw, 2.75rem)`, kicker `0.8125rem` uppercase —
  pełna skala w `DESIGN.md`.
- **Aparat redakcyjny (spina cały hub, bez języka bramkowego):**
  - Kicker modułu: `MODUŁ M3 · BEZPIECZEŃSTWO I POUFNOŚĆ · 03/10` + osobna etykieta „Obowiązkowy" gdy
    dotyczy.
  - Numeracja tabularna na kaflach — plus **duży, wyblakły numer-znak-wodny w marginesie widoku lekcji**
    (memorable element, patrz §9) — to jest NOWY, dodany w v2 element aparatu, silniejszy niż
    cokolwiek w v1, bo niesie CAŁY ciężar rozpoznawalności strony.
  - Status jako etykieta tekstowa + kolor, NIGDY sam kolor bez słowa (a11y).
  - Log zdarzeń w demo: monospaced-look przez `tabular-nums` w Space Grotesk, nie osobny mono-font.

## 8. Style-pack

- **Pack:** **editorial**.
- **Uzasadnienie (v2 — mocniejsze niż w v1, bo teraz to JEDYNY nośnik charakteru):** skoro nie ma już
  żadnego wymyślonego mechanizmu do noszenia tożsamości strony, editorial musi zrobić CAŁĄ robotę:
  kickery, numeracja, marginalia, aparat redakcyjny, rygor typograficzny. Brutalist odrzucony (zbyt
  zimny/konfrontacyjny dla odbiorcy o różnym poziomie obycia), glass odrzucony (dekoracyjny, nie
  materialny). Editorial + industrialny akcent materiału (silver RAL, siatka milimetrowa) daje charakter
  BEZ dekoracji i bez fabuły.

## 9. Memorable element

**System marginaliów — typograficzny, nie mechaniczny.** Przy każdym widoku lekcji, w prawym marginesie
(§5), żyje **ogromny, wyblakły numer modułu** (np. „03", `clamp(120px, 14vw, 220px)`, Space Grotesk 700,
`tabular-nums`, opacity ~6–8% inku) — typograficzny znak wodny, nie ilustracja. Towarzyszy mu spokojny,
zawsze ten sam układ: numer → status (słowo + kolor) → spis „na tej stronie" → licznik postępu hubu.
To jest jedyny POWTARZALNY, rozpoznawalny wzór całej Akademii — user zapamięta stronę jako miejsce,
gdzie **każda lekcja ma swój wielki, cichy numer w rogu strony**, nie jako miejsce z gadżetem do
kliknięcia. Bez logo rozpoznasz hub po układzie marginaliów i rytmie numeracji, nie po ikonie czy
mechanizmie.

**Dlaczego to NIE jest nowa wersja tego samego błędu:** to nie jest metafora („to jest jak X z realnego
świata CFS") — to czysto typograficzna/redakcyjna konwencja (znana z magazynów i dokumentacji
technicznej: duży folio/numer strony jako element kompozycji). Nie opowiada historii, nie udaje niczego
— po prostu organizuje informację i, jako efekt uboczny dyscypliny, staje się rozpoznawalna.

## 9a. Demo „przepływ zgody" — PRZEPROJEKTOWANE (bez szlabanu)

**Decyzja: replika realnego UI zgody, nie ilustracja metafory.** Uzasadnienie wyboru (user dał dwie
opcje, ta jest lepsza dla wiarygodności): pracownik CFS, który przejdzie tę lekcję, zobaczy DOKŁADNIE
taki komunikat, gdy Claude naprawdę poprosi o dostęp — więc pokazanie realnego UI zamiast wymyślonego
mechanizmu buduje zaufanie przez rozpoznanie („to jest to, co zobaczę naprawdę"), nie przez metaforę do
rozszyfrowania. Rezygnacja z toy-demo na rzecz redakcyjnego komponentu (opcja B usera) odrzucona,
bo interaktywność tu ma realną wartość edukacyjną — user MA kliknąć „Zezwól"/„Odmów" i zobaczyć obie
ścieżki, to jest część nauki (nie tylko happy path).

- **Wygląd:** sobria replika okna dialogowego — jak natywny prompt uprawnień (styl zbliżony do systemowych
  okien zgody: cień płytki, róg zaokrąglony `8px`, ikona narzędzia + nazwa + zakres w zwykłym tekście),
  NIE ikona kłódki/tarczy jako główny symbol. Treść realna: „Claude prosi o dostęp do: **Poczta —
  odczyt folderu »Faktury«**" + dwa przyciski „Zezwól" / „Odmów".
  Ilustracja realnego UI **wymaga fotorealistycznego zrzutu interfejsu, nie abstrakcji** — jeśli w
  finalnym buildzie potrzebny będzie faktyczny obraz (nie czysty HTML/CSS mockup), to jest to
  jedyny kandydat na asset AI w tym module i musi być fotorealistycznym renderem konkretnego UI, nie
  ilustracją artystyczną (patrz reguła żelazna „plan obrazu = konkretny fotoreal"). Rekomendacja:
  **zbuduj to jako żywy HTML/CSS komponent** (nie obraz) — precyzyjniejsze, edytowalne, zero ryzyka
  halucynacji UI przez model graficzny.
- **State machine (4 stany, nie 3):** `czeka → prosi → zezwolono` ORAZ osobno `prosi → odmówiono` —
  user klika oba warianty, log pokazuje różnicę w konsekwencji („Zezwolono — Claude może odczytać
  folder Faktury do końca sesji" / „Odmówiono — Claude nie ma dostępu, zapytaj ponownie w razie
  potrzeby").
- **Ruch:** przejście stanu = delikatny fade/slide panelu (`opacity` + `translateY(4px)`, `220ms
  ease-out`) — NIE rotacja/opadanie żadnego elementu mechanicznego. `prefers-reduced-motion` = zmiana
  natychmiastowa.
- **Log zdarzeń:** poniżej okna, tabularne znaczniki czasu + treść zdarzenia — to jest element aparatu
  redakcyjnego (§7), nie ozdoba.

## 10. Form = content

Zmienione względem v1. Tam forma i treść były tożsame przez dosłowną metaforę (system = produkt
klienta). Tu forma i treść są spójne przez **wspólny rejestr**: strona jest zrobiona z tą samą
precyzją i restrykcją, jakiej Akademia UCZY (jasne granice, żadnej ozdoby bez funkcji, status = czysty
sygnał) — dyscyplina projektowa strony DEMONSTRUJE to samo podejście, którego strona naucza (rygor,
jasność, brak fałszywej dekoracji), zamiast OPOWIADAĆ o produkcie klienta przez metaforę.

## 11. Assety AI

Bez zmian z v1.

| Slot | Potrzebny? | Uzasadnienie | Skill |
|------|------------|----------------|-------|
| Hero still / fotografia | **NIE** w tym prototypie | M3 to narzędzie UI-first: system typograficzny + marginalia. Fotorealizm miejsca/branży jako fundament = czerwona flaga anti-generyk. | — |
| Zdjęcia realizacji CFS (parkingi/lotniska/galerie) | **odroczone** | Poza zakresem tego briefu (tylko M3 + fundament). Do rozważenia w kolejnej fazie, za zgodą firmy na materiały. | cinematic → photo-prompt (później) |
| Replika UI zgody (§9a) | **NIE jako obraz — jako żywy komponent HTML/CSS** | Precyzja i edytowalność > fotorealizm; ryzyko halucynacji UI przez model graficzny (drobny tekst, przyciski) zbyt wysokie (memory `assety-musza-byc-generowalne`). | kontra-build |

## 12. Anti-slop (świadome NIE)

1. **NIE generyczny SaaS-onboarding-slop** — zero fioletowego gradientu, zero wesołych ilustracji
   postaci, zero kolorowych badge'y „AI-powered", zero confetti przy ukończeniu modułu. Ukończenie =
   cicha zmiana stanu tabliczki, nie celebracja.
2. **NIE stockowa kłódka-tarcza** — system zgody wizualizowany przez realną replikę UI (§9a), zero
   ikon kłódki/tarczy/checkmarka-w-kółeczku jako głównego symbolu bezpieczeństwa.
3. **NIE żaden wymyślony mechanizm-metafora** (szlaban, bramka i tym podobne, ani żaden NOWY
   zamiennik tego typu — np. „klucz", „zamek", „brama", „filtr" jako motyw wizualny) — to jest twardy,
   trwały zakaz dla tego projektu po odrzuceniu v1, nie tylko lista jednego przykładu. Charakter
   WYŁĄCZNIE przez typografię/marginalia/materiał/rejestr.
4. **NIE Space Grotesk w wersji „kinetic brutalism"** (uppercase-hero 80px+, tracking ujemny na
   ogromnym display) — to jest najbliższe realne ryzyko generyku 2026 dla tego kroju (patrz §7);
   trzymamy display mały, spokojny, z ciężarem przeniesionym na numerację.
5. **NIE martwy margines** — jeśli margines-aparat (§5) nie mieści się/nie jest zaimplementowany,
   kolumna czytania NIE wraca do wycentrowanego `min(68ch)` na pustce — to jest dokładnie to, co user
   odrzucił. Fallback mobilny to pozioma belka meta (§5), nie zniknięcie marginaliów.

## 13. Studium wzorców

Kanon 5 kart przeczytany jako CAŁOŚCI (bez zmian z v1 co do lektury). Co bierzemy — przeformułowane bez
odniesień do metafory bramki:

- **Z 12studio / oryzo:** dyscyplinę „JEDEN rejestr organizuje KAŻDĄ sekcję, efekt bez powodu jest
  zakazany" — u nas rejestr to nie fabuła, tylko konsekwentna precyzja typograficzno-redakcyjna. Z
  oryzo bierzemy konkretnie **„meta-warstwa jako tania sygnatura"**, ale przeniesione na czysto
  typograficzny grunt: znak-wodny numeru modułu w marginesie (§9), nie mechanizm interaktywny.
- **Z landonorris:** aparat redakcyjny jako nośnik autentyczności — kickery, numeracja, etykiety
  zamieniają blok treści w „dokument", nie dekorację. U nas: numer modułu w marginesie, log zdarzeń
  demo, tabularne liczby pełnią dokładnie tę rolę — to jest teraz GŁÓWNA, nie poboczna zasada, którą
  bierzemy z tego wzorca (w v1 była poboczna, przyćmiona przez metaforę bramki).
- **Z ironhill:** wzorzec „charakter przez motyw funkcjonalny bez montażu filmowego" — ale w v2
  ODRZUCAMY nawet ten poziom dosłowności: ironhill wciąż ma jeden spójny „świat" (ekspedycja); u nas
  po odrzuceniu v1 świadomie NIE budujemy żadnego świata, tylko dyscyplinę. Odróżnienie: ironhill idzie
  w pełną immersję 3D/WebGL (33,9 MB, zero a11y) — my bierzemy WYŁĄCZNIE zasadę „rygor formy = rygor
  funkcji", odrzucamy cały ich budżet techniczny, dług a11y i całą warstwę fabularną.
- **Czym się odróżniamy od całego kanonu:** żaden z pięciu wzorców nie jest rejestru
  utility/dokumentacji bez fabuły — wszystkie to brand-story/portfolio z motywem lub ciężkim motion.
  My świadomie NIE bierzemy ani filmowego montażu, ani żadnego motywu narracyjnego — bo cel (zrozumienie
  + bezpieczeństwo dla zróżnicowanej kadry) wymaga odwrotnego rygoru: cichy, przewidywalny, w pełni
  dostępny dokument zamiast spektaklu LUB zamiast opowieści. Nasza przewaga nad kanonem: ten sam poziom
  decyzji (organizujący rejestr, aparat redakcyjny, materiał nie heks) BEZ ich długów (WCAG AA
  obowiązkowe, `prefers-reduced-motion` obowiązkowe, zero scroll-trapu, waga strony minimalna) I BEZ
  fabuły, której żaden z nich by tu nie potrzebował.

---

## Notatka do kontra-build (poza formalnym szablonem, ważne dla implementacji)

- Zob. `DESIGN.md` w tym katalogu (v2) — pełne liczby tokenów gotowe do mapowania, w tym nowe tokeny
  szerokości/marginaliów.
- **`projects/CFS/moodboard/moodboard-spec.md` jest SUPERSEDED** — zawiera zarchiwizowany kod v1 z
  motywem szlabanu. Nie kopiować stamtąd niczego poza czystymi tokenami koloru/typografii, które i tak
  są zduplikowane w `DESIGN.md` v2. User nie chce nowego moodboardu — buduj wprost wg tego briefu.
- Semantyka statusów `success/warning/info/danger` zachowana z v1 — user zablokował paletę.
- Demo „przepływ zgody": state machine 4-stanowa (`czeka → prosi → zezwolono` / `prosi → odmówiono`),
  sterowana WYŁĄCZNIE klikiem usera + `prefers-reduced-motion` = natychmiastowa zmiana stanu bez
  `translateY`/fade.
- Font-loading: `document.fonts.ready` gate przed animacją reveal nagłówka (Space Grotesk ma
  charakterystyczny rysunek różny od fallbacku systemowego — FOUC = kompromitacja).
- Margines-aparat (§5, §9) to NOWY, obowiązkowy element implementacji — nie pomijaj go uznając za
  „nice to have"; to jest teraz nośnik memorable element i odpowiedź na główną skargę usera o wąskości
  layoutu. Bez niego brief nie jest zrealizowany.