--- id: identyfikacja-grafika-i-ikony title: "Grafika i ikony" section: identyfikacja language: pl version: "2026.1" status: approved updated_at: "2026-10-06" url: https://refindi-guidelines.pages.dev/pl/guidelines/identyfikacja/grafika-i-ikony markdown_url: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/grafika-i-ikony.md --- # 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. 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](https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/kompozycja.md#elementy-systemu). Obowiązujące reguły: - **[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. _Zakres: prezentacje, reklama, social media, druk, www._ `grafika-i-ikony-tla-01` (źródło: PDF s. 120) - **[NIE WOLNO]** Nie stosuj teksturowego tła pod tekst ciągły w małym stopniu pisma. _Zakres: wszystkie media._ `grafika-i-ikony-tla-02` (źródło: PDF s. 120) - **[POWINNO]** Używaj teł z umiarem — jako akcent, nie dominantę layoutu; tło nie może konkurować z treścią. _Zakres: wszystkie media._ `grafika-i-ikony-tla-03` (źródło: PDF s. 120) - **[NIE WOLNO]** Nie zmieniaj koloru tekstur ani gradientów poza zatwierdzonymi wariantami. _Zakres: wszystkie media._ `grafika-i-ikony-tla-04` (źródło: PDF s. 120) **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. ## 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](https://refindi-guidelines.pages.dev/guidelines/content/pl/marka/odpowiedzialnosc-i-eko.md#ikony-i-ilustracje) oraz [EkoFace](https://refindi-guidelines.pages.dev/guidelines/content/pl/marka/odpowiedzialnosc-i-eko.md#ekoface). Obecna sekcja eko na stronie używa ikon lucide (Leaf, Globe, Recycle) — rozbieżność opisano w tamtym temacie. Obowiązujące reguły: - **[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. _Zakres: interfejs, e-maile transakcyjne, materiały branżowe._ `grafika-i-ikony-ikony-01` (źródło: PDF s. 123) - **[NIE WOLNO]** Kolor kafelka ikony zawsze oznacza stan, nie dekorację — nie zmieniaj go dla urozmaicenia layoutu. _Zakres: interfejs, e-maile transakcyjne._ `grafika-i-ikony-ikony-03` (źródło: PDF s. 123) - **[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. _Zakres: wszystkie media._ `grafika-i-ikony-ikony-04` (źródło: PDF s. 124) **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.webmanifest` z ikonami `public/icons/refindi-lf-32.png`, `-180`, `-192`, `-512`, `-512-maskable`, `-1024` oraz `refindi-lf-light-512.png`, - wdrożone pliki pokazują brzoskwiniowy sygnet bez kafelka — inaczej niż PDF (zob. otwarte kwestie). Obowiązujące reguły: - **[MUSI]** Ikona musi pozostać czytelna w rozmiarach 100, 48, 32 i 16 px — w najmniejszych rozmiarach sygnet wypełnia kafel bez dodatkowych elementów. _Zakres: favicon, ikona aplikacji._ `grafika-i-ikony-appicon-02` (źródło: PDF s. 128) - **[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. _Zakres: www, PWA._ `grafika-i-ikony-appicon-03` (źródło: witryna (repo)) ## 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](https://refindi-guidelines.pages.dev/guidelines/content/pl/komunikacja/hasla-i-copy.md#dlaczego-dziala)). Gwiazdek nie zastępujemy gwiazdkami emoji ani nie zmieniamy ich liczby. Obowiązujące reguły: - **[NIE WOLNO]** Gwiazdka Refindi jest znakiem pomocniczym — nigdy nie używaj jej jako samodzielnego logo; może towarzyszyć logotypowi lub ikonie aplikacji. _Zakres: wszystkie media._ `grafika-i-ikony-gwiazdka-01` (źródło: PDF s. 126) - **[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). _Zakres: B2B, prezentacje, opakowania, druk._ `grafika-i-ikony-gwiazdka-02` (źródło: PDF s. 126) - **[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. _Zakres: claim, stopki, dymek systemowy._ `grafika-i-ikony-gwiazdka-03` (źródło: PDF s. 95, 105, 126, 130) - **[NIE WOLNO]** Nie przerysowuj gwiazdki — korzystaj z pliku źródłowego; konstrukcja wynika z dwóch strzałek logotypu. _Zakres: wszystkie media._ `grafika-i-ikony-gwiazdka-04` (źródło: PDF s. 126) **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. Obowiązujące reguły: - **[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. _Zakres: landing page, banery, inserty, intro prezentacji._ `grafika-i-ikony-dymek-01` (źródło: PDF s. 130) - **[NIE WOLNO]** Używaj dymka do ujednoliconego przedstawiania jakości obsługi; nie wpisuj w niego innych haseł ani zmyślonych opinii. _Zakres: reklama, layouty informacyjne._ `grafika-i-ikony-dymek-02` (źródło: PDF s. 130) **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. ## Pliki do pobrania - **Kontur sygnetu — tło hero** (kontur · dekoracja tła; image/svg+xml; 2 KB) — pobierz: https://refindi-guidelines.pages.dev/guidelines/assets/sygnet-kontur-hero/refindi-sygnet-outline.svg · zasady użycia: https://refindi-guidelines.pages.dev/guidelines/assets/sygnet-kontur-hero/usage.pl.md - **Favicon — SVG** (favicon · 512 × 512 · wektor; image/svg+xml; 1 KB) — pobierz: https://refindi-guidelines.pages.dev/guidelines/assets/favicon-svg/refindi-favicon.svg · zasady użycia: https://refindi-guidelines.pages.dev/guidelines/assets/favicon-svg/usage.pl.md - **Ikona aplikacji — 512 px** (ikona aplikacji · 512 px · PNG; image/png; 13 KB) — pobierz: https://refindi-guidelines.pages.dev/guidelines/assets/ikona-aplikacji-512/refindi-app-icon-512.png · zasady użycia: https://refindi-guidelines.pages.dev/guidelines/assets/ikona-aplikacji-512/usage.pl.md - **Ikona aplikacji — jasna, 512 px** (ikona aplikacji · jasna · 512 px · PNG; image/png; 12 KB) — pobierz: https://refindi-guidelines.pages.dev/guidelines/assets/ikona-aplikacji-jasna-512/refindi-app-icon-light-512.png · zasady użycia: https://refindi-guidelines.pages.dev/guidelines/assets/ikona-aplikacji-jasna-512/usage.pl.md - **Apple touch icon** (iOS · PNG; image/png; 4 KB) — pobierz: https://refindi-guidelines.pages.dev/guidelines/assets/apple-touch-icon/refindi-apple-touch-icon.png · zasady użycia: https://refindi-guidelines.pages.dev/guidelines/assets/apple-touch-icon/usage.pl.md ## Powiązane tematy - Logo: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/logo.md - Kolory: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/kolory.md - Interfejsy: https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/interfejsy.md - Kompozycja: https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/kompozycja.md - Hasła i copy: https://refindi-guidelines.pages.dev/guidelines/content/pl/komunikacja/hasla-i-copy.md - Wiadomości i microcopy: https://refindi-guidelines.pages.dev/guidelines/content/pl/komunikacja/wiadomosci-i-microcopy.md - Odpowiedzialność i eko: https://refindi-guidelines.pages.dev/guidelines/content/pl/marka/odpowiedzialnosc-i-eko.md ## Źródła i historia zmian - Brandbook PDF (06.06.2025), s. 118-121 — Tekstury i tła marki, mesh gradients - Brandbook PDF (06.06.2025), s. 122-124 — System ikon, biblioteka ikon funkcyjnych - Brandbook PDF (06.06.2025), s. 125-126 — Gwiazdka Refindi - Brandbook PDF (06.06.2025), s. 127-128 — Ikona aplikacji / favicon - Brandbook PDF (06.06.2025), s. 129-130 — Systemowy dymek z claimem - Wersja treści 2026.1, aktualizacja 2026-10-06. - 4 reguł(y) w statusie roboczym lub do przeglądu nie są częścią tego eksportu.