Przejdź do treści

2026

Elementy, po których rozpoznajesz Refindi: logo, kolory, typografia, grafika, fotografia i kształt — z plikami do pobrania.

2.2 · Identyfikacja

Kolory

Paleta i role kolorów Refindi — brzoskwinia jako znak rozpoznawczy, błękit dla akcji, ciepłe neutralne powierzchnie i ciemne panele jako akcent — z wartościami z kodu witryny, zasadami gradientów i stanem specyfikacji druku.

Wersja 2026.1Aktualizacja 2026-10-06 Markdown

Paleta Refindi jest prosta: dużo ciepłej, jasnej powierzchni, brzoskwinia jako podpis marki, błękit tam, gdzie użytkownik ma coś zrobić, i ciemny granat jako mocny akcent. Kolory nadają ton — ciepło i gościnność brzoskwini, spokój i technologiczną precyzję błękitu, porządek i profesjonalizm ciemnego neutralnego. Wartości poniżej pochodzą z kodu witryny; stare tabele z brandbooka 2025 są tylko historią.

Paleta

Paleta ma cztery grupy: ciepłe neutralne powierzchnie (canvas, biel, jasna szarość) z ciemnym tekstem, brzoskwinię (z jasnym odcieniem do teł), błękit i ciemny granat. Obowiązujące wartości pochodzą z kodu witryny:

Kolor i funkcja Wartość w kodzie Gdzie w repo
Canvas (tło stron i sekcji) #F5F4F2 src/index.css: html, body, --section-bg, --navbar-bg
Powierzchnia podniesiona #FFFFFF --section-bg-elevated, karty
Nagłówki / tekst #151515 (nowe sekcje), #292929 (style bazowe h1–h3) src/components/business/*, src/index.css
Brzoskwinia — znak i akcent #FF9E6D (logo, akcent h1), #FF9F6B = token refindi-peach hsl(21 100% 71%), #FFAE84 (akcent hero /dla-biznesu) RefindiLogo.tsx, tailwind.config.ts, NewB2C.tsx, Business.tsx
Jasna brzoskwinia — tło akcentowe #FEF5F1 = refindi-peach-10 hsl(20 82% 97%) tailwind.config.ts
Błękit — CTA #53BDF6 NewB2C.tsx, Business.tsx, SiteHeader.tsx, CtaShowcase.tsx
Przycisk drugorzędny tło #E9E8E6, tekst #3A3A3A Business.tsx, HeroSegmentsCarousel.tsx
Ciemny panel / granat #00111F = refindi-ink hsl(207 100% 6%) PricingPlansSection.tsx, StartStepsShowcase.tsx, litery logo
Obramowania pól #DEDEDE pole wyszukiwania i karty w NewB2C.tsx
Refindi Guidelinesv2026.1

2.2.a

Paleta i role kolorów

Dużo ciepłej, jasnej powierzchni, brzoskwinia jako podpis marki, błękit tam, gdzie użytkownik ma coś zrobić, i granat jako mocny akcent. Kliknij pole, aby skopiować HEX.

Warianty i odcienie w kodzie

do ujednolicenia

Wartości: content/tokens.yaml (kod witryny e7d7db4). RGB przeliczone z HEX. CMYK i Pantone pominięte — brak zatwierdzonej specyfikacji druku.

Role kolorów

Każda grupa ma w systemie swoją funkcję:

  • Brzoskwinia buduje rozpoznawalność: sygnet, druga linia nagłówka hero, nadtytuły sekcji, ikony i numeracja kroków, jasne tła kart (refindi-peach-10).
  • Błękit oznacza działanie: zgłoś, zarejestruj, szukaj. Dzięki temu użytkownik od razu widzi, co kliknąć.
  • Ciepłe neutralne powierzchnie (#F5F4F2, biel, #E9E8E6) dają spokojne tło i oddzielają sekcje bez ramek.
  • Ciemne panele (#00111F) przełamują jasny rytm strony — pojedyncza karta lub sekcja z białym tekstem.

Powiązane zasady w innych tematach:

  • Kolor w tekście (warianty podstawowy, dodatkowy i specjalny, PDF s. 142–144) — Kompozycja. Nazwy „Refined Peach” i „Primary Blue” z PDF są historyczne.
  • Paleta eko (eco green #31A836, soft eco green #D1EBD2, pastel peach #FFE3D6) to tematyczne rozszerzenie tylko do treści o środowisku, recyklingu, pakowaniu i wysyłkach; nie zastępuje kolorów głównych — Odpowiedzialność i eko.
  • Color grading zdjęć — ciepły tint +5–10% w stronę miedziano-łososiowych tonów, powiązany z brzoskwiniowym akcentem — Fotografia.
  • Kolory stanów ikon (wyłączone, neutralne, w realizacji, zatwierdzone) — Grafika i ikony.
  • Powinno

    Brzoskwinia jest kolorem rozpoznawalności: sygnet, wyróżniony fragment nagłówka, nadtytuły, ikony i numeracja. Używaj jej jako akcentu, nie jako koloru dużych bloków tekstu.

  • Powinno

    Główne przyciski akcji (CTA) wypełniaj błękitem #53BDF6 z białą etykietą; w jednym widoku wyróżniaj tak jedną główną akcję.

  • Powinno

    Przyciski drugorzędne mają tło #E9E8E6 i tekst #3A3A3A.

  • Powinno

    Na sekcjach treści używaj tylko dwóch powierzchni: ciepłego neutralnego tła #F5F4F2 (canvas) i bieli #FFFFFF (powierzchnia podniesiona: karty, sekcje kontrastowe).

Pokaż wszystkie reguły (6)
  • Powinno

    Ciemny granat #00111F stosuj punktowo — jako panel lub karta wyróżniająca (np. plan premium, sekcja z krokami) z białym tekstem — a nie jako tło całych stron.

  • Powinno

    Nagłówki i tekst główny składaj w ciemnym neutralnym (#151515 na nowych stronach); tekst pomocniczy w stonowanym kolorze (token muted-foreground).

  • Poprawnie· wszyscy

    Hero na ciepłym tle

    Tło #F5F4F2, nagłówek w ciemnym neutralnym z drugą linią w brzoskwini, białe pole wyszukiwania z cienką szarą ramką i błękitnym przyciskiem akcji (#53BDF6). Brzoskwinia i błękit zajmują małą część powierzchni.

  • Poprawnie· wszyscy

    Para przycisków

    Obok siebie dwa zaokrąglone przyciski: główny błękitny (#53BDF6) z białą etykietą i drugorzędny jasnoszary (#E9E8E6) z ciemnoszarą etykietą (#3A3A3A).

  • Poprawnie· B2B

    Ciemny panel jako akcent

    Wśród jasnych kart jedna karta (plan premium) w granacie #00111F z białym tekstem i białym przyciskiem z granatową etykietą.

Proporcje

Dominuje jasna powierzchnia, kolory marki są akcentem. Brandbook 2025 opisywał to jako 60% koloru dominującego (tło, główne elementy), 30% drugorzędnego (brzoskwinia: akcenty, nagłówki, podkreślenia, przyciski) i 10% akcentowego (błękit: najważniejsze przyciski, detale). Obecna witryna używa brzoskwini oszczędniej — proporcja czeka na aktualizację.

  • PowinnoDo weryfikacji

    Kompozycję buduj na dominującej jasnej powierzchni; brzoskwinia i błękit zajmują mniejszą część jako akcenty. PDF podawał proporcję 60/30/10 (tło/brzoskwinia/błękit).

Refindi Guidelinesv2026.1

2.2.b

Proporcja użycia — orientacyjna

Kompozycja stoi na dominującej jasnej powierzchni, kolory marki są akcentem. Pasek pokazuje proporcję z brandbooka 2025; witryna używa brzoskwini oszczędniej, więc wartości czekają na aktualizację.

Gradienty

Przejście tonalne to wariant tła do mocnego wyróżnienia sekcji lub komunikatu kampanijnego. Logika z brandbooka pozostaje: poziomy przebieg od brzoskwini przez jej jasny odcień i jasny błękit do błękitu, bez udziału ciemnego granatu. Na takim tle logo jest w całości białe (zob. Logo).

W kodzie witryny nie ma gradientu brzoskwinia–błękit. Występują:

  • --gradient-brand: linear-gradient(90deg, hsl(19 75% 52%) 0%, hsl(27 74% 63%) 100%) (≈ #E06329 → #E69A5B) — klasy .text-gradient i .bg-gradient-brand, np. wyróżnione słowo w nagłówku kategorii na stronie głównej;
  • --gradient-hero: linear-gradient(180deg, hsl(30 18% 95%) 0%, hsl(0 0% 100%) 100%) — łagodne przejście tła;
  • subtelne pionowe przejścia tła, np. from-refindi-peach-10 to-white w starszych sekcjach.

Gradienty logo opisuje temat Logo — tam źródłem wartości jest plik wektorowy. Mesh gradienty łączące brzoskwinię z jasnym błękitem (tła, banery) opisuje Grafika i ikony.

  • Nie wolno

    Gradient marki łącz wyłącznie z barw palety (od brzoskwini do błękitu, 2–4 przystanki). Nie mieszaj ciemnego granatu z brzoskwinią w jednym gradiencie.

  • Unikaj

    Gradient marki rezerwuj dla sekcji hero, plakatów i komunikacji kampanijnej; nie stosuj go w małych komponentach UI.

Refindi Guidelinesv2026.1

2.2.d

Gradienty w kodzie i logika gradientu marki

W kodzie witryny działają trzy przejścia — żadne nie łączy brzoskwini z błękitem. Logika gradientu marki z brandbooka pozostaje regułą, ale jej przystanki w obecnej palecie nie są zdefiniowane.

Przykład .text-gradient

Nagłówek z wyróżnionym słowem

Logika gradientu marki (PDF s. 63)

przystanki do zdefiniowania

Poziomy przebieg, 2–4 przystanki, wyłącznie barwy palety; logo na takim tle w całości białe. Gradient marki tylko w hero, plakatach i kampaniach — nie w małych komponentach UI.

Nie wolno

Granat w jednym gradiencie z brzoskwinią.

Wartości gradientów: src/index.css (--gradient-brand, --gradient-hero) i tailwind (refindi-peach-10 = hsl(20 82% 97%)). HEX przeliczony z HSL.
  • Błędnie· wszyscy

    Gradient w drobnym elemencie UI

    Gradient brzoskwinia–błękit wypełniający małe przyciski, tagi lub ikony — gradient traci sens w małej skali i konkuruje z kolorem akcji.

  • Przykład· wszyscyDo weryfikacji

    Przejście tonalne — schemat z PDF

    Poziomy gradient od brzoskwini (lewo) przez jasną brzoskwinię i jasny błękit do błękitu (prawo), z białym logo pośrodku; przystanki 0/30/70/100%. Wartości HEX i Pantone na podglądzie są historyczne.

Dostępność

Najjaśniejsze kolory marki są jasne: biały tekst na błękicie CTA ma kontrast ok. 2,1:1, a brzoskwiniowy akcent na canvasie ok. 1,8:1. Nie wystarcza to do progów WCAG — dlatego brzoskwinia pracuje jako akcent w dużym, pogrubionym tekście i w grafice, a nie w drobnym tekście. Pełna lista zestawień czeka na decyzję w otwartych kwestiach.

  • MusiPropozycja

    Kontrast tekstu z tłem ma spełniać WCAG 2.1 AA: 4,5:1 dla tekstu, 3:1 dla dużego tekstu i elementów graficznych. Biały tekst na brzoskwini lub błękicie marki i brzoskwiniowy tekst na jasnym tle tego nie spełniają — sprawdzaj każde nowe zestawienie.

Refindi Guidelinesv2026.1

2.2.c

Macierz kontrastu

Każda komórka to tekst (wiersz) na tle (kolumna) z palety, ze współczynnikiem kontrastu liczonym na żywo wg WCAG 2.x. Kropka oznacza zestawienie używane w witrynie, obwódka — problematyczne. Wybierz komórkę, aby zobaczyć szczegóły.

Tekst zwykły: AA ≥ 4,5:1, AAA ≥ 7:1

Kontrast: wiersze — kolor tekstu, kolumny — kolor tła
Tekst ↓ · Tło →Canvas#F5F4F2Biel#FFFFFFDrugorzędny#E9E8E6Brzoskwinia#FF9E6DBłękit#53BDF6Granat#00111F
Nagłówki#151515
Tekst#3A3A3A
Tekst kart#0F2B33
Biel#FFFFFF—
Tekst na ciemnym#F5F2F0
Brzoskwinia#FF9E6D—
Akcent H1#FFAE84
Błękit#53BDF6—
Zgłoś zgubęTekst 14 px w tym zestawieniu — sprawdź, czy da się go wygodnie przeczytać.

Biel #FFFFFF na Błękit #53BDF6

2,10:1

  • AA tekst 4,5
  • AAA tekst 7,0
  • AA duży tekst 3,0
  • AAA duży tekst 4,5
  • Grafika / UI 3,0

W witrynie. Etykieta głównego CTA. Poniżej progów WCAG — decyzja: ciemniejszy wariant akcji, ciemna etykieta albo akceptacja wyjątku.

Wzór WCAG 2.x: (L1 + 0,05) / (L2 + 0,05), luminancja względna z sRGB. Wartości z content/tokens.yaml.

Tokeny w kodzie

tailwind.config.ts definiuje kolory marki (refindi-blue, refindi-blue-vivid, refindi-peach, refindi-ink, refindi-peach-10, refindi-green) oraz semantyczne (background, foreground, primary, secondary, muted, accent, border…) i powierzchnie sekcji (section, section-elevated). Część nowych komponentów wpisuje jednak HEX bezpośrednio (np. bg-[#53BDF6], text-[#151515]), a niektóre tokeny semantyczne mają inne wartości niż kolory faktycznie widoczne na stronie. Do czasu porządków źródłem prawdy dla wyglądu jest tabela w sekcji Paleta.

  • Powinno

    W kodzie używaj tokenów (np. bg-section, bg-section-elevated, refindi-peach, refindi-ink) zamiast wpisywać surowe wartości HEX.

Druk

Brandbook 2025 podawał Pantone i CMYK dla starej palety: PANTONE Black 6 C (granat), PANTONE 163 C i 162 C (brzoskwinie), PANTONE 277 C i 284 C (błękity). Wartości są niespójne między stronami i nie obejmują obecnego błękitu CTA. Do druku potrzebna jest nowa specyfikacja — do tego czasu każdy druk kolorowy wymaga akceptacji proofa.

  • Nie wolnoPropozycja

    Nie przeliczaj samodzielnie HEX na CMYK ani Pantone. Do druku używaj wyłącznie zatwierdzonej specyfikacji — obecne wartości z PDF wymagają weryfikacji.

Historia

Brandbook 2025 (s. 56–65) opisywał paletę: bazę z bieli écru i czerni, „Refindi Peach” (nazywaną też miedzią) jako kolor ciepła i gościnności, błękit jako akcent spokoju i technologii, „Neutral Ink” jako kolor porządku. Zawierał tabelę kolorów głównych z HEX/Pantone/CMYK, schemat przejścia tonalnego z przystankami 0/30/70/100% oraz skale 1–10 dla Peach, Neutral ink, Blue_primary i Green z ocenami kontrastu. Te wartości zastąpiła paleta z kodu witryny; znaczenie kolorów i logika gradientu zostały zachowane.

  • Nie wolno

    Nie traktuj tabel HEX, skal 1–10 ani ocen kontrastu z brandbooka 2025 (s. 61–65) jako obowiązujących wartości.

  • Przykład· wszyscyDo weryfikacji

    Paleta główna i proporcja — schemat z PDF

    Cztery karty z logo: granat (Black 6 C), brzoskwinia (163 C), jasna brzoskwinia (163 C 10%), błękit (284 C), a pod nimi pasek proporcji 60% / 30% / 10%. Wartości HEX/CMYK na podglądzie są historyczne.

Załączniki

Pod każdym przyciskiem pobierania — zasady użycia pliku w Markdown.

Tokeny UI — JSON

JSON · obecny system digital
JSON · 9 KB · v2026.1

Kolory, typografia, kształty (squircle), cienie, ruch i układ obecnej witryny Refindi, każda wartość ze ścieżką źródłową w kodzie.

Pobierz Zasady użycia — Markdown (.md)
Cały temat w Markdown (.md)Wszystkie pliki
Do rozstrzygnięcia (11) — rejestr redakcyjny, nie norma
  • Specyfikacja druku (Pantone/CMYK) pochodzi ze starej palety i jest wewnętrznie sprzeczna: PANTONE 163 C = #FF9E6E i CMYK 0/44/57/0 (s. 61) vs #FF9E6D i 0/39/57/0 (s. 63); PANTONE 284 C = #6AABE5 (s. 61) vs #6EB3FF (s. 63). Błękit CTA witryny (#53BDF6) nie ma odpowiednika drukowego. Potrzebna nowa, zweryfikowana specyfikacja. (PDF s. 61, 63)
  • Zestawienia z witryny nie spełniają WCAG AA: biały na #53BDF6 = 2,1:1, biały na #FF9E6D = 2,0:1, biały na #F99159 = 2,3:1, brzoskwinia #FF9E6D na #F5F4F2 = 1,8:1, #FFAE84 na #F5F4F2 = 1,6:1 (także poniżej 3:1 dla dużego tekstu). Decyzja marki/dostępności: ciemniejszy wariant akcji, ciemna etykieta albo akceptacja wyjątku. (PDF s. -)
  • W kodzie działa kilka odcieni brzoskwini: #FF9E6D (logo, akcent h1 strony głównej, przycisk cookies), #FF9F6B (token refindi-peach), #FFAE84 (akcent hero /dla-biznesu, ikony segmentów), #FF8B50 (ilustracje kroków), #F99159 (karta planu), a token semantyczny --primary = hsl(19 75% 52%) ≈ #E06329 (ring, bg-primary) i --gradient-brand od #E06329 do #E69A5B. Także public/favicon.svg używa #FF9E6D. Ustalić jeden kolor podstawowy i jawne warianty. (PDF s. -)
  • Błękit: CTA #53BDF6 wpisany bezpośrednio w komponentach, token refindi-blue = hsl(207 71% 66%) ≈ #6BAEE6 (starsze sekcje, portal), refindi-blue-vivid ≈ #55C4F7. Potrzebny token dla koloru CTA. (PDF s. 61)
  • Tokeny semantyczne w src/index.css nie odpowiadają wartościom używanym na nowych stronach (np. --background ≈ #F5F2F0 vs canvas #F5F4F2, --foreground ≈ #0F2B33 vs nagłówki #151515/#292929; --refindi-peach w CSS = hsl(19 75% 52%), a w tailwind.config.ts = hsl(21 100% 71%)). Nowe komponenty wpisują HEX bezpośrednio. (PDF s. -)
  • Mimo roli błękitu jako koloru akcji baner cookies i stan gościa w nagłówku mają przyciski brzoskwiniowe (#FF9E6D, bg-refindi-peach). Potwierdzić, czy to zamierzony wyjątek. (PDF s. -)
  • Proporcja 60/30/10 z PDF (30% brzoskwini) nie odpowiada obecnej witrynie, gdzie brzoskwinia jest drobnym akcentem. Do aktualizacji. (PDF s. 61)
  • Zieleń: w PDF skala „Green” bez opisu roli; w kodzie refindi-green #42B446 i --success hsl(145 60% 42%). Zdefiniować kolory stanów (sukces, błąd, ostrzeżenie). Stan „zatwierdzone” ikon statusowych (s. 123) też używa zieleni bez tokenu. (PDF s. 65, 123)
  • Strona 65 (skale Peach, Neutral ink, Blue_primary, Green 1–10) jest w eksporcie PDF szara i nieczytelna — wartości nie dają się odtworzyć. Nie migrowane. (PDF s. 65)
  • S. 76 każe składać hasło eko „w Neutral Ink” (#101820), a szablony social 2026-09-22 i wytyczne kampanii 2026-08-27 nadal używają #101820 / #FF9E6D / #FEF5F1 / #6AABE5 — innych niż tokeny witryny (#151515, #FFAE84/#FF9F6B, #53BDF6). Zdecydować, która paleta obowiązuje w materiałach kampanijnych i eko. (PDF s. 76)
  • Opis znaczenia kolorów odnosi się do „gościa” i „świata hotelarskiego” — zawężenie do hoteli, do aktualizacji. (PDF s. 58-59)

Powiązane tematy