KR
Identyfikacja wizualna Stowarzyszenia
Kreatywni Razem
BRANDBOOK
Kolorystyka, typografia i zasady stosowania marki — spójne dla strony internetowej, newsletterów, mediów społecznościowych i materiałów drukowanych.
Kolor przewodni: #211C14 · #8F7246
Czcionki: Lora (nagłówki) · Inter (tekst)
01
O tym dokumencie
Niniejszy brandbook jest oficjalnym punktem odniesienia dla identyfikacji wizualnej Stowarzyszenia Kreatywni Razem. Zawiera paletę kolorów, typografię oraz zasady stosowania, które zapewniają spójny, profesjonalny wizerunek organizacji — niezależnie od tego, czy tworzony jest newsletter, post w mediach społecznościowych, materiał drukowany czy nowa podstrona internetowa.
Dlaczego to ważne
Spójna identyfikacja wizualna buduje zaufanie i rozpoznawalność organizacji. Każdy nowy materiał — od maila w MailerLite, przez plakat, do slajdu prezentacji — powinien korzystać z tych samych kolorów, czcionek i zasad opisanych w tym dokumencie.
Źródło wartości
Wszystkie kolory i czcionki w tym dokumencie pochodzą bezpośrednio ze strony internetowej kreatywnirazem.pl (zmienne CSS w pliku style.css), co gwarantuje 100% zgodność między stroną a wszystkimi materiałami zewnętrznymi.
02
Kolor przewodni
Te sześć kolorów stanowi podstawową paletę marki — dokładnie te wartości należy wpisywać w każdym zewnętrznym narzędziu (MailerLite, Canva itp.) w polach kolorystycznych.
| Podgląd | Nazwa pola | Wartość HEX | Zastosowanie |
|---|
| Kolor podstawowy | #000000 | Tło przycisków CTA |
| Kolor drugorzędny | #8F7246 | Akcenty, ikony, etykiety, hover linków |
| Główny kolor | #211C14 | Tło nagłówka, stopki, sekcji hero |
| Kolor tekstu | #2A2A2A | Główny tekst na jasnym tle |
| Kolor ramki | #E2E2E2 | Obwódki kart, linie oddzielające |
| Kolor tła | #FBF6EC | Tło całej strony (kremowe) |
Wskazówka: te wartości są identyczne z tymi, które wpisano w panelu MailerLite — nie wymagają żadnych korekt.
03
Paleta rozszerzona
Kolory uzupełniające, używane w bardziej subtelnych miejscach strony — teł, stanów hover i gradientów.
| Podgląd | Nazwa | Wartość HEX | Zastosowanie |
|---|
| Tekst na przyciskach czarnych | #EBE2CC | Jasny tekst wewnątrz czarnych przycisków CTA |
| Kremowy jaśniejszy | #D9CFB6 | Drugorzędne tło, linki w stopce |
| Brąz ciemniejszy (hover) | #6E5A38 | Stan hover elementów drugorzędnych |
| Brąz najjaśniejszy | #EADCC4 | Delikatne tła, wypełnienia kart |
| Ciemny brąz 2 (gradient) | #2E2618 | Gradienty w sekcjach ciemnych |
| Biały / powierzchnia | #FFFFFF | Tło kart na jasnym tle |
04
Typografia
Dwie czcionki budują charakter marki: Lora (serif, elegancka, do nagłówków) oraz Inter (sans-serif, czytelna, do treści).
Nagłówek H1 — Lora, 700
Kreatywni Razem
Nagłówek H2 — Lora, 600
Na czym polega program
Tekst / body — Inter, 400
Stowarzyszenie Kreatywni Razem realizuje projekty społeczne, edukacyjne i kulturalne w oparciu o autorski Twórczy Model Środowiskowy™.
Obie czcionki dostępne bezpłatnie w Google Fonts: wyszukaj „Lora” i „Inter”, aby zainstalować lub dodać do dowolnego narzędzia projektowego.
05
Logo i jego warianty
Monogram „KR” występuje w dwóch wersjach — pełnej (z tłem) oraz przezroczystej (do nakładania na dowolne tło).
logo-kr.png
Wersja z tłem #211C14
logo-kr-transparent.png
Wersja przezroczysta
Zasady stosowania logo
- Zachowuj minimalny odstęp wokół logo — nie umieszczaj innych elementów tuż przy nim.
- Nie zmieniaj proporcji, nie rozciągaj, nie obracaj monogramu.
- Na ciemnym tle używaj wersji przezroczystej lub jasnej.
- Na jasnym tle używaj wersji z pełnym ciemnym tłem.
06
Przyciski i elementy interfejsu
Wszystkie przyciski akcji (CTA) na stronie mają jednolity styl: czarne tło, kremowy tekst, ikona z lewej strony i strzałka na końcu (z wyjątkiem pobierania dokumentów).
Przycisk akcji (nawigacja)
Zostań wolontariuszem →
Wesprzyj nas →
Przycisk pobierania dokumentu (bez strzałki)
Informacja o programie
Zasada: strzałka „→” zawsze na końcu tekstu przycisków prowadzących do innej strony/akcji. Przyciski pobierania plików PDF nie mają strzałki — tylko ikonę dokumentu.
07
Zasady stosowania
Poniższe zasady pomagają zachować spójność marki w każdym nowym materiale.
Rób tak
Używaj dokładnych wartości HEX z tego dokumentu we wszystkich narzędziach.
Unikaj
Nie „dobieraj z oka” podobnych kolorów — zawsze kopiuj kod HEX.
Rób tak
Nagłówki zawsze czcionką Lora, tekst czcionką Inter.
Unikaj
Nie mieszaj przypadkowych czcionek systemowych (Arial, Calibri) w materiałach marki.
Rób tak
Zachowuj kontrast: jasny tekst na ciemnym tle, ciemny tekst na jasnym tle.
Unikaj
Nie stosuj jasnego tekstu na jasnym tle (np. beż na kremie) — traci czytelność.