2.4 · Identyfikacja
Grafika i ikony
Elementy graficzne marki: teksturowe tła i mesh gradienty, system ikon statusowych i funkcyjnych, gwiazdka Refindi, ikona aplikacji / favicon oraz systemowy dymek z claimem.
Wersja 2026.1Aktualizacja 2026-10-06 Markdown
Elementy graficzne uzupełniają logo i typografię: miękkie tła nadają materiałom głębię, ikony porządkują komunikaty i statusy, a gwiazdka i dymek systemowy niosą obietnicę „5-gwiazdkowej obsługi rzeczy znalezionych”. Wszystkie elementy są pomocnicze — nie zastępują logotypu.
Tła i tekstury
Autorskie tła teksturowe to rozmyte, brzoskwiniowe plamy o delikatnym ziarnie. Dodają charakteru i głębi bez dominowania treści. Logo kładzie się na nich w wersji białej.
Mesh gradienty rozszerzają paletę teł o przejścia brzoskwiniowo-błękitne: miękkie okręgi i fale bez ostrych krawędzi. Pokazane w PDF kadry są przykładami kierunku; ich odcienie pochodzą ze starej palety i wymagają dopasowania do obecnych tokenów.
Sygnet jako wzór, obrys lub kadr, blendy, gwiazdki, ikony statusu, mikrohasła i grafikę CSR jako elementy kompozycji (PDF s. 140) opisuje temat Kompozycja.
- Nie wolno
Nie stosuj teksturowego tła pod tekst ciągły w małym stopniu pisma.
- Nie wolno
Nie zmieniaj koloru tekstur ani gradientów poza zatwierdzonymi wariantami.
- Powinno
Używaj teł z umiarem — jako akcent, nie dominantę layoutu; tło nie może konkurować z treścią.
- Można
Teksturowe tła (miękkie, rozmyte plamy w tonacji brzoskwiniowej) stosuj jako akcent: slajdy, tła pod hasła i cytaty, banery i social media, inserty drukowane, sekcje „eko” i onboardingowe na stronie.
- PowinnoDo weryfikacji
Mesh gradienty łączą brzoskwiniowy akcent z jasnym błękitem; ich odcienie należy dopasować do obecnych tokenów (#FFAE84/#FF9F6B, #53BDF6) zanim zostaną użyte w nowych materiałach.
2.4.a
Kontur sygnetu jako tło
Liniowy obrys sygnetu (linia 2 px, #FF9E6D, krycie 29%) leży pod treścią dużych sekcji otwierających na tle #F5F4F2. Na witrynie ma szerokość min(1200px, 96vw), jest wyśrodkowany i ukryty przed czytnikami (aria-hidden).
Sekcja hero
Nagłówek sekcji
Tekst nad konturem pozostaje w pełni czytelny.
Poprawnie: Kontur pod treścią
Linia 2 px, krycie 29%, tło #F5F4F2.
Błąd: Wypełniony kolorem
Kontur nie dostaje wypełnienia.
Błąd: Jako logo
Kontur to dekoracja, nie znak marki.
- Przykład
Teksturowe tło marki
Dwa poziome kadry w brzoskwiniowych, rozmytych plamach o ziarnistej fakturze — jaśniejsze i ciemniejsze strefy tworzą miękką głębię. Na górnym białe logo poziome pośrodku, dolny bez treści.
- PrzykładDo weryfikacji
Mesh gradienty
Cztery kadry z płynnymi przejściami między brzoskwiniowym a jasnoniebieskim; niebieskie okręgi w rogach, w jednym kadrze ukośna fala dzieląca obszary.
Ikony
System ikon jest integralną częścią interfejsu i komunikatów — w aplikacji, w e-mailach transakcyjnych i powiadomieniach oraz w materiałach branżowych (www, slajdy).
Ikony statusowe mają postać piktogramu na kafelku. Kolor kafelka koduje stan:
| Stan | Kafelek | Piktogram |
|---|---|---|
| wyłączone | jasnoszary | ciemny |
| neutralne | ciemny (czarny) | biały |
| w realizacji | brzoskwiniowy | biały |
| zatwierdzone | zielony | biały |
Rozszerzona biblioteka ikon funkcyjnych (wypełnione, z zaokrąglonymi zakończeniami) pozwala budować interfejsy, komunikaty i materiały edukacyjne w spójnym stylu.
Stan repo witryny: w kodzie używana jest biblioteka lucide-react (ok. 200 plików ją importuje); ikony w PDF nie mają odpowiednika w plikach repo. Nie twórz nowych ikon na potrzeby pojedynczego materiału.
Komunikacja eko ma własny zestaw ikon (pięć ikon w eco green: recykling, ekologiczny materiał, paczka, serce eko-troski, globus z wariantami), znak EkoFace i konturowe ilustracje z zielono-brzoskwiniowymi plamami — zob. Odpowiedzialność i eko oraz EkoFace. Obecna sekcja eko na stronie używa ikon lucide (Leaf, Globe, Recycle) — rozbieżność opisano w tamtym temacie.
- Musi
W jednym widoku lub materiale używaj ikon z jednej biblioteki i w jednym stylu (wypełnione albo konturowe); nie rysuj pojedynczych ikon ad hoc.
- Nie wolno
Kolor kafelka ikony zawsze oznacza stan, nie dekorację — nie zmieniaj go dla urozmaicenia layoutu.
- Powinno
Ikony służą czytelności komunikatów i statusów (np. potwierdzenie zgłoszenia, oczekiwanie na odpowiedź, wysyłka) oraz wspierają przyjazny, przejrzysty i nowoczesny ton.
- PowinnoDo weryfikacji
Ikona statusowa to piktogram na kafelku z zaokrąglonymi rogami, w jednym z czterech wariantów kolorystycznych odpowiadających stanowi: wyłączone (jasnoszary kafel), neutralne (ciemny kafel), w realizacji (brzoskwiniowy kafel), zatwierdzone (zielony kafel).
- PowinnoDo weryfikacji
W kodzie witryny i aplikacji bazową biblioteką ikon jest lucide-react (stan repo); docelowa relacja do biblioteki z PDF wymaga decyzji.
2.4.b
Siatka ikony 24 × 24
Ikony interfejsu witryny pochodzą z biblioteki lucide-react (ok. 200 plików ją importuje). Siatka 24 × 24 z marginesem 1 px, zakończenia i narożniki zaokrąglone.
Styl marki: linia 3 px o stałej grubości (absoluteStrokeWidth) w kolorze #FF9E6D — zamiast domyślnych 2 px skalowanych z ikoną.
- 1Zakończenia zaokrąglonestroke-linecap: round — każdy koniec linii to półokrąg.
- 2Narożniki R 2Łuki a2 2 w ścieżce i stroke-linejoin: round.
- 3Linia 3 pxStała grubość na ekranie — absoluteStrokeWidth, strokeWidth 3, #FF9E6D.
- Oś środkowaPrzerywana linia pokazuje ścieżkę źródłową lucide (Package, v0.462.0).
Ta sama ikona w rozmiarach 24 · 32 · 48 · 72 px — linia zostaje 3 px
2.4.c
Ikony w stylu marki
Przykładowy zestaw z lucide-react w stylu marki. W jednym widoku jedna biblioteka i jeden styl; nie rysujemy pojedynczych ikon ad hoc. Najedź na ikonę, aby zobaczyć jej nazwę w bibliotece.
- Szukaj
<Search /> - Lokalizacja
<MapPin /> - Paczka
<Package /> - Wysyłka
<Truck /> - Kod QR
<QrCode /> - Powiadomienie
<BellRing /> - Bezpieczeństwo
<ShieldCheck /> - Klucze
<KeyRound /> - Portfel
<Wallet /> - Słuchawki
<Headphones /> - Telefon
<Smartphone /> - Obiekt
<Hotel />
Ikony statusowe
Piktogram na kafelku z zaokrąglonymi rogami; kolor kafelka koduje stan, nie dekorację.
Ilustracja tabeli stanów. Odcień „zielonego” nie jest zdefiniowany — tu poglądowo eco #42B446.
- wyłączone
- neutralne
- w realizacji
- zatwierdzone
- PrzykładDo weryfikacji
Ikony statusowe w czterech stanach
Piętnaście ikon (m.in. pinezka, nawiasy, telefon, monitor, dymek z ptaszkiem, dzwonek recepcji, ciężarówka, zegar, paczka z ptaszkiem, moneta, grupa osób, kiełek, zębatka ze strzałką, żarówka, cel) powtórzonych w czterech rzędach: szary kafel z ciemnym piktogramem (wyłączone), czarny z białym (neutralne), brzoskwiniowy z białym (realizacja), zielony z białym (zatwierdzenie). Obok przykład bloku: ikona zegara i nagłówek „Oszczędność czasu personelu”.
- Przykład
Biblioteka ikon funkcyjnych
Siatka kilkuset wypełnionych, czarnych ikon z zaokrąglonymi zakończeniami: lokalizacja, ustawienia, dokumenty, foldery, strzałki, sklep, koszyk, kalendarz, poczta, oko, dzwonek, użytkownicy, suwaki i inne.
Ikona aplikacji i favicon
Uproszczona wersja identyfikacji na potrzeby aplikacji mobilnej, ekranu logowania i favicon. PDF pokazuje biały sygnet na brzoskwiniowym kafelku i na ciemnym kafelku, w rozmiarach 100, 48, 32 i 16 px, oraz warianty w kole i z delikatnym gradientem.
Stan repo witryny (refindi-concierge-web):
public/favicon.svg,public/favicon.ico,public/favicon.png(512 px),public/favicon-96x96.png,public/apple-touch-icon.png(180 px),public/manifest.webmanifestz ikonamipublic/icons/refindi-lf-32.png,-180,-192,-512,-512-maskable,-1024orazrefindi-lf-light-512.png,- wdrożone pliki pokazują brzoskwiniowy sygnet bez kafelka — inaczej niż PDF (zob. otwarte kwestie).
- Musi
Ikona musi pozostać czytelna w rozmiarach 100, 48, 32 i 16 px — w najmniejszych rozmiarach sygnet wypełnia kafel bez dodatkowych elementów.
- Musi
Do favicon i ikon PWA używaj plików wdrożonych w repo witryny (favicon.svg, favicon.ico, apple-touch-icon.png, ikony manifestu), nie eksportów z PDF.
- PowinnoDo weryfikacji
Ikona aplikacji i favicon to uproszczona wersja identyfikacji: biały sygnet na brzoskwiniowym kafelku z zaokrąglonymi rogami lub na ciemnym kafelku; stosowana w aplikacji mobilnej (iOS, Android), jako favicon strony i paneli oraz w nagłówkach i miniaturach e-maili systemowych.
2.4.d
Ikona aplikacji i favicon
Wdrożone pliki pokazują brzoskwiniowy sygnet bez kafelka, wyśrodkowany na polu 512 × 512 z marginesem ok. 13% po bokach. PDF pokazuje biały sygnet na kafelku — to otwarta kwestia.
Maska iOS to ilustracja: system nakłada ją sam, a plik pozostaje kwadratowy.
Wdrożone pliki w rzeczywistej skali (px CSS)
Refindi- PrzykładDo weryfikacji
Ikona aplikacji i favicon
Biały sygnet na brzoskwiniowym kwadracie z zaokrąglonymi rogami w rozmiarach 100, 48, 32 i 16 px; ten sam zestaw na ciemnym granatowo-czarnym kafelku. Niżej na ciemnym tle wariant w kole i wariant kafelka z delikatnym gradientem.
Gwiazdka Refindi
Autorski znak pomocniczy marki. Powstał z połączenia dwóch strzałek z logotypu — nawiązuje do odzyskiwania przedmiotów i obiegu informacji. Inspiracją była też gwiazdka Michelin jako symbol jakości: znak odnosi się do wysokiego standardu obsługi, szybkości i prestiżu.
Forma: sześcioramienna gwiazdka o grubych ramionach z zaokrąglonymi końcami, w kolorze brzoskwiniowym (na jasnym tle) lub w szarości (w wersjach monochromatycznych). W claimie występuje zawsze rząd pięciu gwiazdek.
Rząd pięciu jednakowych, brzoskwiniowych gwiazdek stoi nad claimem, wyrównany do jego lewej krawędzi (PDF s. 12). W dużej skali ten sam motyw służy jako infografika procesu: każda gwiazdka to jeden krok, a opisy łączą cienkie pionowe linie (s. 11; zob. Hasła i copy). Gwiazdek nie zastępujemy gwiazdkami emoji ani nie zmieniamy ich liczby.
- Musi
Przy claimie o pięciogwiazdkowej obsłudze używaj zawsze pięciu gwiazdek Refindi w jednym rzędzie, w jednym kolorze; nie zastępuj ich typograficznymi gwiazdkami ani klasycznymi gwiazdami pięcioramiennymi.
- Nie wolno
Gwiazdka Refindi jest znakiem pomocniczym — nigdy nie używaj jej jako samodzielnego logo; może towarzyszyć logotypowi lub ikonie aplikacji.
- Nie wolno
Nie przerysowuj gwiazdki — korzystaj z pliku źródłowego; konstrukcja wynika z dwóch strzałek logotypu.
- Można
Stosuj gwiazdkę jako znak jakości w komunikacji B2B i prezentacjach, jako ozdobnik przy claimie lub na opakowaniach oraz jako detal systemu (dymki, inserty, ikony).
- Przykład
Gwiazdka Refindi — konstrukcja i użycie
U góry jasna klasyczna gwiazda (inspiracja), pod nią dwa elementy przypominające strzałki z logotypu, a pośrodku wynikowa sześcioramienna gwiazdka z zaokrąglonymi końcami ramion. Obok rząd pięciu gwiazdek. Niżej przykład: pięć gwiazdek nad hasłem „5-gwiazdkowa obsługa RZECZY znalezionych” i zdjęcie telefonu z dymkiem przykładowej opinii.
Systemowy dymek
Komponent wzorowany na komunikatach interfejsu i opiniach gości: biały dymek z ogonkiem, pięć gwiazdek, krótki claim i opcjonalnie logotyp. Ujednolica sposób mówienia o jakości obsługi w reklamie i layoutach informacyjnych (landing page, banery, inserty, intro prezentacji).
Warianty w PDF:
- sam claim — polski lub angielski, duży stopień,
- claim z logo poziomym — claim po lewej, logo po prawej, dymek poziomy,
- wersja zwarta — claim po lewej, logo pionowe (sygnet nad napisem) po prawej.
- Nie wolno
Używaj dymka do ujednoliconego przedstawiania jakości obsługi; nie wpisuj w niego innych haseł ani zmyślonych opinii.
- Powinno
Systemowy dymek to biały prostokąt z zaokrąglonymi rogami i ogonkiem u dołu, zawierający pięć gwiazdek i claim („5-gwiazdkowa obsługa rzeczy znalezionych” lub „5-star service for found items”), opcjonalnie z logotypem.
- Przykład
Systemowy dymek z claimem
Białe dymki z ogonkiem na jasnoszarym tle. Po lewej dwa duże dymki z samym claimem (polski i angielski). Po prawej trzy dymki z claimem i logo: dwa poziome (claim po lewej, logo po prawej) i jeden zwarty z logo pionowym. Wszystko w odcieniach szarości.
Załączniki
Pod każdym przyciskiem pobierania — zasady użycia pliku w Markdown.
Kontur sygnetu — tło hero
kontur · dekoracja tła
SVG · 2 KB · 1276×751 · v2026.1
Duży, liniowy obrys sygnetu (stroke
Favicon — SVG
favicon · 512 × 512 · wektor
SVG · 1 KB · 512×512 · v2026.1
Ikona karty przeglądarki z sygnetem Refindi.
Ikona aplikacji — 512 px
ikona aplikacji · 512 px · PNG
PNG · 13 KB · 512×512 · v2026.1
Ikona aplikacji / PWA z sygnetem Refindi.
Ikona aplikacji — jasna, 512 px
ikona aplikacji · jasna · 512 px · PNG
PNG · 12 KB · 512×512 · v2026.1
Jasny wariant ikony aplikacji.
Apple touch icon
iOS · PNG
PNG · 4 KB · 180×180 · v2026.1
Ikona dla iOS (ekran główny).
Do rozstrzygnięcia (10) — rejestr redakcyjny, nie norma
- PDF (s. 128) pokazuje biały sygnet na brzoskwiniowym lub ciemnym kafelku. W repo witryny favicon.svg, favicon.png, apple-touch-icon.png i ikony manifestu (public/icons/refindi-lf-*.png) to brzoskwiniowy sygnet (#FF9E6D w favicon.svg) na przezroczystym lub białym tle, bez kafelka. Trzeba zdecydować, który wariant jest kanoniczny. (PDF s. 128)
- Ciemny kafel ikony w PDF ma starą barwę granatowo-czarną; obecny token ciemnych paneli to #00111F — do ujednolicenia. (PDF s. 128)
- Zielony stan „zatwierdzenia” w systemie ikon nie występuje w obecnej palecie witryny; brak wartości koloru. Do decyzji w temacie Kolory / Interfejsy. (PDF s. 123)
- Biblioteka z s. 124 to ikony wypełnione o nieznanym źródle i licencji; witryna używa lucide-react (konturowe). Potrzebna decyzja o jednej bibliotece i stylu. (PDF s. 124)
- Przykład na s. 123: „Nawet do 60 minut na każdym pozostawionym przedmiocie” — twierdzenie liczbowe wymaga potwierdzenia przed użyciem. (PDF s. 123)
- PDF wskazuje gwiazdkę Michelin jako inspirację. To kontekst projektowy; odwoływanie się do Michelin w komunikacji zewnętrznej wymaga oceny prawnej (znak towarowy). (PDF s. 126)
- Na s. 126 dymek z opinią gościa („Zostawiłem TELEFON w hotelu…”) i zdjęciem osoby wygląda na makietę. Nie publikować jako prawdziwej opinii bez źródła i zgody. (PDF s. 126)
- Brak w repo plików źródłowych: tekstur, mesh gradientów, gwiazdki Refindi, ikon statusowych i dymka. Potrzebne mastery wektorowe/rastrowe do content/assets.yaml. (PDF s. 120-130)
- Reguła „tylko warianty akceptowane w brandbooku” — PDF nie definiuje listy wariantów tekstur poza pokazanymi przykładami. (PDF s. 120-121)
- Kafelki ikon, ikona aplikacji i dymek mają w PDF zwykłe zaokrąglenia; obecny system witryny używa squircle (clip-path). Do ujednolicenia. (PDF s. 123, 128, 130)