Przejdź do głównej zawartości

Polisoteka Design System

Draft

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). To nie biblioteka komponentów obok istniejących wdrożeń portali — to wdrożenie docelowe, do którego portale się przepinają.

  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 treści marki.

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 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.
  • Deweloperzy i graficyDla ludzi.
  • Agenci AI (Claude Code i inni)Dla AI — lustro design/AGENTS.md w formie czytelnej z poziomu tej strony.

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ść.