Style Guide dla strony internetowej
1. Paleta kolorów
Kolory i tła
Kolor główny
Akcenty, CTA, linki, nagłówki, elementy graficzne (np. kropka z logo)
Kolor akcentowy
Podświetlenia, tła sekcji, hover, ikonki
Tło jasne
Główne tło strony
Sekcja szara
Przełamanie sekcji
Kolory tekstu
Nagłówki
Nagłówki, tytuły
Tekst podstawowy
Paragrafy, opisy
Akcent dodatkowy
Detale, ikonki, ewentualne podkreślenia, hover linków
Akcent ostrzegawczy
Komunikaty o błędach, uwagi
2. Typografia
H1 - Nagłówek - Font - rozmiar - waga - kolor - interlinia
H2 - Nagłówek 2 poziomu - Font - rozmiar - waga - kolor - interlinia
H3 - Nagłówek 3 poziomu - Font - rozmiar - waga - kolor - interlinia
H4 - Nagłówek 4 poziomu - Font - rozmiar - waga - kolor - interlinia
Tekst body. To jest przykładowy tekst. - Font - rozmiar - waga - kolor - interlinia.
Jak długo. Zapasy tlenu u stóp, czy podłoga! Odepchnął się w którym by go do jego świadomości? Że kiedy się pojawią, pianowej osi, na zdrowej nodze, zadał i biegu jałowego brzmiał fałszywie, od do Instytutu? Na kursie mówiono, Instytut i szło na Północ, pójść do kina jej nie zgubić, czarny, spotykając rakiety obcych planet? Szyb! Pochylnia. Zwężające poruszać się przy miejscem, z którego można było po pierwsze, musiałby trzecie wrota ładowni.
Nim strunami kurs? Co wypukłej tarczy drogę go nazywano i mogąc obracać odłożył, a za resztę Była to ściągaczka, którą taki był, nie mógł sczezł, pozostawiając po okularów, ale, po z rozkładanym fotelem pilota owe brzmiące jak wtedy, jak Śmiga dolegał mu we zrzucali ją na spadochronie? Oczywiście tam nic, najwyżej że modelują rytm jego by nadążał z pakowaniem pozycji, nawet wisząc pod grubą powłoką wiedzą, dlaczego?
Cytat - Font - rozmiar - waga - kolor - interlinia
3. Przyciski
4. Formularz
5. Nagłówki i sekcje
Tu można pokazać przykładowy HERO, bannery, zwykłe sekcje z tłem, paddingiem i marginesami.
Przedstaw też separator, styl ikon i kolory.
Ikony - słowa kluczowe lub filtry wyszukiwania (np. outline, sticker, interface, JSON, SVG, #ff00ff).
6. Karty / Boxy / Bloki treści
Karta z ikoną/obrazkiem i tytułem (moduł Blurb)
Blok z cytatem lub wyróżnionym tekstem.
Sekcja "O nas" lub "Usługi".
7. Listy / tabelki
Listy punktowane i numerowane.
Tabele (nagłówek, wiersz, zaznaczenia)
Mini lista (np. do stopki)
8. Stopka
Układ sekcji w stopce.
Style linków.
Ikony social medial.
9. Elementy dodatkowe
Ikony - zestawy, style, kolory, filtry
Paski informacyjne
Breadcrumbs (okruszki)
10. Elementy graficzne - obrazki, galerie, slidery
Style miniaturek i galerii (stylowanie modułów)
Style sliderów i karuzeli
Prompty do generatorów grafik (zastosowany generator, użyte ustawienia i filtry, style w promptcie)