System kolorów WWW

Szkoła Podstawowa nr 128 w Krakowie

System kolorów WWW SP128 korzysta ze wspólnych dla ZSO9 skal Blue, Red i Neutral oraz wspólnych ról semantycznych. W interfejsie szkoły Brand Red pełni rolę koloru prowadzącego, a Brand Blue pozostaje kolorem uzupełniającym i łączy serwis z identyfikacją ZSO9.

1

Kolory bazowe

Brand Red

#DB0909

Podstawowy kolor identyfikacji SP128. W interfejsie jego dostępne odpowiedniki Red 600 i Red 700 obsługują główne akcje, linki oraz stany interaktywne.

Brand Blue

#0093DB

Kolor uzupełniający SP128 i wspólny element systemu wizualnego ZSO9. Nie konkuruje z czerwienią w głównych akcjach interfejsu.

W serwisie SP128 hierarchię prowadzi Brand Red #DB0909. Brand Blue #0093DB pełni rolę uzupełniającą i łączy szkołę ze wspólną identyfikacją ZSO9.

2

Skala Red

50

#FDF2F0 oklch(0.9692 0.0122 29.9)

□ Subtle surface

100

#FDE5E1 oklch(0.9402 0.0270 28.9)

200

#FCCAC2 oklch(0.8806 0.0582 28.8)

300

#FA9F92 oklch(0.7909 0.1110 28.6)

400

#F36454 oklch(0.6811 0.1792 29.0)

500

#DB0909 oklch(0.5620 0.2274 28.9)

★ Brand Red

600

#BE130E oklch(0.5096 0.2003 29.0)

▣ Primary · SP128

700

#9A130D oklch(0.4394 0.1685 29.1)

↗ Link / Hover

800

#78110C oklch(0.3700 0.1374 28.9)

900

#570E0A oklch(0.2995 0.1054 28.5)

950

#380A07 oklch(0.2292 0.0733 28.4)

3

Skala Blue

50

#EEF6FD oklch(0.9692 0.0127 244.3)

100

#DDEEFB oklch(0.9404 0.0253 240.7)

200

#BADDF7 oklch(0.8807 0.0516 240.3)

300

#88C6F3 oklch(0.8010 0.0903 240.8)

400

#48AEF1 oklch(0.7201 0.1353 241.2)

500

#0093DB oklch(0.6342 0.1483 241.2)

★ Brand Blue

600

#037DBB oklch(0.5640 0.1314 241.3)

▣ Primary · XXIII LO

700

#026A9F oklch(0.5012 0.1162 241.0)

↗ Link / Hover

800

#08527B oklch(0.4194 0.0941 241.1)

T Strong text

900

#093C5A oklch(0.3407 0.0729 240.9)

950

#072437 oklch(0.2496 0.0496 241.5)

4

Skala Neutral

50

#F8FAFD oklch(0.9844 0.0045 258.3)

□ Subtle surface

100

#EEF2F5 oklch(0.9590 0.0059 239.8)

200

#E0E5E9 oklch(0.9192 0.0077 241.7)

— Border

300

#C5CBD0 oklch(0.8389 0.0096 242.9)

400

#9EA6AB oklch(0.7203 0.0117 234.9)

500

#798288 oklch(0.6011 0.0141 236.8)

600

#5A6268 oklch(0.4913 0.0138 240.1)

T Text secondary

700

#3F464B oklch(0.3896 0.0125 238.8)

800

#262C31 oklch(0.2893 0.0125 243.3)

T Text primary

900

#12171A oklch(0.2007 0.0097 234.3)

950

#070A0C oklch(0.1420 0.0070 234.4)

5

Role semantyczne SP128

W interfejsie SP128 punktem wyjścia jest Brand Red, ale nie każdy czerwony odcień pełni tę samą funkcję. Tokeny semantyczne oddzielają kolor marki od przycisków, linków, stanów interaktywnych i komunikatów. Brand Blue pozostaje akcentem uzupełniającym oraz łącznikiem ze wspólnym systemem ZSO9.

Rola	Token	Kolor	Zastosowanie w SP128
Marka SP128	Red 500	`#DB0909`	Logo, nagłówek strony, duże powierzchnie marki i pojedyncze mocne wyróżnienia.
Primary	Red 600	`#BE130E`	Główne przyciski i aktywne kontrolki z białym tekstem.
Primary hover / active	Red 700	`#9A130D`	Stany hover i active głównych elementów interaktywnych.
Link	Red 700	`#9A130D`	Link tekstowy na jasnym tle; zapewnia wysoki kontrast.
Brand accent / ZSO9	Blue 500	`#0093DB`	Uzupełniający akcent SP128: elementy wspólne ZSO9, ilustracje i kontekst informacyjny. Nie jest kolorem głównego CTA.
Brand surface	Red 50	`#FDF2F0`	Delikatne tło wyróżnienia marki z tekstem Red 800 lub Neutral 800.
Info surface	Blue 50	`#EEF6FD`	Tło komunikatu informacyjnego z tekstem Blue 800.
Text primary	Neutral 800	`#262C31`	Tekst podstawowy i nagłówki.
Text secondary	Neutral 600	`#5A6268`	Opisy, metadane i tekst pomocniczy.
Border	Neutral 200	`#E0E5E9`	Obramowania kart, tabel i delikatne podziały.
Subtle surface	Neutral 50	`#F8FAFD`	Neutralne tła i wydzielone powierzchnie.
Error	Red 700 / Red 50	`#9A130D` na `#FDF2F0`	Komunikat błędu wyłącznie z tekstem i ikoną — sama czerwień nie wystarcza, ponieważ jest także kolorem marki SP128.
Focus ring	Blue 700	`#026A9F`	Widoczny obrys fokusu klawiatury, odróżniony od czerwonych akcji i stanów marki.

6

Kontrast i dostępność w SP128

Podstawą oceny pozostaje WCAG 2.x. APCA traktujemy jako dodatkową informację o czytelności, a nie zamiennik obowiązujących progów WCAG. Poniższe zestawienie pokazuje najważniejsze pary używane w interfejsie SP128, w tym Brand Blue jako akcent uzupełniający.

Zastosowanie	Tekst (FG)	Tło (BG)	Podgląd	WCAG	APCA Lc
Tekst główny	`#262C31`	`#FFFFFF`	Aa	14,12:1 AAA	+100,8
Tekst drugorzędny	`#5A6268`	`#FFFFFF`	Aa	6,21:1 AA	+81,0
Link SP128	`#9A130D`	`#FFFFFF`	Link	8,49:1 AAA	+87,4
Primary SP128	`#FFFFFF`	`#BE130E`	Przycisk	6,39:1 AA	−84,7
Primary hover / active	`#FFFFFF`	`#9A130D`	Przycisk	8,49:1 AAA	−92,0
Brand Red / powierzchnia marki	`#FFFFFF`	`#DB0909`	SP128	5,18:1 AA	−78,4
Brand Blue / akcent	`#FFFFFF`	`#0093DB`	Akcent	3,39:1 AA duży tekst	−66,1
Panel informacyjny	`#08527B`	`#EEF6FD`	Informacja	7,68:1 AAA	+82,4
Panel błędu	`#9A130D`	`#FDF2F0`	Błąd	7,74:1 AAA	+80,9

Rekomendacja dla Red 600

Nie przyciemniamy Red 600 #BE130E tylko po to, aby osiągnąć 7:1. Kontrast 6,39:1 wyraźnie spełnia WCAG AA dla zwykłego tekstu, a APCA około −84,7 wskazuje bardzo dobrą czytelność białej etykiety przycisku.

Próg 7:1 i oznaczenie AAA nie są wymagane dla każdego elementu interfejsu. Red 700 #9A130D już zapewnia 8,49:1 i pozostaje wariantem o najwyższym kontraście — dla linków, stanów hover/active oraz sytuacji, w których potrzebny jest poziom AAA.

Brand Blue #0093DB zachowujemy jako akcent. Z bielą osiąga tylko 3,39:1, dlatego może nieść duży, pogrubiony tekst lub pełnić funkcję dekoracyjną, ale nie powinien być tłem małego białego tekstu ani podstawowego CTA SP128.

7

Zasady użycia w SP128

Czerwień buduje rozpoznawalność SP128, ale w interfejsie każdy odcień ma określoną rolę. Niebieski uzupełnia system i łączy szkołę z ZSO9 — nie zastępuje czerwieni w głównych akcjach.

Stosuj

Brand Red — Red 500 #DB0909 w znaku, nagłówku strony, dużych powierzchniach marki i pojedynczych mocnych wyróżnieniach.
Red 600 #BE130E w głównych przyciskach i aktywnych kontrolkach z białym tekstem.
Red 700 #9A130D w linkach tekstowych oraz stanach hover i active.
Red 50 #FDF2F0 jako delikatne tło wyróżnienia z tekstem Red 800 #78110C lub Neutral 800 #262C31.
Brand Blue #0093DB jako kolor uzupełniający w elementach odnoszących się do wspólnego systemu ZSO9, ilustracjach i dodatkowych akcentach.
Neutral 800 #262C31 dla tekstu podstawowego i Neutral 600 #5A6268 dla opisów oraz metadanych.

Nie stosuj

Brand Blue #0093DB jako koloru głównego przycisku lub zamiennika czerwieni w podstawowych elementach SP128.
Dwóch równorzędnych głównych CTA — jednego czerwonego i jednego niebieskiego — w tym samym widoku.
Red 50–300 ani Blue 50–300 jako koloru zwykłego tekstu na białym tle.
Blue 500 #0093DB jako tła małego białego tekstu; para ma zbyt niski kontrast dla tekstu podstawowego.
Przypadkowych odcieni czerwieni i niebieskiego spoza zdefiniowanych skal.
Samego koloru do przekazywania znaczenia. Błąd, ostrzeżenie lub sukces wymagają również tekstu, ikony albo jednoznacznej etykiety.