--- id: zastosowania-interfejsy title: "Interfejsy" section: zastosowania language: pl version: "2026.1" status: approved updated_at: "2026-10-06" url: https://refindi-guidelines.pages.dev/pl/guidelines/zastosowania/interfejsy markdown_url: https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/interfejsy.md --- # Interfejsy > Komponenty i zasady UI obecnej witryny Refindi — przyciski, powierzchnie squircle, przewijane rzędy, nawigacja, statusy i ruch. Żywe przykłady pochodzą z kodu witryny. Interfejsy Refindi są jasne, spokojne i miękkie w kształcie. Treść leży na białych powierzchniach z narożnikami squircle, akcje są wyraźne, a ruch krótki i sprężysty. Przykłady na tej stronie to te same komponenty, których używa witryna — z tymi samymi parametrami. ## Przyciski Przyciski są w pełni zaokrąglonymi pigułkami. Główny przycisk ma niebieskie tło #53BDF6 i białą etykietę, drugorzędny — tło #E9E8E6 i etykietę #3A3A3A. Etykieta jest krótka i ma formę wezwania do działania („Zarejestruj obiekt”, „Pobierz plik”). Na ciemnych panelach można użyć wariantu ciemnego (tło #00111F, jasna etykieta) — jako akcentu, nie zamiennika głównego CTA. Obowiązujące reguły: - **[MUSI]** Główne CTA: pigułka (rounded-full), tło #53BDF6, biała etykieta Satoshi 600 (renderowana jako 700), 14–15 px. Drugorzędne: tło #E9E8E6, etykieta #3A3A3A. _Zakres: witryna, aplikacja web._ `interfejsy-przyciski-01` (źródło: witryna (repo): Business.tsx) ## Powierzchnie i squircle Każda karta i panel ma narożniki squircle — superelipsę z pełnym wygładzeniem (odpowiednik 100% smoothing w Figmie). Kształt jest liczony na bieżąco dla rozmiaru elementu, więc karta zachowuje te same proporcje narożnika na każdym ekranie. Powierzchnie układają się warstwami: tło strony #F5F4F2 → biały panel → karty wewnętrzne. Panel z obrysem składa się z dwóch squircle: zewnętrznego w kolorze obrysu i wewnętrznego, mniejszego o grubość obrysu. | Element | Promień | |---|---| | Duży panel / banner | 90 px desktop, 40 px mobile | | Kafle procesu | 64 / 48 / 32 px | | Pasek wyszukiwania | 28 px | | Karta | 20 px | | Karta zagnieżdżona | 16 px | | Przycisk | pigułka | Obowiązujące reguły: - **[MUSI]** Karty, panele i bannery mają narożniki squircle (clip-path liczony dla aktualnego rozmiaru elementu, smoothing 1). Zwykły border-radius ani jedna sztywna ścieżka nie odtwarzają tego kształtu. _Zakres: witryna, aplikacja web._ `interfejsy-squircle-01` (źródło: witryna (repo): src/components/ui/squircle-box.tsx) - **[POWINNO]** Promień zależy od skali elementu: duże panele 90 px (desktop) / 40 px (mobile), kafle 32–64 px, karty 20 px, karty zagnieżdżone 16 px, przyciski — pełna pigułka. _Zakres: witryna._ `interfejsy-squircle-02` (źródło: witryna (repo): Business.tsx, NewB2C.tsx) - **[MUSI]** Obrys squircle buduj dwiema warstwami (zewnętrzna w kolorze obrysu #DEDEDE, wewnętrzna z promieniem pomniejszonym o grubość obrysu), a cień nakładaj na wrapper — clip-path ucina box-shadow. _Zakres: witryna._ `interfejsy-squircle-03` (źródło: witryna (repo): SquircleBordered, --shadow-block) - **[POWINNO]** Tło strony to ciepła szarość #F5F4F2, treść leży na białych powierzchniach. Ciemne panele #00111F są kontrolowanym akcentem, nie dominującym tłem. _Zakres: witryna._ `interfejsy-powierzchnie-01` (źródło: witryna (repo): src/index.css --section-bg / --section-bg-elevated) ## Przewijane rzędy Rzędy kart na telefonie przewijają się poziomo z przyciąganiem do kart (scroll-snap) i ukrytym paskiem przewijania. Strzałki obok rzędu przewijają o jedną kartę i działają z klawiatury. Cała strona przewija się normalnie — nie zamykamy treści w niskich, wewnętrznych obszarach przewijania. Obowiązujące reguły: - **[POWINNO]** Przewijane poziomo rzędy kart używają scroll-snap i ukrytego paska przewijania, a obok mają kontrolki strzałek dostępne z klawiatury. _Zakres: witryna._ `interfejsy-rzedy-01` (źródło: witryna (repo): ProcessStepsCarousel.tsx, HeroSegmentsCarousel.tsx) ## Nawigacja Nawigacja witryny: jasne tło, logo po lewej, linki pośrodku i jedno wyróżnione CTA po prawej. Belki z pigułkami (jak główna belka tych Guidelines) mają tło #E9E8E6 i białą, sprężyście przesuwaną pigułkę aktywnej pozycji (sprężyna 380 / 22 / 0.8). Obowiązujące reguły: - **[POWINNO]** Pasek nawigacji ma jasne tło, logo po lewej i jedno wyróżnione CTA po prawej. _Zakres: witryna._ `interfejsy-nawigacja-01` (źródło: PDF s. 137; witryna (repo): SiteHeader.tsx) - **[MUSI]** Aktywna pozycja w belkach i paskach przewijanych poziomo zawsze pozostaje widoczna w kadrze. _Zakres: witryna, aplikacja web._ `interfejsy-nawigacja-02` (źródło: brief Guidelines 2026-10-06) ## Statusy Status przedmiotu lub zgłoszenia to mała pigułka z jasnym tłem i ciemniejszym tekstem z tej samej rodziny barw, zawsze z etykietą słowną. Obowiązujące reguły: - **[MUSI]** Statusy przedmiotów i zgłoszeń pokazuj jako pigułki z tłem i tekstem w parze jednego koloru oraz słowną etykietą — kolor nigdy nie jest jedynym nośnikiem informacji. _Zakres: witryna, aplikacja web._ `interfejsy-statusy-01` (źródło: witryna (repo): ItemCard w NewB2C.tsx) ## Ruch Ruch jest krótki, sprężysty i reaguje na intencję użytkownika: najechanie lekko powiększa element, wciśnięcie go zmniejsza. Etykieta przycisku „przewija się” w górę przy najechaniu. Przy włączonym ograniczeniu ruchu w systemie elementy zmieniają stan natychmiast. | Element | Parametry | |---|---| | Przycisk | sprężyna 500 / 14, hover 1.04, wciśnięcie 0.95 | | Etykieta przycisku | 0,5 s, cubic-bezier(0.76, 0, 0.24, 1) | | Przycisk strzałki | sprężyna 500 / 14, hover 1.08, wciśnięcie 0.86 | | Pasek wyszukiwania | hover 380 / 20 / 0.85 (1.025), wciśnięcie 600 / 30 / 0.7 (0.99) | | Wskaźnik aktywnej pozycji | 380 / 22 / 0.8 | | Karta segmentu | 260 / 18 / 0.9, hover 1.06 | Obowiązujące reguły: - **[POWINNO]** Ruch przycisków: sprężyna stiffness 500 / damping 14, hover 1.04, wciśnięcie 0.95; etykieta wyjeżdża w górę w 0,5 s z krzywą cubic-bezier(0.76, 0, 0.24, 1). _Zakres: witryna, aplikacja web._ `interfejsy-ruch-01` (źródło: witryna (repo): Business.tsx) - **[MUSI]** Przy prefers-reduced-motion wyłącz skalowanie, przesuwanie etykiet i paralaksę. Treść, nawigacja i pobieranie muszą działać bez animacji. _Zakres: witryna, aplikacja web._ `interfejsy-ruch-02` (źródło: witryna (repo): globalny wyłącznik w src/index.css; brief Guidelines 2026-10-06) ## Haptyka Przyciski Refindi odpowiadają nie tylko ruchem, ale i dotykiem. Safari i Chrome na iOS nie udostępniają Vibration API, dlatego witryna używa „hacku haptycznego”: natywny przełącznik iOS (``) przy każdym przestawieniu wywołuje systemową haptykę. Komponent `` chowa taki przełącznik w przezroczystej etykiecie nałożonej na przycisk — palec trafia w etykietę, przełącznik daje „klik” Taptic Engine, a etykieta przekazuje kliknięcie do prawdziwego przycisku. Kolejność zdarzeń po dotknięciu na iPhonie: 1. Dotyk trafia w przezroczystą etykietę (warstwa nad przyciskiem, z tym samym zaokrągleniem). 2. Etykieta od razu przekazuje `pointerdown` do przycisku — działa sprężyna wciśnięcia (`whileTap`). 3. Po puszczeniu palca etykieta dostaje `click` i wywołuje `click()` na przycisku (pole tekstowe dostaje fokus bez przewijania); przycisk wyłączony nie reaguje. 4. Domyślna akcja etykiety przestawia ukryty przełącznik — iOS odtwarza systemowy „klik”. Kroki 3 i 4 dzieją się w jednym zdarzeniu, więc akcja i haptyka są odczuwane jednocześnie. Na Androidzie zamiast etykiety działa `navigator.vibrate(10)` — jeden krótki impuls przy kliknięciu. Na desktopie i z klawiatury nic się nie zmienia: etykieta nie jest renderowana, a przycisk działa normalnie. | Platforma | Mechanizm | Odczucie | |---|---|---| | iOS (Safari, Chrome) | ukryty przełącznik `switch` pod etykietą | systemowy „klik” | | Android | `navigator.vibrate(10)` | krótka wibracja 10 ms | | Desktop, klawiatura | brak | bez zmian | **Gdzie działa.** `` powstał 3 października 2026 (commit 3c98123e; tego samego dnia dodano przekazywanie `pointerdown` dla sprężyny — 5947087e). Od 3 października owija główne CTA strony dla biznesu, karty segmentów w hero, strzałki karuzeli segmentów, kafle ról, kroki procesu i startu oraz plany cenowe. Od 5 października (c8bca4aa) obejmuje też menu mobilne, przełącznik języka i pola tekstowe. **Warstwa globalna.** Od 22 czerwca 2026 (64c68e48) witryna ma też drugi mechanizm: `src/lib/haptics.ts` z biblioteką `web-haptics`. Funkcja `installGlobalHaptics()`, ładowana leniwie w `App.tsx`, nasłuchuje `touchstart`, `pointerdown` i `click` na całym dokumencie i dla przycisków, linków, opcji, zakładek i pól formularzy odtwarza wzorzec `TAP_PATTERN` (40 ms) — jeden na gest, z de-duplikacją 120 ms. Listy rozwijane wyboru kraju mają własny, podwójny wzorzec `DROPDOWN_PATTERN` (30 ms, przerwa 60 ms, 40 ms) i atrybut `data-haptic-skip`, który wyłącza dla nich wzorzec globalny. Obowiązujące reguły: - **[MUSI]** Każdy główny element dotykowy — CTA, karty segmentów, kafle ról, strzałki karuzel, pozycje menu mobilnego — owijaj w komponent ``. Na iOS to jedyna droga do haptyki systemowej z poziomu WWW. _Zakres: witryna, aplikacja web._ `interfejsy-haptyka-01` (źródło: witryna (repo) origin/main@a99cae5: src/components/Haptic.tsx, Business.tsx, HeroSegmentCard.tsx, RolesCarousel.tsx, HeroSegmentsCarousel.tsx, SiteHeader.tsx) - **[MUSI]** Mechanizm `` na iOS: ukryty natywny `` w przezroczystej etykiecie (absolute inset-0, z-10, aria-hidden) nałożonej na przycisk. Etykieta przekazuje kliknięcie (click(), a dla pól tekstowych focus bez przewijania) oraz pointerdown do prawdziwego przycisku, żeby zadziałała sprężyna whileTap. _Zakres: witryna, aplikacja web._ `interfejsy-haptyka-02` (źródło: witryna (repo) origin/main@a99cae5: src/components/Haptic.tsx) - **[MUSI]** Android: jedno krótkie navigator.vibrate(10) w fazie capture kliknięcia. Desktop i obsługa z klawiatury pozostają bez zmian — bez etykiety, bez wibracji. _Zakres: witryna, aplikacja web._ `interfejsy-haptyka-03` (źródło: witryna (repo) origin/main@a99cae5: src/components/Haptic.tsx) - **[POWINNO]** Warstwa globalna (installGlobalHaptics, biblioteka web-haptics) daje jeden wzorzec TAP_PATTERN (40 ms) na gest dla przycisków, linków, opcji, zakładek i pól formularzy — z de-duplikacją 120 ms i pominięciem elementów disabled. _Zakres: witryna._ `interfejsy-haptyka-04` (źródło: witryna (repo) origin/main@a99cae5: src/lib/haptics.ts, src/App.tsx) - **[MUSI]** Wyzwalacz listy rozwijanej ma własny wzorzec DROPDOWN_PATTERN (30 ms, przerwa 60 ms, 40 ms) i atrybut data-haptic-skip, żeby warstwa globalna nie dodała drugiego impulsu. _Zakres: witryna._ `interfejsy-haptyka-05` (źródło: witryna (repo) origin/main@a99cae5: src/lib/haptics.ts, CountryDropdown.tsx, CountryCombobox.tsx) ## Układ Strony projektujemy modułowo, ze stałym rytmem sekcji, dla desktopu, tabletu i telefonu. Konkretne breakpointy pochodzą z kodu witryny (640 / 768 / 1024 / 1280 px oraz 940 i 1060 px dla nagłówka). Margines boczny: clamp(20 px, 5vw, 40 px). Obowiązujące reguły: - **[POWINNO]** Na desktopie dziel treść sekcji w proporcjach 8/4 lub 6/6; na telefonie stosuj jedną kolumnę i pionowy przepływ treści. _Zakres: witryna, aplikacja web._ `interfejsy-uklad-01` (źródło: PDF s. 133) - **[POWINNO]** Sekcja treści ma stałą kolejność: nadtytuł (wersaliki, brzoskwinia, tracking 0.2em), nagłówek, lead, tekst główny, link lub CTA. _Zakres: witryna._ `interfejsy-uklad-02` (źródło: PDF s. 137; witryna (repo): Business.tsx) ## Prezentacja produktu Refindi pokazujemy jako doświadczenie, które łączy technologię z realnym światem obiektu — nie jako samą aplikację. W deckach B2B, kampaniach i na stronie prezentacja ma prosto pokazać działanie, korzyści i jakość obsługi: telefon w dłoni, paczka, odbiór rzeczy, ciepłe naturalne światło, neutralne tło. Obowiązujące reguły: - **[MUSI]** W materiałach marketingowych i deckach pokazuj aktualny, rzeczywisty interfejs Refindi — realistyczne, dopracowane zrzuty, nie makiety z nieistniejącymi funkcjami. _Zakres: prezentacje B2B, kampanie, strona www._ `ui-prezentacja-01` (źródło: PDF s. 83) - **[POWINNO]** Prowadź odbiorcę przez produkt krok po kroku, scenariuszami z perspektywy właściciela rzeczy i obiektu (zgłoszenie → potwierdzenie → wysyłka). _Zakres: prezentacje, strona www, kampanie._ `ui-prezentacja-02` (źródło: PDF s. 83-84) **Przykład: Trzy kroki procesu — zdjęcia z witryny.** Trzy pionowe zdjęcia w kartach squircle: dłoń z telefonem i formularzem zgłoszenia Refindi, dłoń zamykająca paczkę z logo Refindi, osoba odbierająca paczkę. Neutralne, jasne tło, miękkie światło. Ilustracja: https://refindi-guidelines.pages.dev/guidelines/media/step-1-report.webp (witryna (repo): public/__l5e/…/step-1-report.jpg) **Przykład: Panel obiektu — aktualny interfejs.** Zrzut panelu koordynatora: boczna nawigacja z logo Refindi, lista szablonów wiadomości ze statusem „Active”. Pokazuje realny produkt w materiałach B2B. Ilustracja: https://refindi-guidelines.pages.dev/guidelines/media/dashboard.webp (witryna (repo): public/__l5e/…/refindi-dashboard.png) ## Historia Brandbook 2025 opierał witrynę na Bootstrap 5 (kontener 1110 px, gutter 30 px), kroju Kumbh Sans, przyciskach z promieniem 8–10 px i innych kolorach przycisków. Pokazywał też ekrany produktu z pastelowym gradientem i brzoskwiniowymi przyciskami pełnej szerokości. Wszystko to zastąpił obecny system witryny: React + Tailwind, Satoshi, pigułki i squircle. Obowiązujące reguły: - **[NIE WOLNO]** Ekrany z brandbooka 2025 (s. 84–89) są historyczne — nie używaj ich jako wzorca wyglądu ani jako zrzutów w nowych materiałach. _Zakres: wszystkie materiały._ `ui-prezentacja-04` (źródło: PDF s. 84-89; witryna (repo)) **Błędnie: Ekrany produktu z 2025 jako wzorzec.** Szablon telefonu i trzy ekrany z brandbooka 2025: start z logo i brzoskwiniowym przyciskiem, formularz z polami i niebieskim oraz brzoskwiniowym przyciskiem, ekran „Czy to Twój przedmiot?”. To wygląd historyczny — nie kopiuj go do nowych materiałów. ## Pliki do pobrania - **Tokeny UI — JSON** (JSON · obecny system digital; application/json; 9 KB) — pobierz: https://refindi-guidelines.pages.dev/guidelines/assets/tokeny-ui-json/tokens.json · zasady użycia: https://refindi-guidelines.pages.dev/guidelines/assets/tokeny-ui-json/usage.pl.md ## Powiązane tematy - Kompozycja: https://refindi-guidelines.pages.dev/guidelines/content/pl/zastosowania/kompozycja.md - Kolory: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/kolory.md - Typografia: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/typografia.md - Grafika i ikony: https://refindi-guidelines.pages.dev/guidelines/content/pl/identyfikacja/grafika-i-ikony.md - Wiadomości i microcopy: https://refindi-guidelines.pages.dev/guidelines/content/pl/komunikacja/wiadomosci-i-microcopy.md ## Źródła i historia zmian - repo optime-ai/refindi-concierge-web@e7d7db4 — Business.tsx, NewB2C.tsx, squircle-box.tsx, MagneticBar.tsx, HeroSegmentsCarousel.tsx, ProcessStepsCarousel.tsx - repo optime-ai/refindi-concierge-web@a99cae5 (origin/main) — Haptic.tsx, lib/haptics.ts — haptyka - Brandbook PDF (06.06.2025), s. 81-89 — System prezentacji produktu (ekrany historyczne) - Brandbook PDF (06.06.2025), s. 131-137 — Website, siatka, typografia, przyciski, nawigacja - Wersja treści 2026.1, aktualizacja 2026-10-06. - 7 reguł(y) w statusie roboczym lub do przeglądu nie są częścią tego eksportu.