open-design/design-systems/uber/DESIGN-pl.md

Design System Inspired by Uber

Category: Media & Konsument Platforma mobilności. Pogrubiona czerń i biel, zwięzła typografia, miejska energia.

1. Motyw wizualny i atmosfera

Język designu Uber to prawdziwy wzorzec pewnego minimalizmu — czarno-biały wszechświat, w którym każdy piksel służy konkretnemu celowi, a żaden element nie dekoruje bez uzasadnienia. Całe doświadczenie opiera się na wyrazistej dualności: głębokiej czerni (#000000) i czystej bieli (#ffffff), bez żadnych pośrednich szarości rozmywających przekaz. To nie jałowy minimalizm startupu, który nie skończył projektować — to świadoma powściągliwość marki tak ugruntowanej, że może sobie pozwolić na szept.

Charakterystyczny krój pisma, UberMove, to autorski geometryczny sans-serif o wyraźnie kwadratowym, inżynieryjnym charakterze. Nagłówki w UberMove Bold o rozmiarze 52px mają ciężar billboardu — autorytatywne, bezpośrednie, bezkompromisowe. Towarzyszący krój UberMoveText obsługuje treść główną i przyciski z nieco łagodniejszym, bardziej czytelnym charakterem przy średniej wadze (500). Razem tworzą system typograficzny przypominający mapę tranzytową: czytelny, efektywny, stworzony do szybkiego skanowania.

To, co czyni design Uber naprawdę wyjątkowym, to wykorzystanie pełnoekranowej fotografii i ilustracji w połączeniu z interaktywnymi elementami w kształcie pigułek (border-radius 999px). Chipy nawigacyjne, przyciski CTA i selektory kategorii — wszystkie mają ten kapsułkowy kształt, tworząc dotykowy, przyjazny dla kciuka język interfejsu, który jest niezaprzeczalnie Uber. Ilustracje — ciepłe, lekko stylizowane sceny kierowców, pasażerów i pejzaży miejskich — wprowadzają ludzkość do systemu, który mógłby być zimny i monochromatyczny. Strona alternuje między białymi sekcjami treści a całkowicie czarnym stopką, z kartami używającymi najdelikatniejszych możliwych cieni (rgba(0,0,0,0.12-0.16)) dla subtelnego uniesienia bez zburzenia płaskiej estetyki.

Kluczowe cechy charakterystyczne:

• Czysto czarno-biała podstawa bez pośrednich szarości w chromie interfejsu
• UberMove (nagłówki) + UberMoveText (treść/UI) — autorska rodzina geometrycznych sans-serif
• Kształt pigułki wszędzie: przyciski, chipy i elementy nawigacyjne używają border-radius 999px
• Ciepłe, ludzkie ilustracje kontrastujące z surowym monochromatycznym interfejsem
• Układ oparty na kartach z delikatnymi jak szelest cieniami (krycie 0.12-0.16)
• Siatka odstępów 8px z kompaktowymi, gęstymi informacyjnie układami
• Pogrubiona fotografia zintegrowana jako tła hero na pełną szerokość
• Czarna stopka zakotwiczająca stronę w ciemnym, wysokokonturowym środowisku

2. Paleta kolorów i ich role

Podstawowe

• Uber Black (#000000): Definiujący kolor marki — używany do podstawowych przycisków, nagłówków, tekstu nawigacji i stopki. Nie „prawie czarny" ani „ciemnoszary", lecz prawdziwa, bezkompromisowa czerń.
• Pure White (#ffffff): Podstawowy kolor powierzchni i tekstu odwróconego. Używany do teł stron, powierzchni kart i tekstu na czarnych elementach.

Stany interaktywne i przyciski

• Hover Gray (#e2e2e2): Stan hover białego przycisku — czysta, chłodna jasnoszara, zapewniająca wyraźną informację zwrotną bez ciepłego odcienia.
• Hover Light (#f3f3f3): Subtelny hover dla uniesionych białych przycisków — ledwo widoczna szara dla delikatnej informacji zwrotnej przy interakcji.
• Chip Gray (#efefef): Tło dla drugorzędnych przycisków filtrów i chipów nawigacyjnych — neutralna, ultra-jasna szara.

Tekst i treść

• Body Gray (#4b4b4b): Drugorzędny tekst i linki w stopce — czysta średnia szara bez ciepłych ani chłodnych odcieni.
• Muted Gray (#afafaf): Trzeciorzędny tekst, mniej wyeksponowane linki w stopce i zawartość zastępcza.

Obramowania i separacja

• Border Black (#000000): Cienkie obramowania 1px do strukturalnego zamknięcia — używane oszczędnie na separatorach i kontenerach formularzy.

Cienie i głębia

• Shadow Light (rgba(0, 0, 0, 0.12)): Standardowe uniesienie karty — nieważkie uniesienie dla kart z treścią.
• Shadow Medium (rgba(0, 0, 0, 0.16)): Nieco silniejsze uniesienie dla pływających przycisków akcji i nakładek.
• Button Press (rgba(0, 0, 0, 0.08)): Cień wewnętrzny dla aktywnych/wciśniętych stanów drugorzędnych przycisków.

Stany linków

• Default Link Blue (#0000ee): Standardowy niebieski przeglądarki dla linków tekstowych z podkreśleniem — używany w treści głównej.
• Link White (#ffffff): Linki na ciemnych powierzchniach — używane w stopce i ciemnych sekcjach.
• Link Black (#000000): Linki na jasnych powierzchniach z dekoracją podkreślenia.

System gradientów

• Design Uber jest całkowicie wolny od gradientów. Dualność czerni i bieli oraz płaskie bloki kolorów tworzą wszelką hierarchię wizualną. Żadne gradienty nie pojawiają się w systemie — każda powierzchnia ma jednolity kolor, każde przejście to ostre krawędź lub cień.

3. Zasady typografii

Rodzina czcionek

• Nagłówek / Display: UberMove, z zamiennikami: UberMoveText, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif
• Treść / UI: UberMoveText, z zamiennikami: system-ui, Helvetica Neue, Helvetica, Arial, sans-serif

Uwaga: UberMove i UberMoveText to autorskie kroje pisma. W zewnętrznych implementacjach używaj system-ui lub Inter jako najbliższego dostępnego zamiennika. Geometryczny, kwadratowy charakter UberMove można przybliżyć za pomocą Inter lub DM Sans.

Hierarchia

Rola	Czcionka	Rozmiar	Waga	Wysokość linii	Uwagi
Display / Hero	UberMove	52px (3.25rem)	700	1.23 (ciasna)	Maksymalny impact, obecność billboardu
Nagłówek sekcji	UberMove	36px (2.25rem)	700	1.22 (ciasna)	Kotwice głównych sekcji
Tytuł karty	UberMove	32px (2rem)	700	1.25 (ciasna)	Nagłówki kart i funkcji
Podnagłówek	UberMove	24px (1.5rem)	700	1.33	Drugorzędne nagłówki sekcji
Mały nagłówek	UberMove	20px (1.25rem)	700	1.40	Kompaktowe nagłówki, tytuły list
Nawigacja / UI duże	UberMoveText	18px (1.13rem)	500	1.33	Linki nawigacyjne, wyeksponowany tekst UI
Treść / Przycisk	UberMoveText	16px (1rem)	400-500	1.25-1.50	Standardowy tekst treści, etykiety przycisków
Podpis	UberMoveText	14px (0.88rem)	400-500	1.14-1.43	Metadane, opisy, małe linki
Micro	UberMoveText	12px (0.75rem)	400	1.67 (luźna)	Drobny druk, tekst prawny

Zasady

• Pogrubione nagłówki, średnia treść: Nagłówki UberMove mają wyłącznie wagę 700 (pogrubienie) — każdy nagłówek uderza z siłą billboardu. Tekst treści i UI w UberMoveText używa wag 400-500, tworząc wyraźną hierarchię wizualną przez kontrast wagi.
• Ciasne wysokości linii nagłówków: Wszystkie nagłówki używają wysokości linii między 1.22-1.40 — kompaktowe i dynamiczne, zaprojektowane do skanowania, nie czytania.
• Typografia funkcjonalna: Nie ma tu żadnych dekoracyjnych zabiegów typograficznych. Brak letter-spacing, text-transform ani ornamentacyjnych rozmiarów. Każdy element tekstowy służy bezpośredniemu celowi komunikacyjnemu.
• Dwie czcionki, ścisłe role: UberMove przeznaczony jest wyłącznie do nagłówków. UberMoveText przeznaczony jest wyłącznie do treści, przycisków, linków i UI. Granica nigdy nie jest przekraczana.

4. Style komponentów

Przyciski

Podstawowy czarny (CTA)

• Tło: Uber Black (#000000)
• Tekst: Pure White (#ffffff)
• Padding: 10px 12px
• Radius: 999px (pełna pigułka)
• Outline: brak
• Focus: wewnętrzny pierścień rgb(255,255,255) 0px 0px 0px 2px
• Podstawowy przycisk akcji — pogrubiony, wysokokonturowy, nie do przeoczenia

Drugorzędny biały

• Tło: Pure White (#ffffff)
• Tekst: Uber Black (#000000)
• Padding: 10px 12px
• Radius: 999px (pełna pigułka)
• Hover: tło zmienia się na Hover Gray (#e2e2e2)
• Focus: tło zmienia się na Hover Gray, pojawia się wewnętrzny pierścień
• Używany na ciemnych powierzchniach lub jako drugorzędna akcja obok podstawowego czarnego

Chip / Filtr

• Tło: Chip Gray (#efefef)
• Tekst: Uber Black (#000000)
• Padding: 14px 16px
• Radius: 999px (pełna pigułka)
• Aktywny: cień wewnętrzny rgba(0,0,0,0.08)
• Chipy nawigacyjne, selektory kategorii, przełączniki filtrów

Pływający przycisk akcji

• Tło: Pure White (#ffffff)
• Tekst: Uber Black (#000000)
• Padding: 14px
• Radius: 999px (pełna pigułka)
• Cień: rgba(0,0,0,0.16) 0px 2px 8px 0px
• Transform: translateY(2px) lekkie przesunięcie
• Hover: tło zmienia się na #f3f3f3
• Sterowanie mapą, przewijanie do góry, pływające CTA

Karty i kontenery

• Tło: Pure White (#ffffff) na białych stronach; brak wyraźnego zróżnicowania tła kart
• Obramowanie: brak domyślnie — karty są definiowane przez cień, nie obrys
• Radius: 8px dla standardowych kart z treścią; 12px dla wyróżnionych/promowanych kart
• Cień: rgba(0,0,0,0.12) 0px 4px 16px 0px dla standardowego uniesienia
• Karty są informacyjnie gęste z minimalnym wewnętrznym paddingiem
• Karty prowadzone obrazem używają zdjęć na pełne krwawienie z tekstem nakładanym lub pod spodem

Pola wejściowe i formularze

• Tekst: Uber Black (#000000)
• Tło: Pure White (#ffffff)
• Obramowanie: 1px solid Black (#000000) — jedyne miejsce, gdzie widoczne obramowania pojawiają się wyraźnie
• Radius: 8px
• Padding: standardowe wygodne odstępy
• Focus: brak wyodrębnionego niestandardowego stanu focus — opiera się na standardowym pierścieniu focus przeglądarki

Nawigacja

• Przyklejona górna nawigacja z białym tłem
• Logo: wordmark/ikona Uber o rozmiarze 24x24px w kolorze czarnym
• Linki: UberMoveText przy 14-18px, waga 500, w Uber Black
• Chipy nawigacyjne w kształcie pigułek z tłem Chip Gray (#efefef) do nawigacji kategorii („Ride", „Drive", „Business", „Uber Eats")
• Przełącznik menu: okrągły przycisk z border-radius 50%
• Mobilnie: wzorzec menu hamburgerowego

Obróbka obrazów

• Ciepłe, ręcznie ilustrowane sceny (nie fotografie dla sekcji funkcji)
• Styl ilustracji: lekko stylizowane postacie, ciepła paleta kolorów w ilustracjach, współczesny klimat
• Sekcje hero używają odważnej fotografii lub ilustracji jako tła na pełną szerokość
• Kody QR dla CTA pobierania aplikacji
• Wszystkie obrazy używają standardowego border-radius 8px lub 12px, gdy są zawarte w kartach

Wyróżniające się komponenty

Nawigacja pigułkowa kategorii

• Poziomy rząd przycisków w kształcie pigułek do nawigacji najwyższego poziomu („Ride", „Drive", „Business", „Uber Eats", „About")
• Każda pigułka: tło Chip Gray, czarny tekst, radius 999px
• Stan aktywny wskazany czarnym tłem z białym tekstem (inwersja)

Hero z podwójną akcją

• Podzielone hero: tekst/CTA po lewej, mapa/ilustracja po prawej
• Dwa pola wejściowe obok siebie dla miejsca odbioru/celu
• Przycisk CTA „See prices" w czarnej pigułce

Karty planowania z wyprzedzeniem

• Karty promujące funkcje takie jak „Uber Reserve" i planowanie podróży
• Bogato ilustrowane z ciepłymi, zorientowanymi na ludzi obrazami
• Czarne przyciski CTA z białym tekstem na dole

5. Zasady układu

System odstępów

• Jednostka bazowa: 8px
• Skala: 4px, 6px, 8px, 10px, 12px, 14px, 16px, 18px, 20px, 24px, 32px
• Padding przycisków: 10px 12px (kompaktowy) lub 14px 16px (wygodny)
• Wewnętrzny padding karty: około 24-32px
• Pionowe odstępy sekcji: hojne, ale efektywne — około 64-96px między głównymi sekcjami

Siatka i kontener

• Maksymalna szerokość kontenera: około 1136px, wyśrodkowany
• Hero: podzielony układ z tekstem po lewej, wizualizacją po prawej
• Sekcje funkcji: dwukolumnowe siatki kart lub pełnoszerokościowa pojedyncza kolumna
• Stopka: wielokolumnowa siatka linków na czarnym tle
• Sekcje na pełną szerokość rozszerzające się do krawędzi viewportu

Filozofia białej przestrzeni

• Efektywna, nie przestronna: Biała przestrzeń Uber jest funkcjonalna — wystarczająca do separacji, nigdy na tyle duża, by wyglądać na pustą. To odstępowanie systemu tranzytowego: kompaktowe, czytelne, celowe.
• Karty gęste informacyjnie: Karty pakują informacje ciasno z minimalnym wewnętrznym odstępowaniem, opierając się na cieniu i promieniu do definiowania granic.
• Oddech sekcji: Główne sekcje dostają hojne pionowe odstępy, ale wewnątrz sekcji elementy są blisko zgrupowane.

Skala promienia zaokrąglenia

• Ostry (0px): Żadnych kwadratowych narożników w elementach interaktywnych
• Standardowy (8px): Karty z treścią, pola wejściowe, listboxy
• Wygodny (12px): Wyróżnione karty, większe kontenery, karty linków
• Pełna pigułka (999px): Wszystkie przyciski, chipy, elementy nawigacyjne, pigułki
• Koło (50%): Obrazy awatarów, kontenery ikon, okrągłe elementy sterujące

6. Głębia i uniesienie

Poziom	Obróbka	Zastosowanie
Płaski (Poziom 0)	Brak cienia, jednolite tło	Tło strony, treść inline, sekcje tekstowe
Subtelny (Poziom 1)	rgba(0,0,0,0.12) 0px 4px 16px	Standardowe karty z treścią, bloki funkcji
Średni (Poziom 2)	rgba(0,0,0,0.16) 0px 4px 16px	Uniesione karty, elementy nakładek
Pływający (Poziom 3)	rgba(0,0,0,0.16) 0px 2px 8px + translateY(2px)	Pływające przyciski akcji, sterowanie mapą
Wciśnięty (Poziom 4)	rgba(0,0,0,0.08) inset (spread 999px)	Stany aktywne/wciśnięte przycisków
Pierścień focus	rgb(255,255,255) 0px 0px 0px 2px inset	Wskaźniki focus klawiaturowego

Filozofia cieni: Uber używa cienia wyłącznie jako narzędzia strukturalnego, nigdy dekoracyjnego. Cienie są zawsze czarne przy bardzo niskim kryciu (0.08-0.16), tworząc minimalne uniesienie potrzebne do separacji warstw treści. Promienie rozmycia są umiarkowane (8-16px) — wystarczające, by wyglądać naturalnie, ale nigdy dramatycznie. Nie ma kolorowych cieni, nakładanych stosów cieni ani efektów otaczającej poświaty. Głębia jest komunikowana bardziej przez kontrast sekcji czarnych/białych niż przez uniesienie cieniami.

7. Reguły — co robić, czego unikać

Rób

• Używaj prawdziwej czerni (#000000) i czystej bieli (#ffffff) jako podstawowej palety — surowy kontrast TO jest Uber
• Używaj border-radius 999px dla wszystkich przycisków, chipów i elementów nawigacyjnych w kształcie pigułek
• Zachowuj wszystkie nagłówki w UberMove Bold (700) dla uderzenia na poziomie billboardu
• Używaj cieni delikatnych jak szelest (krycie 0.12-0.16) dla uniesienia kart — ledwo widocznych
• Utrzymuj kompaktowy, gęsty informacyjnie styl układu — Uber stawia efektywność nad przestronność
• Używaj ciepłych, zorientowanych na ludzi ilustracji, by złagodzić monochromatyczny interfejs
• Stosuj radius 8px dla kart z treścią i 12px dla wyróżnionych kontenerów
• Używaj UberMoveText przy wadze 500 do nawigacji i wyeksponowanego tekstu UI
• Łącz czarne podstawowe przyciski z białymi drugorzędnymi do układów z podwójną akcją

Nie rób

• Nie wprowadzaj kolorów do chrom interfejsu — interfejs Uber jest ściśle czarno-biało-szary
• Nie używaj zaokrągleń narożników mniejszych niż 999px na przyciskach — kształt pełnej pigułki jest kluczowym elementem tożsamości
• Nie stosuj ciężkich cieni lub drop shadows o wysokim kryciu — głębia jest subtelna jak szelest
• Nie używaj czcionek szeryfowych nigdzie — typografia Uber jest wyłącznie geometrycznym sans-serif
• Nie twórz przestronnych układów z nadmierną białą przestrzenią — gęstość Uber jest zamierzona
• Nie używaj gradientów ani nakładek kolorów — każda powierzchnia jest płaskim, jednolitym kolorem
• Nie mieszaj UberMove do tekstu głównego ani UberMoveText do nagłówków — hierarchia jest ścisła
• Nie używaj dekoracyjnych obramowań — obramowania są funkcjonalne (pola wejściowe, separatory) lub nieobecne
• Nie łagodź kontrastu czarno-białego odcieniami bieli ani prawie-czerni — dualność jest celowa

8. Zachowanie responsywne

Punkty przerwania

Nazwa	Szerokość	Kluczowe zmiany
Mobilny mały	320px	Minimalny układ, pojedyncza kolumna, pola wejściowe w stosie, kompaktowa typografia
Mobilny	600px	Standardowy mobilny, układ w stosie, nawigacja hamburgerowa
Tablet mały	768px	Zaczynają się dwukolumnowe siatki, rozszerzone układy kart
Tablet	1119px	Pełny układ tabletu, treść hero obok siebie
Desktop mały	1120px	Aktywuje się siatka desktopowa, poziome pigułki nawigacyjne
Desktop	1136px	Pełny układ desktopowy, maksymalna szerokość kontenera, podzielone hero

Cele dotykowe

• Wszystkie przyciski pigułkowe: minimalna wysokość 44px (pionowy padding 10-14px + wysokość linii)
• Chipy nawigacyjne: hojny padding 14px 16px dla wygodnego dotykania kciukiem
• Okrągłe elementy sterujące (menu, zamknięcie): radius 50% zapewnia duże, łatwe w trafieniu cele
• Powierzchnie kart służą jako pełnoobszarowe cele dotykowe na urządzeniach mobilnych

Strategia zwijania

• Nawigacja: Pozioma nawigacja pigułkowa zwija się do menu hamburgerowego z okrągłym przełącznikiem
• Hero: Podzielony układ (tekst + mapa/wizualizacja) układa się w pojedynczą kolumnę — tekst powyżej, wizualizacja poniżej
• Pola wejściowe: Pola odbioru/celu obok siebie układają się pionowo
• Karty funkcji: Dwukolumnowa siatka zwija się do kart na pełnej szerokości w stosie
• Nagłówki: Display 52px skaluje się w dół przez 36px, 32px, 24px, 20px
• Stopka: Wielokolumnowa siatka linków zwija się do akordeonu lub pojedynczej kolumny w stosie
• Pigułki kategorii: Poziome przewijanie z overflow na mniejszych ekranach

Zachowanie obrazów

• Ilustracje skalują się proporcjonalnie w swoich kontenerach
• Obrazy hero zachowują proporcje, mogą być przycinane na mniejszych ekranach
• Sekcje z kodami QR ukrywają się na urządzeniach mobilnych (pobieranie aplikacji przenosi się do bezpośrednich linków do sklepów)
• Obrazy kart zachowują border-radius 8-12px we wszystkich rozmiarach

9. Przewodnik po promptach dla agenta

Szybka referencyjna paleta kolorów

• Podstawowy przycisk: „Uber Black (#000000)"
• Tło strony: „Pure White (#ffffff)"
• Tekst przycisku (na czarnym): „Pure White (#ffffff)"
• Tekst przycisku (na białym): „Uber Black (#000000)"
• Drugorzędny tekst: „Body Gray (#4b4b4b)"
• Trzeciorzędny tekst: „Muted Gray (#afafaf)"
• Tło chipa: „Chip Gray (#efefef)"
• Stan hover: „Hover Gray (#e2e2e2)"
• Cień karty: „rgba(0,0,0,0.12) 0px 4px 16px"
• Tło stopki: „Uber Black (#000000)"

Przykładowe prompty komponentów

• „Utwórz sekcję hero na Pure White (#ffffff) z nagłówkiem przy 52px UberMove Bold (700), wysokość linii 1.23. Użyj tekstu Uber Black (#000000). Dodaj podtytuł w Body Gray (#4b4b4b) przy 16px UberMoveText waga 400 z wysokością linii 1.50. Umieść przycisk CTA pigułkowy Uber Black (#000000) z tekstem Pure White, radius 999px, padding 10px 12px."
• „Zaprojektuj pasek nawigacji kategorii z poziomymi przyciskami pigułkowymi. Każda pigułka: tło Chip Gray (#efefef), tekst Uber Black (#000000), padding 14px 16px, border-radius 999px. Aktywna pigułka odwraca się do tła Uber Black z tekstem Pure White. Użyj UberMoveText przy 14px waga 500."
• „Zbuduj kartę funkcji na Pure White (#ffffff) z border-radius 8px i cieniem rgba(0,0,0,0.12) 0px 4px 16px. Tytuł w UberMove przy 24px waga 700, opis w Body Gray (#4b4b4b) przy 16px UberMoveText. Dodaj czarny przycisk CTA pigułkowy na dole."
• „Utwórz ciemną stopkę na Uber Black (#000000) z tekstem nagłówka Pure White (#ffffff) w UberMove przy 20px waga 700. Linki stopki w Muted Gray (#afafaf) przy 14px UberMoveText. Linki przy hover zmieniają się na Pure White. Wielokolumnowy układ siatki."
• „Zaprojektuj pływający przycisk akcji z tłem Pure White (#ffffff), radius 999px, padding 14px i cieniem rgba(0,0,0,0.16) 0px 2px 8px. Hover zmienia tło na #f3f3f3. Użyj do przewijania do góry lub sterowania mapą."

Przewodnik iteracji

1. Skupiaj się na JEDNYM komponencie na raz
2. Odwołuj się do ścisłej palety czarno-białej — „użyj Uber Black (#000000)", nie „zrób to ciemnym"
3. Zawsze określaj radius 999px dla przycisków i pigułek — to jest niezbywalne dla tożsamości Uber
4. Opisuj rodzinę czcionek explicite — „UberMove Bold dla nagłówka, UberMoveText Medium dla etykiety"
5. Dla cieni używaj „cieniu jak szelest (rgba(0,0,0,0.12) 0px 4px 16px)" — nigdy ciężkich drop shadows
6. Zachowuj układy kompaktowe i gęste informacyjnie — Uber jest efektywny, nie przestronny
7. Ilustracje powinny być ciepłe i ludzkie — opisuj „stylizowane postacie w ciepłych tonach", nie abstrakcyjne kształty
8. Łącz czarne CTA z białymi elementami drugorzędnymi dla zrównoważonych układów z podwójną akcją