Komponenty cyfrowe

Szkoła Podstawowa nr 128 w Krakowie

Komponenty cyfrowe porządkują powtarzalne elementy serwisu Szkoły Podstawowej nr 128 w Krakowie. Pomagają rodzicom, opiekunom i uczniom szybko odnaleźć informacje oraz wykonać potrzebną czynność.

W SP128 identyfikację prowadzi Brand Red #DB0909. Główne akcje korzystają z Red 600 #BE130E, a linki i stany interaktywne z Red 700 #9A130D. Brand Blue #0093DB pozostaje kolorem uzupełniającym. Nagłówki stosują Rubik Medium, a tekst podstawowy — Open Sans Regular.

Komponenty korzystają z presetów dostępnych w instalacji SP128. Ich techniczne nazwy nadal mają prefiks „23LO / …”, ale opisane poniżej zastosowania i kolory dotyczą SP128.

Przyciski

Przycisk nazywa konkretną czynność. W jednej sekcji wskazujemy jedną główną akcję; pozostałe mają spokojniejszą formę. Czerwony przycisk podstawowy SP128 jest zwykłym elementem interfejsu, a nie sygnałem alarmowym.

Primary · Button Module · 23LO / Button / Primary

Przycisk podstawowy

Do głównej akcji, np. przejścia do informacji o rekrutacji do klasy pierwszej lub sprawdzenia harmonogramu.

Tło: Red 600 #BE130E
Tekst: White #FFFFFF
Hover i active: Red 700 #9A130D

Poniższy działający przykład prowadzi do systemu kolorów SP128.

Zobacz system kolorów
Secondary · Button Module · lokalny wariant Primary

Przycisk drugorzędny

Do akcji uzupełniającej. Stosujemy obrys lub zwykły link zamiast drugiego intensywnego CTA.

Tło: White #FFFFFF
Tekst i obrys: Red 700 #9A130D
Tło hover: Red 50 #FDF2F0

Wariant powstaje przez lokalne ustawienia istniejącego presetu Primary.

Poznaj typografię

Stany interaktywne

Hover nie może być jedynym sygnałem działania. Elementy muszą mieć widoczny focus podczas obsługi klawiaturą; na jasnym tle stosujemy Red 700 #9A130D. Wskaźnik powinien być odróżnialny także od czerwonego przycisku, np. dzięki odsunięciu obrysu od jego krawędzi.

Etykiety „Sprawdź terminy zapisów” lub „Pobierz listę podręczników” wyjaśniają rezultat lepiej niż „Więcej”. Nie tworzymy obok siebie równorzędnego czerwonego i niebieskiego CTA.

Linki tekstowe

Domyślny link na jasnym tle ma kolor Red 700 #9A130D. W treści ciągłej podkreślamy go, aby można było rozpoznać go również bez rozróżniania kolorów.

Zobacz system kolorów WWW SP128

Stosuj

  • Opis celu, np. „Zasady korzystania ze świetlicy”.
  • Red 700 #9A130D i podkreślenie w akapicie.
  • Format przy plikach, np. „Wniosek do pobrania (PDF)”.
  • Jasne wskazanie przejścia do wspólnego serwisu ZSO9.

Unikaj

  • Ogólnych etykiet „tutaj” lub „kliknij”.
  • Brand Red #DB0909 i Brand Blue #0093DB jako automatycznego koloru wszystkich linków.
  • Linków nierozróżnialnych od zwykłego tekstu.
  • Podkreślania nieklikalnych fragmentów.

Karty

Karta jest wzorcem układu, a nie osobnym modułem Divi 4. Jej rolę pełni Column zawierająca Text Module, Blurb Module lub Button Module. Tło, obramowanie, zaokrąglenie i padding ustawiamy na Column.

Column · 23LO / Card / Base

Karta podstawowa

Do krótkich informacji o świetlicy, stołówce, wsparciu pedagoga lub kontaktach. Każda karta obejmuje jeden temat.

Tło: White #FFFFFF
Obramowanie: 1 px, Neutral 200 #E0E5E9
Tekst: Neutral 800 #262C31
Narożniki: 12 px; bez cienia
Padding: 32 / 28 / 24 px

Column · 23LO / Card / Specimen

Karta demonstracyjna

Większy kontener do próbek w dokumentacji identyfikacji wizualnej, np. znaku lub komponentu.

Padding: 40 / 32 / 24 px.

Nie stosujemy go automatycznie do każdej krótkiej informacji. Parametry podano kolejno dla komputera, tabletu i telefonu.

Struktura i odstępy

Regular Section → Row → Column (23LO / Card / Base) → Text Module / Blurb Module / Button Module

Ikony w kartach kontaktowych umieszczamy po lewej. Czerwień może wyróżniać ikonę lub link, ale nie wypełnia każdej karty. Zachowujemy odstępy między kolumnami oraz pionowy odstęp po ułożeniu kart jedna pod drugą na telefonie.

Komunikaty i powierzchnie informacyjne

W SP128 czerwony kolor sam w sobie nie oznacza błędu — jest także kolorem marki. Znaczenie komunikatu musi wynikać z nagłówka, treści i formy. Zwykłych informacji organizacyjnych nie przedstawiamy jako alarmów.

Informacja organizacyjna

Tło: Blue 50 #EEF6FD
Akcent: Blue 800 #08527B
Tekst: Neutral 800 #262C31

Spokojna powierzchnia do objaśnień dla rodziców i uczniów. Niebieski pełni tu funkcję informacyjną, a nie przejmuje roli głównego koloru SP128.

Przykładowy komunikat: Przed wypełnieniem formularza przygotuj wymagane dane.

Błąd lub ważne ostrzeżenie

Tło: Red 50 #FDF2F0
Akcent: Red 700 #9A130D
Tekst: Neutral 800 #262C31

Komunikat wskazuje problem i sposób jego rozwiązania. Samo czerwone tło nie wystarcza.

Przykładowy błąd formularza: Nie wysłano formularza. Uzupełnij wymagane pola i spróbuj ponownie.

Brand Blue #0093DB stosujemy oszczędnie w ilustracjach i akcentach łączących SP128 z ZSO9. Nie zastępuje Red 600 #BE130E w głównej akcji. Red 50 #FDF2F0 może też wspierać identyfikację szkoły, ale nie powinien być automatycznym tłem każdej sekcji.

Elementy pomocnicze

Etykiety, podpisy i separatory porządkują informacje. Ważnych terminów, zasad lub instrukcji dla rodziców nie ukrywamy w drobnym tekście.

Label · Open Sans Semi-Bold · 15 / 15 / 14 px

Dokumenty do pobrania

Small · Open Sans Regular · 15 / 15 / 14 px

Przykład opisu pomocniczego: formularz otwiera się w osobnym serwisie.

Caption · Open Sans Regular · 14 / 14 / 13 px

Przykład podpisu zdjęcia: wspólna praca uczniów podczas zajęć.

Etykiety używają Neutral 800 #262C31, opisy pomocnicze — Neutral 600 #5A6268, a Divider Module — Neutral 200 #E0E5E9. Separator pozostaje subtelny; nie dodajemy czerwonej linii pod każdym nagłówkiem.

Zasady stosowania w SP128

  • Najpierw wybieramy istniejący preset w instalacji SP128. Lokalne nadpisania służą uzasadnionym wariantom komponentu.
  • Rubik Medium buduje nagłówki, Open Sans Regular — treść, a Open Sans Semi-Bold — krótkie etykiety.
  • Poziomy H1–H6 wynikają z hierarchii treści, a nie z oczekiwanego rozmiaru. Strona ma jeden główny H1.
  • Red 600 #BE130E prowadzi główne akcje, Red 700 #9A130D — linki i stany interaktywne. Brand Blue #0093DB pozostaje dodatkiem.
  • Większość powierzchni pozostaje biała lub neutralna. Kolor nie zastępuje hierarchii, odstępów i czytelnych etykiet.
  • Komunikaty błędów nazywają problem i podają następny krok. Czerwony przycisk SP128 nie oznacza automatycznie zagrożenia.
  • Na telefonie sprawdzamy łamanie etykiet, odstępy między kartami i wygodę dotykania linków. Przy obsłudze klawiaturą — widoczny focus.
  • Tworzymy nowe komponenty tylko wtedy, gdy rozwiązują powtarzalną potrzebę użytkowników.