j_kedzierski/DESIGN.md

Design System

Kolor

Token	Jasny motyw	Ciemny motyw	Użycie
--bg-color	#F7F5F1 (ciepły papier)	#17140F	tło strony
--fg-color	#1C1B1A (atrament)	#F5F1E8	tekst podstawowy
--card-color	#FFFFFF	#1F1B14	karty, panele
--border-color	#E2DDD3	#332C21	linie, obramowania
--accent-color	#A13D2C (pieczęć)	#D4634A	CTA, linki, akcenty
--accent-hover-color	#8A3324	#E17B62	hover na akcencie

Zasada: maksymalnie jeden akcent (pieczęć-czerwień). Żadnych dodatkowych kolorów „na szybko" (niebieski link, zielony success) bez dopisania do DESIGN.md — to jeden z 4 checków „Your design system" w Impeccable.

• Wyjątek WhatsApp: Kolor markowy WhatsApp (#25D366) jest używany wyłącznie na pływającym przycisku kontaktowym w rogu ekranu, ze względów rozpoznawalności UX. By nie tworzyć „trzeciego” koloru, unikamy używania go na tłach innych niż neutralne (np. w czerwonym FinalCTA przycisk zostaje biały).

Typografia

Token	Wartość	Użycie
--font-heading	Fraunces (serif, wariant opsz wysoki dla nagłówków display)	H1–H3, cytaty
--font-sans	Public Sans	body, UI, nawigacja, przyciski
Skala	16px body / 1.6 line-height minimum	patrz wymagania-projektowe-strony.md §4 — nie schodzić poniżej

Twardy zakaz z katalogu Impeccable: brak kursywy jako domyślnego stylu nagłówka display („italic serif display headline" — reguła #1 na liście anty-slop, patrz sekcja 5). Fraunces ma piękną kursywę i pokusa jest duża — używać jej WYŁĄCZNIE jako pojedynczego akcentu na jednym słowie w hero (np. „po polsku" pochylone w podtytule), nigdy jako stylu całego H1.

Kształt i głębia

Token	Wartość
--radius-button	6px (umiarkowane zaokrąglenie — NIE „pill", NIE 20px+ blob)
Karty	radius 8–10px, cień delikatny (box-shadow 1 warstwa, nie „hairline + wide shadow" — patrz sekcja 5)
Obramowania	1px --border-color, nigdy grube kolorowe paski z boku karty

Motyw wizualny „dokument urzędowy" (charakter, nie tylko tokeny)

To jest to, co ma odróżnić tę stronę od typowego SaaS-landingu i uzasadnić prompt „efekty pasujące do biura podatkowego" bez wpadania w kicz:

• Tekstura papieru: bardzo subtelny noise/grain na tle sekcji jasnych (opacity ~2-3%, mix-blend-mode: multiply lub SVG feTurbulence jako tło) — sugeruje fakturę papieru, nie plastik. Jeden globalny efekt, nie per-sekcja.
• Linie jak w formularzu: cienkie poziome linie --border-color jako separator sekcji zamiast pełnych kolorowych bloków tła — metafora liniatury dokumentu podatkowego.
• Akcent „pieczęci": okrągły/owalny kształt w kolorze akcentu, używany OSZCZĘDNIE — np. jako tło pod floating-stat w hero (już jest w kodzie: floatingStat), jako marker przy cytatach klientów, jako obwódka wokół liczby „20+" w sekcji Stats. Nie na każdym elemencie.
• Typografia numeryczna: liczby (20+, 100%, §4 Nr. 11) w Fraunces, duże, z lekkim tabular-nums — czytają się jak wpis w rejestrze, nie jak KPI dashboardu.
• Zdjęcia: kolor, nie stockowy błysk korporacyjny — patrz 02-strona-glowna.md §Hero i 05-o-nas.md co do konkretnego kierunku (ciepłe światło, realne biuro/dokumenty, nie białe tło + uśmiech do kamery w garniturze).

System motion (spójny, jedna specyfikacja dla całej strony)

Nazwa wzorca	Efekt	Kiedy używać	Kiedy NIE używać
reveal-up	Fade-in + translateY(16–24px), stagger dzieci co ~0.08–0.14s, ease [0.22,1,0.36,1]	wejście każdej sekcji przy scrollu (raz, whileInView, viewport={{ once: true }})	nie powtarzać animacji przy każdym ponownym scrollu — meczy
parallax-tilt	Pointer-tracked rotateX/rotateY	WYŁĄCZNIE hero	karty usług, avatary, ikony
count-up	Liczby liczą się od 0 do docelowej, bez odbicia (ease-out, NIE elastic/bounce)	blok Stats na home	gdziekolwiek indziej
line-draw	Cienka linia „rysuje się" przy wejściu w viewport	separator między sekcjami zamiast twardej krawędzi	pod każdym nagłówkiem z osobna
stamp-in	Element „pieczęci" pojawia się ze skalą 0.9→1 + rotate -3°→0°, ease-out, BEZ overshoot	floating stat w hero, badge „§4 Nr. 11 StBerG"	przyciski, pola formularza
sticky-progress	Cienka linia postępu czytania na górze strony	FAQ, Impressum, Datenschutz	strony Persuade