Fundamenty
Kolor
Wyrazisty akcent, spokojna baza. Fiolet wskazuje akcję, turkus wspiera wyróżnienie, atrament wyjaśnia.
- Stan rozdziału:
- gotowe
- Aplikacja dziś:
- rozjazd z brandbookiem
Paleta
Cytat
Kolory logo znormalizowano do płaskich wartości na podstawie dostarczonego obrazu. W cyfrowych materiałach punktem odniesienia są kody HEX.
- Fiolet MedPass#6B3FECRGB 107, 63, 236
- Turkus MedPass#26D5D4RGB 38, 213, 212
- Atrament#191D26RGB 25, 29, 38
- Papier#FFFEFCRGB 255, 254, 252
- Tło neutralne#F4F5F8 · RGB 244, 245, 248
- Jasny fiolet#F0EAFF · RGB 240, 234, 255
- Jasna mięta#E4F8F6 · RGB 228, 248, 246
- Tekst pomocniczy#626979 · RGB 98, 105, 121
- Biel#FFFFFF · RGB 255, 255, 255
- Liniapropozycja Kanonu#E3E5EB · RGB 227, 229, 235
- Fiolet ciemnypropozycja Kanonu#5A32D1 · RGB 90, 50, 209
- Turkus ciemnypropozycja Kanonu#158F8E · RGB 21, 143, 142
| Kolor | Rola | Źródło |
|---|---|---|
| Fiolet MedPass | Akcja: przycisk główny, aktywny element, odnośnik. Fiolet wskazuje, co można zrobić. | Brandbook 1.0, s. 7 i 10 |
| Turkus MedPass | Wyróżnienie: drugi moduł znaku, akcent na kaflach i w ilustracji. Nigdy jako tło pod białym tekstem. | Brandbook 1.0, s. 7, 8 i 10 |
| Atrament | Pismo, napis w logotypie, ciemne powierzchnie (etykieta, wariant odwrócony). | Brandbook 1.0, s. 7 |
| Papier | Tło strony i karty na ciemniejszym tle. | Brandbook 1.0, s. 7 |
| Tło neutralne | Płótno pod kartami, kafle informacyjne, nagłówek tabeli. | Brandbook 1.0, s. 7 |
| Jasny fiolet | Tło aktywnej pozycji nawigacji, pastylka „Zaplanowany”, delikatne wyróżnienie związane z akcją. | Brandbook 1.0, s. 7 i 11 |
| Jasna mięta | Tło przycisku drugorzędnego i kafli wyróżnionych turkusem. | Brandbook 1.0, s. 7 i 10 |
| Tekst pomocniczy | Opisy, podpisy, etykiety kolumn, tekst drugoplanowy. | Brandbook 1.0, s. 7 |
| Biel | Tekst na fiolecie i na atramencie, karta na tle neutralnym. | Brandbook 1.0, s. 8 (zestawienia „biel na fiolecie”, „biel na turkusie”) |
| Linia | Obrys kart, separatory wierszy, obramowanie pól. Brandbook rysuje takie linie, ale nie podaje wartości. | Propozycja Kanonu, odczytana z układów na s. 5, 10 i 11 |
| Fiolet ciemny | Stan najechania i wciśnięcia przycisku głównego. Brandbook nie definiuje stanów. | Propozycja Kanonu, fiolet ściemniony o jeden krok |
| Turkus ciemny | Turkus w wersji, która przechodzi próg kontrastu na jasnym tle: ikony, cienki tekst wyróżniony. Sam turkus (1,80:1) nie nadaje się na tekst. | Propozycja Kanonu, wynik z tabeli kontrastów |
Osiem kolorów z brandbooka plus biel, która w brandbooku występuje w zestawieniach kontrastu, ale nie ma karty. Do tego trzy propozycje Kanonu, bez których nie da się narysować interfejsu: linia obrysu, fiolet ciemny na stan najechania i turkus ciemny do ikon i wyróżnień tekstowych. Wszystkie trzy są oznaczone i czekają na zatwierdzenie.
Zasady użycia
Cytat
Fiolet wskazuje akcję. Turkus wspiera wyróżnienie.
- Fiolet to akcja. Przycisk główny, aktywna pozycja nawigacji, odnośnik, kicker nad nagłówkiem, data następnej czynności. Jeżeli coś jest fioletowe, można to kliknąć albo jest to najważniejsza rzecz na ekranie. Nie używamy fioletu do dekoracji.
- Turkus to wyróżnienie. Drugi moduł znaku, akcent na kaflach, kropka wpisu technicznego w historii, tło przycisku drugorzędnego w wersji jasnej (jasna mięta). Turkus nigdy nie jest tłem pod białym tekstem (kontrast 1,82:1) i nigdy nie jest kolorem tekstu na jasnym tle (1,80:1).
- Atrament to pismo i ciemne powierzchnie: etykieta inwentarzowa, wariant odwrócony logo. Na atramencie stoi biel.
- Papier to tło strony, tło neutralne to płótno pod kartami. Karta na tle neutralnym jest biała, karta na papierze ma cienką linię.
- Jasny fiolet wyróżnia to, co związane z akcją, ale nie jest przyciskiem: aktywna pozycja nawigacji, pastylka „Zaplanowany”, tło ikony w stanie pustym.
- Jasna mięta to tło przycisku drugorzędnego (brandbook s. 10, „Historia wpisów”) i kafli związanych z dokumentacją.
- Tekst pomocniczy służy do opisów, podpisów i etykiet kolumn. Na papierze daje 5,46:1, więc nadaje się do drobnego tekstu.
- Kolor nigdy nie jest jedynym nośnikiem informacji. Status ma zawsze etykietę tekstową i ikonę. Szczegóły: Oznaczenia statusu i Dostępność.
Barwy stanów
Cytat
Statusy: zawsze z etykietą tekstową. Kolor nie zastępuje informacji.
To jedyne, co brandbook mówi o stanach. Wartości barw nie podaje. Aplikacja ma pięć stanów zapisanych w oklch i policzonych pod WCAG (apps/web/src/app/globals.css). Kanon pokazuje je jako stan faktyczny i sprawdza ich kontrasty. Nie są zatwierdzone przez brandbook, ale są dobrze zrobione i nie ma powodu ich wyrzucać: żadna z nich nie koliduje z fioletem ani turkusem.
| Stan | Podgląd | Tło | Tekst | Obrys | Tekst na tle | Obrys na bieli |
|---|---|---|---|---|---|---|
| Po terminie | po terminie o 12 dni | #FFEEEC | #901114 | #D37C72 | 8,21:1 (AAA) | 3,05:1 (grafika OK) |
| Termin w ciągu 30 dni | za 9 dni | #FEF2E1 | #7F4700 | #C2883E | 6,78:1 (AA) | 3,05:1 (grafika OK) |
| W porządku | w użytkowaniu | #E8F9EB | #1D6136 | #5EA272 | 6,81:1 (AA) | 3,05:1 (grafika OK) |
| Bez wpisów w historii | brak wpisów | #F9EDFB | #732D7E | #BC7DC6 | 7,70:1 (AAA) | 3,05:1 (grafika OK) |
| Poza użytkowaniem | wycofane | #EAEDF1 | #505963 | #8D959D | 6,06:1 (AA) | 3,04:1 (grafika OK) |
Wartości w aplikacji są zapisane w oklch; hex obok to ich przeliczenie do sRGB. Kontrasty policzone tutaj, nie przepisane.
Kontrasty
Cytat
Zestawienia poniżej dotyczą tekstów i interfejsu. Dla drobnego tekstu przyjmujemy kontrast co najmniej 4,5:1.
Tabela jest liczona przy każdym budowaniu strony z wartości w tokenach (WCAG 2.2, SC 1.4.3 dla tekstu, SC 1.4.11 dla grafiki). Cztery wartości podane w brandbooku stoją obok naszego wyniku z informacją, czy się zgadzają. Pozostałe pary to zestawienia, których brandbook nie liczy, a interfejs ich używa.
Sprawdzone przy budowaniu strony: wszystkie cztery wartości podane w brandbooku (s. 8) zgadzają się z naszym wyliczeniem co do setnej.
| Zestawienie | Podgląd | Kontrast | Próg | Wynik | Brandbook |
|---|---|---|---|---|---|
| Atrament na papierze | Przegląd okresowy | 16,73:1 | 4,5:1 tekst | spełnia (AAA) | 16,73:1 · zgadza się |
| Biel na fiolecie (przycisk główny) | Przegląd okresowy | 5,92:1 | 4,5:1 tekst | spełnia (AA) | 5,92:1 · zgadza się |
| Atrament na turkusie | Przegląd okresowy | 9,28:1 | 4,5:1 tekst | spełnia (AAA) | 9,28:1 · zgadza się |
| Biel na turkusie | Przegląd okresowy | 1,82:1 | 4,5:1 tekst | nie spełnia | 1,82:1 · zgadza się |
| Tekst pomocniczy na papierze | Przegląd okresowy | 5,46:1 | 4,5:1 tekst | spełnia (AA) | nie podaje |
| Tekst pomocniczy na bieli (karta) | Przegląd okresowy | 5,50:1 | 4,5:1 tekst | spełnia (AA) | nie podaje |
| Tekst pomocniczy na tle neutralnym | Przegląd okresowy | 5,05:1 | 4,5:1 tekst | spełnia (AA) | nie podaje |
| Tekst pomocniczy na jasnym fiolecie | Przegląd okresowy | 4,70:1 | 4,5:1 tekst | spełnia (AA) | nie podaje |
| Tekst pomocniczy na jasnej miecie | Przegląd okresowy | 4,99:1 | 4,5:1 tekst | spełnia (AA) | nie podaje |
| Fiolet na papierze (odnośnik, kicker) | Przegląd okresowy | 5,87:1 | 4,5:1 tekst | spełnia (AA) | nie podaje |
| Fiolet na jasnym fiolecie (pastylka „Zaplanowany”, aktywna nawigacja) | Przegląd okresowy | 5,05:1 | 4,5:1 tekst | spełnia (AA) | nie podaje |
| Fiolet na tle neutralnym | Przegląd okresowy | 5,43:1 | 4,5:1 tekst | spełnia (AA) | nie podaje |
| Biel na fiolecie ciemnym (przycisk po najechaniu) | Przegląd okresowy | 7,47:1 | 4,5:1 tekst | spełnia (AAA) | nie podaje |
| Atrament na jasnej miecie (przycisk drugorzędny) | Przegląd okresowy | 15,31:1 | 4,5:1 tekst | spełnia (AAA) | nie podaje |
| Atrament na tle neutralnym | Przegląd okresowy | 15,47:1 | 4,5:1 tekst | spełnia (AAA) | nie podaje |
| Biel na atramencie (wariant odwrócony, etykieta) | Przegląd okresowy | 16,87:1 | 4,5:1 tekst | spełnia (AAA) | nie podaje |
| Turkus na papierze | Przegląd okresowy | 1,80:1 | 4,5:1 tekst | nie spełnia | nie podaje |
| Turkus ciemny na papierze (propozycja do ikon i wyróżnień tekstowych) | Przegląd okresowy | 3,89:1 | 4,5:1 tekst | nie spełnia | nie podaje |
| Turkus jako element graficzny na bieli (ikona, kropka w historii) | 1,82:1 | 3:1 grafika | nie spełnia | nie podaje | |
| Fiolet jako obrys ogniska klawiatury na papierze | 5,87:1 | 3:1 grafika | spełnia (AA) | nie podaje | |
| Linia obrysu na bieli | 1,26:1 | 3:1 grafika | nie spełnia | nie podaje |
- Turkus nie nadaje się na tekst w żadnym kierunku: ani biel na turkusie, ani turkus na papierze. Zostaje elementem graficznym (kropka, ikona, tło kafla pod atramentem). Do wyróżnień tekstowych Kanon proponuje turkus ciemny
#158F8E. - Tekst pomocniczy na jasnym fiolecie przechodzi próg 4,5:1 z niewielkim zapasem. Na pastelach lepiej używać atramentu albo fioletu.
- Fiolet na jasnym fiolecie (pastylka „Zaplanowany” z brandbooka s. 11) spełnia AA. Tak samo fiolet na papierze i na tle neutralnym, więc odnośniki i kickery są bezpieczne.
Co zmienić w aplikacji
Druk
Cytat
W druku dobierz separację CMYK do profilu i podłoża. Wzór koloru zatwierdzaj na próbie, nie na ekranie.
Brandbook nie podaje wartości CMYK ani Pantone. Nie zgadujemy ich. Przed pierwszym drukiem (etykiety, pieczątka, materiały na spotkanie) trzeba zamówić próbę i wpisać zatwierdzone wartości do tokenów jako osobne pole.