Brandbook — Tożsamość Wizualna Spotty

Cel rozdziału

Niniejszy przewodnik tożsamości wizualnej standaryzuje zasady stosowania barw, typografii i znaków graficznych w ekosystemie Spotty. Służy zespołowi Spotted, Samorządowi Uczniowskiemu oraz twórcą treści przy tworzeniu materiałów promocyjnych, plakatów, banerów i grafik na social media.

---

1. Filozofia i Spójność Marki

Wizerunek Spotty opiera się na nowoczesnym, wyrazistym fiolecie z energetycznymi akcentami, który łączy tożsamość społeczności szkolnej z dynamicznym, nowoczesnym charakterem aplikacji.

Planowane ujednolicenie identyfikacji

Obecne wytyczne stanowią bazę pod zachowanie spójności we wszystkich materiałach cyfrowych i drukowanych. W przyszłości planowane jest pełne, kompleksowe ujednolicenie identyfikacji wizualnej dla wszystkich kanałów komunikacji.

---

2. Paleta Kolorów (Color Palette)

Kolorystyka systemu została zdefiniowana z myślą o zachowaniu wysokiego kontrastu (standardy dostępności WCAG) zarówno w trybie jasnym, jak i ciemnym.

Primary Violet

#7C3AED

RGB: 124, 58, 237

Główny kolor marki, przyciski akcji, akcenty

Secondary Magenta

#D6409F

RGB: 214, 64, 159

Akcent uzupełniający, tagi, powiadomienia

Brand Deep Plum

#250A45

RGB: 37, 10, 69

Markowe ciemne tła, karty, nagłówki

Tabela Kolorów Podstawowych i Powierzchni

Nazwa Koloru	Hex	Zastosowanie
Primary Violet	#7C3AED	Główny kolor marki, dominujące elementy interfejsu, przyciski CTA, ikony aktywne.
Secondary Magenta	#D6409F	Kolor wspierający, etykiety nowości, elementy wyróżniające na grafikach.
Brand Deep	#250A45	Ciemna śliwka — tło markowych kart w aplikacji, ekran logowania, banery.
Background Dark	#101418	Główne tło aplikacji w trybie nocnym.
Background Light	#FAFAFA	Główne tło aplikacji w trybie dziennym.
Surface Dark	#1B1F24	Tło kafelków i kart w trybie ciemnym.
Surface Light	#FFFFFF	Tło kafelków i kart w trybie jasnym.

---

3. Typografia

Oficjalnym i podstawowym krojem pisma w całym ekosystemie Spotty jest Roboto (Google Fonts).

• Krój główny: Roboto, sans-serif
• Krój systemowy / alternatywny: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Hierarchia Tekstu

Nagłówek H1 (Tytuły sekcji)      -> Roboto Bold (700), np. 24–28 px
Nagłówek H2 / H3 (Karty i grupy) -> Roboto SemiBold (600), np. 18–20 px
Przyciski i Etykiety CTA        -> Roboto SemiBold (600), np. 16 px
Tekst Podstawowy (Akapity)       -> Roboto Regular (400), np. 14–15 px
Podpisy i Metadane               -> Roboto Regular / Medium (400/500), np. 12–13 px

---

4. Znak Graficzny i Logotyp

Ikona aplikacji oraz grafika banerowa stanowią główny punkt rozpoznawalności marki Spotty.

Ikona Główna (App Icon)

Grafika Promocyjna / Feature Graphic

Zasady Użycia Znaku

• ✅ Zachowanie proporcji: Znak i ikona muszą zawsze zachowywać oryginalne proporcje 1:1.
• ✅ Czytelne tło: Umieszczaj znak wyłącznie na tłach zapewniających wyraźny kontrast (np. biel, neutralny jasny szary, głęboka śliwka #250A45 lub czerń).
• ❌ Nie zniekształcaj: Nie wolno rozciągać, pochylać, nakładać agresywnych cieni ani obrysów zmieniających geometrię znaku.
• ❌ Nie zmieniaj kolorystyki: Nie wolno podmieniać gradientów ani wypełnień logotypu na niespójne barwy spoza brandbooka.

---

5. Zastosowanie w Social Media i Komunikacji

Podczas przygotowywania materiałów promocyjnych przez zespół Spotted oraz Samorząd Uczniowski:

1. Posty, relacje i rolki (Instagram / Facebook / TikTok):
   • Stosuj tło #250A45 lub ciemny fiolet z akcentami #7C3AED i #D6409F.
   • Zadbaj o czytelną typografię bez używania więcej niż dwóch krojów pisma na jednej grafice.
   • Używaj oficjalnej ikony jako elementu brandującego w rogu materiałów informacyjnych.
2. Plakaty i materiały drukowane na terenie szkoły:
   • Wykorzystuj oficjalną paletę kolorów i krój Roboto dla zachowania spójności z aplikacją.
   • Zadbaj o umieszczenie czytelnego kodu QR prowadzącego do pobrania aplikacji lub otwarcia wersji Web (PWA).