# 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` |