Filozofia designu

Sklep internetowy WTF?! jest zaprojektowany dla boomerów i nietechnicznych decydentów. Docelowy klient nie lubi "sprytnych" interfejsów, ufa prostocie, tekstowi, potwierdzeniom. Nie chce aplikacji ani komplikacji.

Styl ma przypominać dobrą księgarnię, bank lub poważny portal - nie startup SaaS, Gumroad czy influencer shop.

Kluczowe zasady:

• Prostota i przewidywalność
• Biało-czarno-szary jako podstawa
• Jeden kolor akcentu (nie więcej)
• Brak animacji, gradientów, parallaxu
• Desktop-first
• Szybki, czytelny, budzący zaufanie

Biblioteka UI: Pico CSS

Używamy Pico CSS jako podstawy dla komponentów UI. Pico CSS jest idealny dla WTF?! bo:

• Semantyczny HTML - nie potrzebujesz klas, po prostu użyj odpowiednich tagów
• Biało-czarno-szary out of the box
• Desktop-first
• Zero JavaScript - szybki, prosty
• Łatwy do customizacji przez CSS variables

Jak użyć:

Wszystkie komponenty są przestylowane zgodnie ze styleguide WTF w pliku pico-custom.css.

Zobacz pełną bibliotekę komponentów w Design System Library.

Paleta kolorów

Kolory podstawowe

Kolory pomocnicze

Zasady użycia kolorów

• Biało-czarno-szary jako podstawa - zawsze
• Jeden kolor akcentu (do wyboru w zależności od kontekstu) - nie więcej
• Brak animacji, gradientów, parallaxu - zero
• Wysoki kontrast dla czytelności - szczególnie dla boomerów
• Desktop-first - kolory muszą działać na dużych ekranach
• Spójność - te same kolory w całym sklepie i panelu poleceń

Typografia

Rodzina fontów

Używamy systemowych fontów dla szybkości, czytelności i natywnego wyglądu:

Hierarchia typograficzna

Line-height

Standardowo: 160% (1.6) dla optymalnej czytelności, szczególnie ważne dla boomerów i długich tekstów.

Zastosowania

• Regular (400) - paragrafy, listy, tekst ciągły, opisy produktów
• Medium (500) - daty, małe akcenty, linki, metadane
• SemiBold (600) - nagłówki sekcji, tytuły produktów
• Bold (700) - mocne wyróżnienia, CTA, ważne informacje, ceny

Layout i spacing

Kontener

• max-width: 1200px
• margin: 0 auto (wyśrodkowanie)
• padding: 2rem

Spacing system

• Marginesy sekcji: 3rem (odstęp między głównymi sekcjami)
• Marginesy między elementami: 1rem - 2rem (zależnie od kontekstu)
• Padding w komponentach: 1rem - 2rem (wewnętrzne odstępy)
• Padding w kartach produktów: 2rem (więcej przestrzeni dla czytelności)

Grid system

Prosty, przewidywalny układ:

• Jedna kolumna na mobile
• Dwie-trzy kolumny na desktop (w zależności od kontekstu)
• Brak skomplikowanych gridów - prostota
• Flexbox dla prostych układów

Komponenty UI

Przyciski

Primary Button: Czarny (#000), biały tekst, padding 0.75rem 1.5rem

Secondary Button: Biały, czarne obramowanie, czarny tekst, padding 0.75rem 1.5rem

Zasady: Duże, czytelne, bez zaokrągleń (lub minimalne), bez cieni, bez gradientów

Formularze

• Duże pola (min. 48px wysokości dla łatwości kliknięcia)
• Pionowy układ (jedna kolumna)
• Czytelne labele nad polami
• Proste obramowania (1px solid #e0e0e0)
• Brak placeholderów jako jedynej informacji

Karty produktów

• Duża okładka (min. 300px szerokości)
• Czytelny tytuł i opis
• Sekcja "dla kogo / dla kogo nie"
• Twarde informacje: format, strony, wysyłka
• Jasne info o formatach (papier + eBook, audio warunkowo)
• Brak rankingów, gwiazdek, gamifikacji

Nawigacja

• Prosta, pozioma na desktop
• Czytelne linki, bez dropdownów jeśli nie trzeba
• Breadcrumbs dla głębszych stron
• Brak animacji, hover states subtelne

Strona główna sklepu

Kolejność sekcji

1. Czym jest WTF?! (3 zdania) - krótkie wprowadzenie
2. Książki (duże okładki) - główny produkt
3. Merch - nośnik marki
4. Jak kupić (3 kroki) - prosty proces
5. Dane firmy, regulaminy, kontakt - zaufanie i transparentność

Zasady

• Jasna hierarchia - najważniejsze na górze
• Dużo białej przestrzeni - nie przeładowane
• Brak pop-upów, agresywnych CTA
• Prosta nawigacja - wszystko dostępne od razu

Karta produktu (książka)

Musi zawierać

• Duża okładka (min. 400px szerokości)
• Krótki opis (2-3 akapity)
• Sekcja "dla kogo / dla kogo nie" - jasne określenie odbiorcy
• Twarde informacje: format, liczba stron, wysyłka, dostępność
• Jasne info o formatach: papier + eBook zawsze, audio warunkowo
• Jeśli to pre-order: jasna sekcja "przedsprzedaż" i data wysyłki
• Cena - duża, czytelna
• Przycisk "Kup teraz" - duży, czytelny

Brak

• Rankingów, gwiazdek, ocen
• Gamifikacji, odznak
• Agresywnych pop-upów ("Kup teraz! Tylko dzisiaj!")
• Zbyt wielu opcji, wariantów
• Animacji, efektów hover

Checkout

Zasady projektowania

• Jedna strona - wszystko na jednej stronie, bez kroków
• Duże pola - min. 48px wysokości
• Pionowy układ - jedna kolumna, wszystko pod sobą
• Czytelne labele - nad polami, nie w placeholderach
• Podsumowanie zamówienia - zawsze widoczne

Płatności

• Karta kredytowa/debetowa
• Przelew online
• BLIK
• Apple Pay / Google Pay (ok, ale nie wymuszane)

Po zakupie

• Natychmiast mail potwierdzający
• Faktura PDF do pobrania
• Jasna informacja "co dalej" - kiedy wysyłka, jak otrzymać eBook
• Brak dodatkowych ofert, upsellów

Panel programu poleceń

Wygląd

Ma wyglądać jak panel prowizyjny w banku/ubezpieczeniach, nie jak startup afiliacyjny.

Nazewnictwo

NIE używać: "MLM", "downline", "network", "drzewko", "struktura"

Używać: "Program poleceń WTF?!", "Współpraca sprzedażowa", "Prowizje i rozliczenia", "Osoby polecone"

Panel użytkownika

Jedna prosta strona z:

• Twoim linkiem polecającym (duży, czytelny)
• Przyciskiem "kopiuj" (duży, czytelny)
• Krótką instrukcją "gdzie wkleić link" (prosta lista)

Rozliczenia (tabela)

Prosta tabela z kolumnami:

• Data
• Produkt
• Kwota sprzedaży
• Twój %
• Twoja prowizja
• Status: oczekuje / zatwierdzona / wypłacona

Eksport: PDF, CSV (duże przyciski, czytelne)

Layer 2 bez "drzewka"

Nie pokazujesz struktury. Pokazujesz:

• "Sprzedaż osób poleconych: X"
• "Twoja prowizja dodatkowa: Y"

Bez wizualizacji sieci, bez grafów.

Czego nie ma (tabu)

• Wykresów, grafów
• Rankingów sprzedawców
• Odznak, poziomów
• Gamifikacji
• Aplikacji mobilnej
• Push notyfikacji
• Animacji, efektów

Zasady użycia

Dozwolone

• Proste, czytelne layouty
• Duże, czytelne fonty
• Wysoki kontrast
• Biało-czarno-szary + jeden kolor akcentu
• Proste ikony (SVG, bez efektów)
• Statyczne obrazy (bez animacji)

Niedozwolone

• Animacje, przejścia
• Gradienty, cienie
• Parallax, efekty scroll
• Gamifikacja, odznaki
• Agresywne pop-upy
• Zbyt wiele kolorów
• Zbyt małe fonty
• Zbyt skomplikowane layouty

Responsywność

Desktop-first

Projektujemy najpierw dla desktop (1200px+), potem dostosowujemy do mniejszych ekranów.

Breakpoints

• Desktop: 1200px+ (główny target)
• Tablet: 768px - 1199px
• Mobile: < 768px

Zasady

• Na mobile: jedna kolumna, większe przyciski
• Zachowaj czytelność na wszystkich rozdzielczościach
• Nie ukrywaj ważnych informacji na mobile
• Prosta nawigacja mobilna (hamburger menu ok, ale prosty)