Samochód terenowy Volvo XC60 Szablon CSS

Grafitowe pasy i ujęcia pojazdu definiują system stylistyczny

Otwierająca sekcja hero modelu XC60 wykorzystuje zdjęcie motoryzacyjne na pełną szerokość z wyśrodkowanym tytułem i podtytułem, wyznaczając kluczową regułę wizualną strony: duże fotografie pojazdu tworzą pierwsze wrażenie, podczas gdy zwięzły tekst pozostaje doskonale czytelny. Pasy w odcieniach ciemnego grafitu, stonowanego szaroniebieskiego, morskiego i jasnobłękitnego oddzielają następnie przegląd auta, promocję usług, informacje o przeglądach oraz pakiety transportowe bez ingerencji w zasadniczą kolejność sekcji.

Dzielone sekcje powtarzają kolejną relację kompozycyjną. Duże zdjęcie samochodu lub mechanika zajmuje jedną stronę, a zwarty panel tekstowy z przyciskiem przejścia do dalszej lektury znajduje się po drugiej stronie. Zapewnia to spójny kontrast między przekazem opartym na obrazie a tekstem objaśniającym. Strefa serwisowa urozmaica rytm poprzez umieszczenie fotografii warsztatowych nad kolumnami usług, natomiast trzy opcje transportowe wykorzystują powtarzalny układ kart dla taryf Taxi, Economy+ oraz Business Class.

W projekcie opartym na CSS te powtarzalne zasady stanowią konkretne punkty odniesienia dla stylizacji: kolory tła pozwalają rozróżnić kategorie usług, odstępy dbają o swobodne rozdzielenie bloków, a typografia podkreśla różnicę między wyśrodkowanymi nagłówkami pojazdu a opisami uzupełniającymi. Obramowania, akcenty i wygląd kart można dopasowywać w ramach istniejących relacji wizualnych, bez konieczności przebudowywania struktury strony. W rezultacie powstaje spójny system graficzny dla modelu XC60, oferty serwisowej, etapów obsługi i wariantów transportu.