Przewodnik stylistyczny

Niniejszy przewodnik stylistyczny zawiera kompleksowy przegląd systemu identyfikacji wizualnej strony internetowej Fundacji na rzecz Walki z Rakiem Jądra, ze szczególnym uwzględnieniem kolorystyki i typografii.

Paleta kolorów

Paleta kolorów stanowi kluczowy element tożsamości marki, zapewniając spójny i rozpoznawalny wygląd oraz styl. Składa się ona z kolorów podstawowych, drugorzędnych i akcentujących, które są strategicznie wykorzystywane w całej witrynie internetowej.

Kolory podstawowe

Kolory podstawowe to najczęściej stosowane barwy w projektach, które odzwierciedlają podstawową tożsamość marki.

Kolor podstawowy: cyjan/turkusowy

HEX #00B4DB
RGB rgb(0, 180, 216)

Główny kolor marki, stosowany w tłach, przyciskach i kluczowych elementach wizualnych.

Czarny

HEX #000000
RGB rgb(0, 0, 0)

Treść strony, nagłówki na jasnym tle oraz stopka strony.

Biały

HEX #FFFFFF
RGB rgb(255, 255, 255)

Tekst główny na ciemnym tle, tła dla poszczególnych sekcji treści.

Kolory dodatkowe i akcentujące

Kolory drugorzędne i akcentujące służą do uzupełnienia kolorów podstawowych oraz do zwrócenia uwagi na konkretne elementy, takie jak przyciski, linki i sekcje informacyjne.

Ciemnoniebieski

HEX #0F172A
RGB rgb(15, 23, 42)

Tła dla kart statystycznych i innych wyróżnionych sekcji.

Szary łupkowy

HEX #64748B
RGB rgb(100, 116, 139)

Przyciski dodatkowe i elementy interfejsu użytkownika.

Jasnoszary

HEX #F1F5F9
RGB rgb(241, 245, 249)

Tła dla kart i modułów treści służące do wizualnego oddzielenia elementów.

Średni szary

HEX #C1C1C1
RGB rgb(193, 193, 193)

Ramki i subtelne elementy interfejsu użytkownika.

Biały z odcieniem

HEX #EBEEF0
RGB rgb(235, 238, 240)

Subtelne różnice w tle.

Typografia

Na stronie internetowej zastosowano połączenie czcionki szeryfowej w nagłówkach oraz czcionki bezszeryfowej w tekście głównym, co pozwala uzyskać przejrzystą i czytelna hierarchię typograficzną.

DM Serif Display

Serif • Nagłówki

A A B B C C
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Inter

Bezszeryfowa • Tekst główny

A A B B C C
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Skala typograficzna

Poniższe przykłady przedstawiają rozmiary i grubości czcionek stosowanych w różnych elementach tekstowych na stronie internetowej.

NAZWA 1 (H1)
Czcionka DM Serif Display
Rozmiar 62 piksele
Waga 400

Walka z rakiem jądra poprzez wczesne wykrywanie

Nagłówek 2 (H2)
Czcionka DM Serif Display
Rozmiar 40px – 48px
Waga 400–800

Nasza misja: ratowanie życia poprzez edukację

Nagłówek 3 (H3)
Czcionka DM Serif Display
Rozmiar 28 pikseli
Waga 400

Dowiedz się, jak przeprowadzić samobadanie jąder

TREŚĆ GŁÓWNA (P)
Czcionka Inter
Rozmiar 17,5 px
Waga 400

Założona w 2009 roku Fundacja na rzecz Walki z Rakiem Jądra jest organizacją non-profit typu 501(c)(3) oraz jedyną w kraju organizacją zajmującą się rakiem jądra, dysponującą pełnoetatowym personelem. Jesteśmy zespołem złożonym z osób, które przeżyły chorobę, opiekunów oraz działaczy, których pasją jest poszerzanie wiedzy i zwiększanie świadomości społecznej.

CZCIONKA PRZYCISKÓW
Czcionka Inter
Rozmiar 0,9 rem
Waga 600
Odstępy między literami 0,07 em
Przekształć Wielkie litery
Wysokość wiersza 1,8 em