Polisoteka Design System
DraftPolisoteka 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). To nie biblioteka komponentów obok istniejących wdrożeń portali — to wdrożenie docelowe, do którego portale się przepinają.
Trzy warstwy
Dział zatytułowany „Trzy warstwy”- 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). - Komponenty (
ui/) — React, stylowane WYŁĄCZNIE zmiennymi z warstwy semantycznej tokenów. Zero wartości wpisanych na sztywno. - Ta strona (
docs/) — żywy podgląd obu powyższych, dokumentacja użycia i treści marki.
Pryncypium: dyscyplina = premium
Dział zatytułowany „Pryncypium: dyscyplina = premium”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.
Ta zasada jest egzekwowana mechanicznie, nie tylko deklarowana:
- Komponenty w
ui/nie kompilują się z hardcoded hexem czypxpoza tokenami — sprawdza to walidator statyczny (validators/static/no-hardcoded.mjs). - Każdy element interaktywny ma
cursor: pointeri 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
Dział zatytułowany „Dla kogo jest ta strona”- Deweloperzy i graficy → Dla ludzi.
- Agenci AI (Claude Code i inni) → Dla AI — lustro
design/AGENTS.mdw formie czytelnej z poziomu tej strony.
Stan systemu
Dział zatytułowany „Stan systemu”System jest we wczesnym, żywym rozwoju — traktuj status: draft na każdej
stronie dosłownie. Paleta pięciu marek i typografia są finalne dla ról
głównych; akcent czterech marek (home/health/moto/travel) jest dziś
wyprowadzony z koloru primary, nie ma własnej, nazwanej wartości — patrz
Fundamenty → Kolor. Treść marki (głos, ton,
słownik) czeka na wypełnienie — patrz Treść.