75 lines
4.5 KiB
Markdown
75 lines
4.5 KiB
Markdown
# 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` |
|