--- id: identyfikacja-logo title: "Logo" section: identyfikacja language: pl version: "2026.1" status: approved updated_at: "2026-10-06" url: https://refindi-guidelines.pages.dev/pl/guidelines/identyfikacja/logo markdown_url: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/logo.md --- # Logo > Znak Refindi: sygnet i logotyp, warianty, claim, współbranding, pole ochronne, minimalne rozmiary, położenie, tła i niedozwolone modyfikacje. Korzystaj zawsze, gdy umieszczasz logo w dowolnym medium. Logo Refindi składa się z sygnetu — dwóch połączonych pętli ze strzałką — i logotypu „refindi”. Znak zawsze pochodzi z pliku wektorowego: nie przerysowujemy go, nie składamy z fontu i nie zmieniamy proporcji. Ten temat opisuje, który wariant wybrać, jak chronić logo w layoucie (pole ochronne, minimalne rozmiary, tła, umiejscowienie) oraz jak zestawiać je z claimem i markami partnerów. ## Warianty | Wariant | Kiedy | Kolory | |---|---|---| | Poziomy (podstawowy) | większość materiałów, ok. 80% użyć | sygnet brzoskwiniowy, logotyp ciemny lub biały | | Pionowy | pola zbliżone do kwadratu lub bardzo wąskie | jak wyżej | | Mono czarny / mono biały | druk jednobarwny, tła, na których kolor nie działa | jeden kolor dla całego znaku | | Gradient tylko w sygnecie | małe ikony, gdy chcemy „żywego” akcentu | sygnet z przejściem brzoskwini, logotyp jednobarwny | | Gradient na całym logo | duże formaty, druk premium | przejście tonalne na sygnecie i logotypie | Na witrynie logo jest renderowane w kodzie jako SVG: sygnet `#FF9E6D`, litery `#00111F` (`src/components/logo/RefindiLogo.tsx`). Starszy komponent `src/components/RefnidiLogo.tsx` ma warianty `default`, `white`, `mono` (`#101820`) i `peachWhite` (brzoskwiniowy sygnet, białe litery). Witryna nie używa wariantów gradientowych. W komunikacji ekologicznej obowiązuje wyłącznie monochromatyczne logo (czarne lub ciemnoszare), bez kolorowych gradientów marki, a motywu „re.” nie łączymy z logo w jeden znak — zasady i uzasadnienie: [Odpowiedzialność i eko](https://refindi-guidelines.pages.dev/guidelines/content/pl/marka/odpowiedzialnosc-i-eko.md#logo-eko). Obowiązujące reguły: - **[POWINNO]** Domyślnie stosuj logo poziome: sygnet po lewej, logotyp „refindi” po prawej. To standard dla około 80% zastosowań. _Zakres: wszystkie media._ `logo-variant-01` (źródło: PDF s. 29, 31) - **[POWINNO]** Logo pionowe (sygnet nad logotypem) stosuj, gdy pole jest zbliżone do kwadratu lub bardzo wąskie: awatary i ikony 1:1 z pełną nazwą, komponenty UI węższe niż 160 px, wąskie kolumny, stopki e-maili, menu mobilne. _Zakres: wszystkie media._ `logo-variant-02` (źródło: PDF s. 31) - **[NIE WOLNO]** W jednym layoucie używaj jednej wersji kolorystycznej logo — nie zestawiaj wersji jednobarwnej i gradientowej w tym samym polu widzenia. _Zakres: wszystkie media._ `logo-variant-03` (źródło: PDF s. 31) - **[POWINNO]** Wersja kolorowa logo to brzoskwiniowy sygnet i ciemny logotyp na jasnym tle albo brzoskwiniowy sygnet i biały logotyp na ciemnym tle. _Zakres: wszystkie media._ `logo-variant-04` (źródło: PDF s. 29, 45; witryna (repo)) - **[NIE WOLNO]** Gradient w logo jest wyłącznie liniowy, poziomy (0°, od lewej do prawej), rozciągnięty na cały sygnet lub całe logo, bez widocznego bandingu. Nigdy nie stosuj gradientu radialnego ani ukośnego. _Zakres: wersje gradientowe logo._ `logo-variant-06` (źródło: PDF s. 40) - **[MUSI]** Używaj wyłącznie gotowych plików wektorowych logo. Nie składaj logo z fontu, nie przerysowuj go i nie odtwarzaj gradientu ręcznie — wartości kolorów wykonuje się z pliku wektorowego. _Zakres: wszystkie media._ `logo-file-01` (źródło: PDF s. 40) **Przykład: Logo poziome — wersja podstawowa.** Na białym tle: brzoskwiniowy sygnet (dwie połączone pętle ze strzałką w prawej) i ciemnogranatowy logotyp „refindi”. Poniżej ta sama wersja na ciemnym panelu: sygnet brzoskwiniowy, logotyp biały. **Przykład: Logo pionowe.** Sygnet wyśrodkowany nad logotypem. Trzy kwadratowe warianty: ciemny znak na białym, brzoskwiniowy sygnet z białym logotypem na granacie, całość biała na granacie. ## Sygnet Sygnet łączy cztery motywy: 1. **Symbol nieskończoności** — dwa połączone koła: ciągły proces odzyskiwania i zwrotu, relacja między właścicielem rzeczy a miejscem, w którym ją zostawił. 2. **Pin lokalizacyjny** — w układzie pionowym znak przypomina znacznik na mapie: wiemy, gdzie jest przedmiot. 3. **Oko szukające przedmiotu** — prawa pętla z „źrenicą” (gwiazdką) patrzy w lewo i w prawo: czujność systemu. 4. **Strzałka** — ruch do celu, szybkość i kierunek; graficzny „drogowskaz” całej identyfikacji. PDF pokazuje też sekwencję morficzną sygnetu (kolejne stany pętli, strzałki i gwiazdki) — to materiał ilustracyjny i animacyjny. Logo na witrynie jest animowane w kodzie (`logoMotion.ts`), ale każda klatka spoczynkowa to niezmieniony znak. Obowiązujące reguły: - **[MOŻNA]** Sygnet może występować samodzielnie (np. awatar, ikona aplikacji, favicon) — zachowuje wtedy czytelność i znaczenie. _Zakres: wszystkie media._ `logo-signet-01` (źródło: PDF s. 34, 43) - **[NIE WOLNO]** Nie zmieniaj konstrukcji sygnetu: dwóch połączonych kół, kształtu pinu i strzałki w prawej pętli. _Zakres: wszystkie media._ `logo-signet-02` (źródło: PDF s. 34, 46) **Przykład: Konstrukcja i znaczenie sygnetu.** Duży sygnet oraz rozbiór na motywy: symbol nieskończoności, oko szukające celu (gwiazdka i strzałki), pin lokalizacyjny; u dołu sekwencja morficzna sygnetu. ## Typografia logotypu Logotyp narysowano na bazie kroju **Mazzard H Semibold**. Zaokrąglone narożniki i zamknięte światła liter nawiązują do pętli sygnetu. Font nie jest dystrybuowany ani używany w żadnym tekście — jeśli potrzebujesz logo, bierzesz plik, a nie font. Krój tekstów opisuje temat *Typografia*. Obowiązujące reguły: - **[NIE WOLNO]** Mazzard H Semibold służy wyłącznie do logotypu — nie używaj go w nagłówkach, tekście ani interfejsie. _Zakres: wszystkie media._ `logo-type-01` (źródło: PDF s. 40) - **[NIE WOLNO]** Nie zmieniaj kerningu ani światła międzyliterowego logotypu (tracking 0 em). _Zakres: wszystkie media._ `logo-type-02` (źródło: PDF s. 40) ## Pole ochronne Wokół znaku obowiązuje wolna przestrzeń o szerokości modułu **1x** z każdej strony — w poziomie i w pionie, dla wersji poziomej i pionowej. Pole chroni czytelność w gęstych layoutach, na slajdach, w social mediach i stopkach systemowych. Wartość modułu x nie została w PDF jednoznacznie zdefiniowana (zob. otwarte kwestie). Obowiązujące reguły: - **[NIE WOLNO]** Siatka konstrukcyjna i oznaczenia pola ochronnego służą tylko do projektowania — nie pokazuj ich w gotowych materiałach. _Zakres: wszystkie media._ `logo-clearspace-02` (źródło: PDF s. 42) **Przykład: Pole ochronne.** Logo poziome i pionowe na siatce: z każdej strony moduł 1x, także między sygnetem a logotypem. Siatka jest tylko pomocą konstrukcyjną. ## Minimalne rozmiary | Medium | Logo z sygnetem (poziome) | Sam sygnet | |---|---|---| | Ekran | 120 px szerokości | 40 px | | Druk | 25 mm lub 35 mm — do potwierdzenia | 8 mm | Minimum dotyczy szerokości całego znaku (sygnet + logotyp). Poniżej tych wartości logo traci czytelność. Obowiązujące reguły: - **[MUSI]** Na ekranie logo z sygnetem ma co najmniej 120 px szerokości, a sam sygnet — co najmniej 40 px. _Zakres: digital._ `logo-minsize-01` (źródło: PDF s. 29, 43) - **[MUSI]** W druku sam sygnet ma co najmniej 8 mm szerokości. _Zakres: druk._ `logo-minsize-03` (źródło: PDF s. 43) **Przykład: Wersja optymalna i minimalna.** Logo w rozmiarze optymalnym i w minimalnej szerokości ekranowej 120 px. ## Tła | Tło | Wersja logo | |---|---| | Jasne (biel, ciepły neutralny) | kolorowa (brzoskwiniowy sygnet + ciemny logotyp), wersja gradientowa lub mono czarna | | Ciemne (granat) | brzoskwiniowy sygnet + biały logotyp, wersja gradientowa lub mono biała | | Gradient marki lub zdjęcie | całe logo białe | Na witrynie komponent logo sam dobiera ton do tła, nad którym się znajduje (`src/components/logo/logoMotion.ts`, funkcja `pickTone`): zostaje przy brzoskwini, jeśli sygnet wyraźnie odcina się od tła, a w przeciwnym razie wybiera granat albo biel — w zależności od wyższego kontrastu (próg 3:1 dla grafiki). Obowiązujące reguły: - **[POWINNO]** Na jasnym tle stosuj wersję kolorową (brzoskwiniowy sygnet, ciemny logotyp) albo wersję mono czarną. _Zakres: wszystkie media._ `logo-bg-01` (źródło: PDF s. 45) - **[POWINNO]** Na ciemnym tle stosuj brzoskwiniowy sygnet z białym logotypem, wersję mono białą albo wersję gradientową. _Zakres: wszystkie media._ `logo-bg-02` (źródło: PDF s. 45) - **[MUSI]** Na tle gradientowym lub na zdjęciu logo jest w całości białe. _Zakres: wszystkie media._ `logo-bg-03` (źródło: PDF s. 45) - **[POWINNO]** Jeśli brzoskwiniowy sygnet zlewa się z tłem, przełącz logo na wersję ciemną (granat) albo białą — tę, która daje wyższy kontrast (co najmniej 3:1 dla grafiki). _Zakres: digital._ `logo-bg-04` (źródło: witryna (repo)) **Poprawnie: Logo na różnych tłach.** Poprawne zestawienia: granatowe tło z białym logotypem; granatowe tło z wersją gradientową; białe logo na gradiencie brzoskwinia–błękit i na zdjęciu; jasne tło z ciemnym logotypem lub wersją gradientową; mono czarne na jasnym i mono białe na granacie. Szary sygnet na części podglądów to zastępczy kolor ilustracji — w realizacji sygnet jest brzoskwiniowy. ## Umiejscowienie - **Lewy róg (górny lub dolny)** — pozycja formalna i domyślna: daje znakowi pierwszeństwo i stabilizuje kompozycję. - **Prawy róg** — w materiałach komunikacyjnych logo działa jak podpis zamykający narrację, równoważąc tekst po lewej. - **Środek** — w materiałach prestiżowych logo pełni rolę pieczęci: certyfikaty, ekrany startowe i końcowe. W każdym położeniu obowiązuje pole ochronne. Siatki i marginesy layoutu opisuje temat *Kompozycja*. Obowiązujące reguły: - **[POWINNO]** Domyślne, formalne położenie logo to lewy górny (lub lewy dolny) róg layoutu — strona www, dokumenty, social media, slajdy otwierające. _Zakres: wszystkie media._ `logo-placement-01` (źródło: PDF s. 44) - **[MOŻNA]** W materiałach komunikacyjnych (prezentacje, plakaty, ulotki, banery, billboardy, social media) logo może stać w prawym rogu — najczęściej dolnym — jako podpis równoważący blok tekstu po lewej. _Zakres: materiały komunikacyjne._ `logo-placement-02` (źródło: PDF s. 44) - **[MOŻNA]** Logo wyśrodkowane stosuj w materiałach wyjątkowych, gdzie znak jest głównym elementem: certyfikaty, ekrany otwierające i zamykające, pełnoekranowe grafiki brandingowe. _Zakres: materiały wyjątkowe._ `logo-placement-03` (źródło: PDF s. 44) **Przykład: Trzy położenia logo.** Trzy pionowe formaty na jasnobrzoskwiniowym tle: logo w lewym górnym i dolnym rogu; logo po prawej równoważące krótki tekst po lewej (góra, środek, dół); logo wyśrodkowane. ## Claim i logo Główne hasło marki to „5-gwiazdkowa obsługa RZECZY znalezionych”, nad nim pięć brzoskwiniowych gwiazdek. - **Układ poziomy** (np. desktop ≥ 1280 px): gwiazdki i dwuwierszowy claim po lewej, logo po prawej. Między claimem a logo moduł 2x. - **Układ minimalny** (mała powierzchnia reklamowa): logo, a pod nim claim wersalikami w jednej linii, wyśrodkowany. Treść i ton hasła opisuje temat *Hasła i copy*. Obowiązujące reguły: - **[MUSI]** W układzie poziomym claim stoi po lewej, logo po prawej; wysokość logotypu odpowiada dwóm liniom tekstu hasła. Zachowuj tę proporcję. _Zakres: materiały promocyjne, B2B, systemowe._ `logo-claim-01` (źródło: PDF s. 36) - **[MOŻNA]** Słowo „RZECZY” w claimie możesz zastąpić innym, adekwatnym do kontekstu (np. „PRZEDMIOTÓW”, „ZGŁOSZEŃ”), zachowując podobną długość i styl typograficzny. _Zakres: claim marki._ `logo-claim-03` (źródło: PDF s. 36) - **[MOŻNA]** Claim może występować w wersji angielskiej („5-star service for found items”) lub w innym języku. _Zakres: claim marki._ `logo-claim-04` (źródło: PDF s. 36) - **[NIE WOLNO]** Nie zmieniaj koloru, układu graficznego, kroju pisma ani wyrównania lockupu claimu z logo. _Zakres: claim marki._ `logo-claim-05` (źródło: PDF s. 36) **Przykład: Claim z logo — układ poziomy i minimalny.** Układ poziomy: pięć brzoskwiniowych gwiazdek i dwuwierszowy claim po lewej, logo po prawej, z oznaczeniem 2x między nimi. Układ minimalny: claim wersalikami pod logo, wyśrodkowany. Uwaga: na ilustracji PDF logotyp jest obcięty do „refind” — to błąd podglądu, nie wzór. ## Współbranding Gdy Refindi występuje razem z marką partnera (np. obiektu, który korzysta z systemu), oba znaki stoją w jednej linii: partner po lewej, Refindi po prawej, pomiędzy nimi cienka pionowa kreska. Odstępy wyznacza sygnet Refindi. Żaden znak nie dominuje — wielkości wyrównuje się optycznie na siatce. Obowiązujące reguły: - **[MUSI]** Przy współwystępowaniu z marką partnera logo partnera stoi po lewej, logo Refindi po prawej, a oddziela je pionowa linia (divider). _Zakres: współbranding._ `logo-cobrand-01` (źródło: PDF s. 38) - **[MUSI]** Oba logotypy zachowują oryginalne proporcje; ich wielkość wyrównuj optycznie według siatki konstrukcyjnej, bez deformowania żadnego z nich. _Zakres: współbranding._ `logo-cobrand-03` (źródło: PDF s. 38) - **[MOŻNA]** Zestawienie możesz wykonać monochromatycznie (czarno-białe) lub w bieli na ciemnym tle — tylko w pełnym kontraście. _Zakres: współbranding._ `logo-cobrand-04` (źródło: PDF s. 38) ## Błędy Logo jest zamkniętą całością. Każda ingerencja — zmiana koloru, proporcji, układu, kąta czy efekty — osłabia rozpoznawalność. W razie wątpliwości użyj wersji podstawowej z pliku i zachowaj pole ochronne. Obowiązujące reguły: - **[NIE WOLNO]** Nie rozciągaj ani nie obracaj logo; nie dodawaj obrysu, cienia, poświaty (glow) ani efektów 3D. _Zakres: wszystkie media._ `logo-dont-01` (źródło: PDF s. 46) - **[NIE WOLNO]** Nie zmieniaj kolorów sygnetu ani liter logotypu poza zdefiniowanymi wariantami. _Zakres: wszystkie media._ `logo-dont-02` (źródło: PDF s. 46) - **[NIE WOLNO]** Nie zamieniaj elementów miejscami — w układzie poziomym sygnet nie stoi po prawej ani pod logotypem. _Zakres: wszystkie media._ `logo-dont-03` (źródło: PDF s. 46) - **[NIE WOLNO]** Nie używaj samego napisu „refindi” bez sygnetu. _Zakres: wszystkie media._ `logo-dont-04` (źródło: PDF s. 46) - **[NIE WOLNO]** Nie zmieniaj proporcji między elementami znaku, np. nie powiększaj samego sygnetu względem logotypu. _Zakres: wszystkie media._ `logo-dont-05` (źródło: PDF s. 46) **Błędnie: Niedozwolone modyfikacje.** Siedem błędów: sygnet po prawej stronie logotypu; sam napis bez sygnetu; powiększony sygnet; logo obrócone; logo rozciągnięte; sygnet z ciemnym obrysem; logo z cieniem. **Błędnie: Logotyp złożony z fontu.** Napis „refindi” wpisany fontem (Mazzard, Satoshi lub innym) i postawiony obok sygnetu zamiast pliku logo — inne kształty liter, odstępy i proporcje. ## Pliki do pobrania - **Logo poziome — kolor** (poziome · kolor · jasne tło; image/svg+xml; 4 KB) — pobierz: https://refindi-guidelines.pages.dev/guidelines/assets/logo-poziome-kolor/refindi-logo.svg · zasady użycia: https://refindi-guidelines.pages.dev/guidelines/assets/logo-poziome-kolor/usage.pl.md ## Powiązane tematy - Kolory: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/kolory.md - Typografia: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/typografia.md - Kompozycja: https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/kompozycja.md - Materiały firmowe: https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/materialy-firmowe.md - Hasła i copy: https://refindi-guidelines.pages.dev/guidelines/content/pl/komunikacja/hasla-i-copy.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. 27-32 — Wersja podstawowa, pionowa i warianty gradientowe - Brandbook PDF (06.06.2025), s. 33-34 — Sygnet — znaczenie i konstrukcja - Brandbook PDF (06.06.2025), s. 35-38 — Claim z logo, logo partnera - Brandbook PDF (06.06.2025), s. 39-40 — Font logotypu, specjalna wersja gradientowa - Brandbook PDF (06.06.2025), s. 41-46 — Pole ochronne, rozmiary, położenie, tła, błędy - refindi-concierge-web@e7d7db44 — src/components/logo/RefindiLogo.tsx, src/components/logo/logoMotion.ts, src/components/RefnidiLogo.tsx - Wersja treści 2026.1, aktualizacja 2026-10-06. - 5 reguł(y) w statusie roboczym lub do przeglądu nie są częścią tego eksportu.