Polisoteka Design System

Polisoteka Design System (DS) to jedyne źródło prawdy o tym, jak wyglądają i brzmią portale Polisoteki: insurance (polisoteka.pl, B2B ekspert), home, travel, health, moto (B2C automaty). Nie jest to biblioteka komponentów obok istniejących wdrożeń — jest to wdrożenie, do którego portale docelowo się przepinają (etap S-MIGRACJA, osobne issue).

Trzy warstwy

1. Tokeny (tokens/) — jedyny nośnik wartości wizualnych: kolor, spacing, typografia, promienie, cienie. Marka i tryb (jasny/ciemny) to nie osobne palety, tylko dwie osie nałożone na te same nazwy semantyczne (data-brand × data-theme).
2. Komponenty (ui/) — React, stylowane WYŁĄCZNIE zmiennymi z warstwy semantycznej tokenów. Zero wartości wpisanych na sztywno.
3. Ta strona (docs/) — żywy podgląd obu powyższych, dokumentacja użycia i (docelowo) treści marki.

Pryncypium: dyscyplina = premium

Punkt wyjścia dla całego systemu to obserwacja z audytu marek premium (Qonto, Linear, Stripe): luksus w interfejsie nie bierze się z ozdobników — bierze się z dyscypliny. Jedna skala odstępów, jedna skala typografii, zamknięty zestaw wariantów komponentu, kolor tylko z tabeli semantycznej. Każde odstępstwo („tu akurat 15px zamiast 16px”, „ten jeden przycisk niech ma własny cień”) to widoczny rys na powierzchni, którą klient ocenia w ułamku sekundy.

Konsekwencje tego pryncypium są egzekwowalne, nie tylko deklaratywne:

• Komponenty w ui/ nie mogą się kompilować z hardcoded hexem czy px poza tokenami — sprawdza to walidator statyczny (validators/static/no-hardcoded.mjs).
• Każdy element interaktywny ma cursor: pointer i widoczny :focus-visible — bez wyjątków, bez „to tylko demo”.
• Status każdego komponentu i strony (draft/stable/deprecated) jest jawny — nic nie udaje gotowego, czym nie jest.

Dla kogo jest ta strona

• Deweloperzy i graficy → Dla ludzi.
• Agenci AI (Claude Code i inni) → Dla AI — lustro design/AGENTS.md w formie czytelnej z poziomu tej strony.

Stan systemu

To jest wczesny, żywy szkielet (etap wdrożenia I2b — patrz AGENTS.md w korzeniu /design). Kolory pięciu marek są dziś placeholderem wyliczonym z logotypów — realna paleta przyjdzie z sesji z grafikiem. Treść marki (głos, ton, słownik) czeka na wywiad z Human. Traktuj status: draft na każdej stronie dosłownie.