Paleta i kroje

źródło: topdriver.com

Nagłówki

Kurs dla młodych i dorosłych

Sora 800 tracking -0.025em Google Fonts
58sekcja, desktop
30sekcja, telefon
26nazwa na karcie

Tekst

Wybierz oddział, żeby zobaczyć terminy i ceny w swoim mieście. Każdy kurs prowadzą instruktorzy z uprawnieniami, a auta egzaminacyjne stoją na miejscu.

Poppins 400 i 600 17 px Google Fonts

Pułapka przy zdejmowaniu tokenów: w CSS rodzina nagłówków nazywa się „Unbounded", ale plik, który przeglądarka faktycznie wczytuje, to Sora. Gdyby wziąć nazwę z deklaracji, krój w demie wyszedłby zupełnie inny. Oba kroje są w Google Fonts.

Paleta

#28303D

Tekst i pierwsza część nagłówka.

#2A73CC

Niebieski marki. Druga część nagłówka, przyciski, hover pigułek.

#0F2546

Granat. Nakładki na zdjęciach i ciemne sekcje.

#051B37

Najciemniejszy granat. Dół gradientu na kartach.

#EAF1FB

Jasny błękit. Tła kart i pigułek.

#D1E4DD

Mięta. Tła sekcji budujących zaufanie.

Jak to siedzi razem

Kat. B → Nowy termin w Poznaniu Auto egzaminacyjne w cenie

Reguła z oryginału: zdjęcia zawsze idą pod granatową nakładką, żeby nazwa miasta była czytelna niezależnie od kadru, a jedynym mocnym kolorem jest niebieski. Nagłówek dzieli się na dwie części, ciemną i niebieską, i to ten podział niesie cały rytm strony.