workbuddy_skills/open-design/design-systems/nvidia/DESIGN-pl.md

System Projektowy Inspirowany NVIDIA

Kategoria: Media i Konsument Obliczenia GPU. Zielono-czarna energia, estetyka technicznej siły.

1. Motyw Wizualny i Atmosfera

Strona internetowa NVIDIA to doświadczenie wysokiego kontrastu, zorientowane technologicznie, które komunikuje surową moc obliczeniową poprzez powściągliwość projektową. Strona zbudowana jest na surowym fundamencie czerni (#000000) i bieli (#ffffff), urozmaiconym charakterystyczną zielenią NVIDIA (#76b900) -- kolorem tak specyficznym, że pełni funkcję odcisku palca marki. To nie jest soczysta zieleń natury; to elektryczna, limonkowa zieleń światła renderowanego przez GPU, kolor sytuujący się pomiędzy chartreuse a kelly green, który dla każdej osoby z branży technologicznej natychmiast sygnalizuje „NVIDIA".

Rodzina czcionek NVIDIA-EMEA (z awaryjnymi Arial i Helvetica) tworzy czysty, industrialny głos typograficzny. Nagłówki 36px pogrubione z ciasnym interlinią 1.25 tworzą gęste, autorytatywne bloki tekstu. Czcionka pozbawiona jest geometrycznej swawolności charakterystycznej dla sans-serifów z Doliny Krzemowej -- jest europejska, pragmatyczna i skoncentrowana na inżynierii. Tekst główny ma 15-16px, komfortowy do czytania, lecz nierozrzutny, co utrzymuje wrażenie, że przestrzeń ekranu jest optymalizowana jak pamięć GPU.

To, co wyróżnia projekt NVIDIA spośród innych technologicznych stron z ciemnym tłem, to zdyscyplinowane użycie zielonego akcentu. #76b900 pojawia się w obramowaniach (2px solid #76b900), podkreśleniach linków (underline 2px rgb(118, 185, 0)) i przyciskach CTA -- lecz nigdy jako tła czy duże powierzchnie w głównej treści. Zieleń to sygnał, nie powierzchnia. W połączeniu z głębokim systemem cieni (rgba(0, 0, 0, 0.3) 0px 0px 5px) i minimalnym promieniem zaokrąglenia (1-2px), całościowy efekt to precyzyjny sprzęt inżynieryjny oddany w pikselach.

Kluczowe Cechy:

• Zieleń NVIDIA (#76b900) jako czysty akcent -- wyłącznie obramowania, podkreślenia i interaktywne wyróżnienia
• Czarne (#000000) dominujące tło z białym (#ffffff) tekstem na ciemnych sekcjach
• Niestandardowa czcionka NVIDIA-EMEA z awaryjnym Arial/Helvetica -- industrialna, europejska, czysta
• Ciasne interlinie (1.25 dla nagłówków) tworzące gęste, autorytatywne bloki tekstu
• Minimalny promień zaokrąglenia (1-2px) -- ostre, inżynieryjne narożniki w całym projekcie
• Przyciski z zielonym obramowaniem (2px solid #76b900) jako główny wzorzec interaktywny
• System ikon Font Awesome 6 Pro/Sharp przy wadze 900 dla wyraźnej ikonografii
• Architektura wieloframeworkowa (PrimeReact, Fluent UI, Element Plus) umożliwiająca bogate komponenty interaktywne

2. Paleta Kolorów i Role

Główna Marka

• Zieleń NVIDIA (#76b900): Sygnatura -- obramowania, podkreślenia linków, kontury CTA, wskaźniki aktywności. Nigdy nie używana jako duże wypełnienia powierzchni.
• Czysta Czerń (#000000): Główne tło strony, tekst na jasnych powierzchniach, dominujący ton.
• Czysta Biel (#ffffff): Tekst na ciemnych tłach, jasne tła sekcji, powierzchnie kart.

Rozszerzona Paleta Marki

• Jasna Zieleń NVIDIA (#bff230): Jasny limonkowy akcent dla wyróżnień i stanów hover.
• Pomarańcz 400 (#df6500): Ciepły akcent dla alertów, wyróżnionych odznak lub kontekstów związanych z energią.
• Żółty 300 (#ef9100): Drugorzędny ciepły akcent, wyróżnienia kategorii produktów.
• Żółty 050 (#feeeb2): Jasna ciepła powierzchnia dla teł wyróżnień.

Stany i Semantyka

• Czerwony 500 (#e52020): Stany błędów, działania destrukcyjne, alerty krytyczne.
• Czerwony 800 (#650b0b): Głęboka czerwień dla teł poważnych ostrzeżeń.
• Zielony 500 (#3f8500): Stany sukcesu, pozytywne wskaźniki (ciemniejszy niż zieleń marki).
• Niebieski 700 (#0046a4): Akcenty informacyjne, alternatywny hover linków.

Dekoracyjne

• Fioletowy 800 (#4d1368): Głęboki fiolet dla końców gradientów, kontekstów premium/AI.
• Fioletowy 100 (#f9d4ff): Jasny fioletowy odcień powierzchni.
• Fuksjowy 700 (#8c1c55): Bogaty akcent dla specjalnych promocji lub wyróżnionych treści.

Skala Neutralna

• Szary 300 (#a7a7a7): Stonowany tekst, wyłączone etykiety.
• Szary 400 (#898989): Drugorzędny tekst, metadane.
• Szary 500 (#757575): Trzeciorzędny tekst, symbole zastępcze, stopki.
• Szary Obramowania (#5e5e5e): Subtelne obramowania, linie podziałowe.
• Prawie Czarny (#1a1a1a): Ciemne powierzchnie, tła kart na czarnych stronach.

Stany Interaktywne

• Link Domyślny (ciemne tło) (#ffffff): Białe linki na ciemnych tłach.
• Link Domyślny (jasne tło) (#000000): Czarne linki z zielonym podkreśleniem na jasnych tłach.
• Hover Linku (#3860be): Przesunięcie w niebieską stronę przy hover dla wszystkich wariantów linków.
• Hover Przycisku (#1eaedb): Turkusowe wyróżnienie dla stanów hover przycisków.
• Aktywny Przycisk (#007fff): Jaskrawy niebieski dla aktywnych/wciśniętych stanów przycisków.
• Pierścień Focusu (#000000 solid 2px): Czarny kontur dla focusu klawiatury.

Cienie i Głębia

• Cień Karty (rgba(0, 0, 0, 0.3) 0px 0px 5px 0px): Subtelny cień otoczenia dla podniesionych kart.

3. Zasady Typografii

Rodzina Czcionek

• Główna: NVIDIA-EMEA, z awaryjnymi: Arial, Helvetica, sans-serif
• Czcionka Ikon: Font Awesome 6 Pro (waga 900 dla ikon wypełnionych, 700 dla regularnych)
• Ikony Sharp: Font Awesome 6 Sharp (waga 300 dla lekkich ikon, 400 dla regularnych)

Hierarchia

Rola	Czcionka	Rozmiar	Waga	Interlinia	Odstęp Liter	Uwagi
Wyświetlacz Hero	NVIDIA-EMEA	36px (2.25rem)	700	1.25 (ciasna)	normal	Nagłówki o maksymalnym wpływie
Nagłówek Sekcji	NVIDIA-EMEA	24px (1.50rem)	700	1.25 (ciasna)	normal	Tytuły sekcji, nagłówki kart
Podnagłówek	NVIDIA-EMEA	22px (1.38rem)	400	1.75 (rozluźniona)	normal	Opisy funkcji, podtytuły
Tytuł Karty	NVIDIA-EMEA	20px (1.25rem)	700	1.25 (ciasna)	normal	Nagłówki kart i modułów
Duże Ciało	NVIDIA-EMEA	18px (1.13rem)	700	1.67 (rozluźniona)	normal	Wyróżnione ciało tekstu, akapity wiodące
Ciało	NVIDIA-EMEA	16px (1.00rem)	400	1.50	normal	Standardowy tekst do czytania
Pogrubione Ciało	NVIDIA-EMEA	16px (1.00rem)	700	1.50	normal	Mocne etykiety, elementy nawigacji
Małe Ciało	NVIDIA-EMEA	15px (0.94rem)	400	1.67 (rozluźniona)	normal	Treści drugorzędne, opisy
Małe Pogrubione Ciało	NVIDIA-EMEA	15px (0.94rem)	700	1.50	normal	Wyróżnione treści drugorzędne
Duży Przycisk	NVIDIA-EMEA	18px (1.13rem)	700	1.25 (ciasna)	normal	Główne przyciski CTA
Przycisk	NVIDIA-EMEA	16px (1.00rem)	700	1.25 (ciasna)	normal	Standardowe przyciski
Kompaktowy Przycisk	NVIDIA-EMEA	14.4px (0.90rem)	700	1.00 (ciasna)	0.144px	Małe/kompaktowe przyciski
Link	NVIDIA-EMEA	14px (0.88rem)	700	1.43	normal	Linki nawigacyjne
Link Wielkie Litery	NVIDIA-EMEA	14px (0.88rem)	700	1.43	normal	text-transform: uppercase, etykiety nawigacji
Podpis	NVIDIA-EMEA	14px (0.88rem)	600	1.50	normal	Metadane, znaczniki czasu
Mały Podpis	NVIDIA-EMEA	12px (0.75rem)	400	1.25 (ciasna)	normal	Drobny druk, informacje prawne
Mikro Etykieta	NVIDIA-EMEA	10px (0.63rem)	700	1.50	normal	text-transform: uppercase, małe odznaki
Mikro	NVIDIA-EMEA	11px (0.69rem)	700	1.00 (ciasna)	normal	Najmniejszy tekst interfejsu

Zasady

• Pogrubienie jako domyślny głos: NVIDIA mocno opiera się na wadze 700 dla nagłówków, przycisków, linków i etykiet. Waga 400 zarezerwowana jest dla tekstu głównego i opisów -- wszystko inne jest pogrubione, projeku­jąc pewność siebie i autorytet.
• Ciasne nagłówki, rozluźnione ciało: Interlinia nagłówków konsekwentnie wynosi 1.25 (ciasna), podczas gdy tekst główny rozluźnia się do 1.50-1.67. Ten kontrast tworzy wizualną gęstość na górze bloków treści i komfortową czytelność w akapitach.
• Wielkie litery dla nawigacji: Etykiety linków używają text-transform: uppercase z wagą 700, tworząc głos nawigacyjny czytany jak etykiety specyfikacji sprzętowej.
• Brak dekoracyjnego odstępu: Odstęp liter jest normalny w całym projekcie, z wyjątkiem kompaktowych przycisków (0.144px). Sama czcionka niesie industrialny charakter bez żadnych manipulacji.

4. Style Komponentów

Przyciski

Główny (Zielone Obramowanie)

• Tło: transparent
• Tekst: #000000
• Padding: 11px 13px
• Obramowanie: 2px solid #76b900
• Promień: 2px
• Czcionka: 16px waga 700
• Hover: tło #1eaedb, tekst #ffffff
• Aktywny: tło #007fff, tekst #ffffff, obramowanie 1px solid #003eff, scale(1)
• Focus: tło #1eaedb, tekst #ffffff, kontur #000000 solid 2px, opacity 0.9
• Użycie: Główne CTA ("Learn More", "Explore Solutions")

Drugorzędny (Cienkie Zielone Obramowanie)

• Tło: transparent
• Obramowanie: 1px solid #76b900
• Promień: 2px
• Użycie: Akcje drugorzędne, alternatywne CTA

Kompaktowy / Wbudowany

• Czcionka: 14.4px waga 700
• Odstęp liter: 0.144px
• Interlinia: 1.00
• Użycie: Wbudowane CTA, kompaktowa nawigacja

Karty i Kontenery

• Tło: #ffffff (jasne) lub #1a1a1a (ciemne sekcje)
• Obramowanie: brak (czyste krawędzie) lub 1px solid #5e5e5e
• Promień: 2px
• Cień: rgba(0, 0, 0, 0.3) 0px 0px 5px 0px dla podniesionych kart
• Hover: wzmocnienie cienia
• Padding: 16-24px wewnętrzny

Linki

• Na Ciemnym Tle: #ffffff, bez podkreślenia, hover przesuwa się do #3860be
• Na Jasnym Tle: #000000 lub #1a1a1a, podkreślenie 2px solid #76b900, hover przesuwa się do #3860be, podkreślenie usuwane
• Zielone Linki: #76b900, hover przesuwa się do #3860be
• Stonowane Linki: #666666, hover przesuwa się do #3860be

Nawigacja

• Ciemnoczarne tło (#000000)
• Logo wyrównane do lewej, wyraźny wordmark NVIDIA
• Linki: NVIDIA-EMEA 14px waga 700 wielkie litery, #ffffff
• Hover: zmiana koloru, brak zmiany podkreślenia
• Rozwijane mega-menu dla kategorii produktów
• Przylepione podczas przewijania z tłem

Obróbka Obrazów

• Renderingi produktów/GPU jako obrazy hero, często na pełną szerokość
• Obrazy zrzutów ekranu z subtelnym cieniem dla głębi
• Zielone nakładki gradientowe na ciemnych sekcjach hero
• Okrągłe kontenery awatarów z promieniem 50%

Charakterystyczne Komponenty

Karty Produktów

• Czysta biała lub ciemna karta z minimalnym promieniem (2px)
• Zielony akcent obramowania lub podkreślenie tytułu
• Wzorzec pogrubionego nagłówka i lżejszego opisu
• CTA z zielonym obramowaniem na dole

Tabele Specyfikacji Technicznych

• Industrialne układy siatki
• Naprzemienne tła wierszy (subtelna zmiana szarości)
• Pogrubione etykiety, regularne wartości
• Zielone wyróżnienia dla kluczowych metryk

Baner Cookie/Zgody

• Stałe pozycjonowanie na dole
• Zaokrąglone przyciski (promień 2px)
• Szare obramowania

5. Zasady Układu

System Odstępów

• Jednostka bazowa: 8px
• Skala: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 15px
• Główne wartości paddingu: 8px, 11px, 13px, 16px, 24px, 32px
• Odstępy sekcji: 48-80px pionowego paddingu

Siatka i Kontener

• Maksymalna szerokość treści: około 1200px (zamknięta)
• Sekcje hero na pełną szerokość z zamkniętym tekstem
• Sekcje funkcji: siatki 2-3 kolumn dla kart produktów
• Jedna kolumna dla treści artykułów/blogów
• Układy z paskiem bocznym dla dokumentacji

Filozofia Białej Przestrzeni

• Celowa gęstość: NVIDIA stosuje ciaśniejsze odstępy niż typowe strony SaaS, odzwierciedlając gęstość treści technicznych. Biała przestrzeń istnieje, by oddzielać koncepcje, a nie tworzyć luksusową pustkę.
• Rytm sekcji: Ciemne sekcje naprzemiennie przeplatają się z białymi, używając koloru tła (nie tylko odstępów) do separacji bloków treści.
• Gęstość kart: Karty produktów siedzą blisko siebie z odstępami 16-20px, tworząc poczucie katalogu, a nie galerii.

Skala Promienia Zaokrąglenia

• Mikro (1px): Wbudowane rozpiętości, małe elementy
• Standard (2px): Przyciski, karty, kontenery, pola wprowadzania -- domyślne dla prawie wszystkiego
• Okrąg (50%): Obrazy awatarów, okrągłe wskaźniki zakładek

6. Głębia i Elewacja

Poziom	Obróbka	Użycie
Płaski (Poziom 0)	Brak cienia	Tła stron, tekst wbudowany
Subtelny (Poziom 1)	rgba(0,0,0,0.3) 0px 0px 5px 0px	Standardowe karty, modale
Obramowanie (Poziom 1b)	1px solid #5e5e5e	Podziałki treści, obramowania sekcji
Zielony akcent (Poziom 2)	2px solid #76b900	Aktywne elementy, CTA, wybrane pozycje
Focus (Dostępność)	kontur 2px solid #000000	Pierścień focusu klawiatury

Filozofia Cieni: System głębi NVIDIA jest minimalny i utylitarny. Istnieje zasadniczo jedna wartość cienia -- 5px rozmycie otoczenia przy 30% kryciu -- używana oszczędnie dla kart i modali. Głównym sygnałem głębi nie jest cień, lecz kontrast kolorów: czarne tła obok białych sekcji, zielone obramowania na czarnych powierzchniach. Tworzy to wizualną warstwowość podobną do sprzętu, gdzie głębia pochodzi z różnicy materiałów, a nie symulowanego światła.

Dekoracyjna Głębia

• Zielone przejścia gradientowe za treściami hero
• Gradienty od ciemnego do ciemniejszego (czarny do prawie czarnego) dla przejść między sekcjami
• Brak efektów glassmorphism ani rozmycia -- klarowność ponad atmosferę

7. Zachowanie Responsywne

Punkty Przełamania

Nazwa	Szerokość	Kluczowe Zmiany
Mały Mobilny	<375px	Kompaktowa pojedyncza kolumna, zredukowany padding
Mobilny	375-425px	Standardowy układ mobilny
Duży Mobilny	425-600px	Szerszy mobilny, niektóre wskazówki 2-kol.
Mały Tablet	600-768px	Zaczynają się siatki 2-kolumnowe
Tablet	768-1024px	Pełne siatki kart, rozszerzona nawigacja
Desktop	1024-1350px	Standardowy układ desktopowy
Duży Desktop	>1350px	Maksymalna szerokość treści, hojne marginesy

Cele Dotykowe

• Przyciski używają paddingu 11px 13px dla komfortowych celów dotykowych
• Linki nawigacyjne w 14px wielkie litery z odpowiednim odstępem
• Przyciski z zielonym obramowaniem zapewniają wysokich kontrastów cele dotykowe na ciemnych tłach
• Mobilny: menu hamburgerowe zwijane z nakładką na pełny ekran

Strategia Zwijania

• Hero: nagłówek 36px skaluje się proporcjonalnie w dół
• Nawigacja: pełna pozioma nawigacja zwija się do menu hamburgerowego przy ~1024px
• Karty produktów: 3 kolumny → 2 kolumny → pojedyncza układana kolumna
• Stopka: wielokolumnowa siatka zwija się do pojedynczej ułożonej kolumny
• Odstępy sekcji: 64-80px redukuje się do 32-48px na urządzeniach mobilnych
• Obrazy: zachowują proporcje, skalują się do szerokości kontenera

Zachowanie Obrazów

• Renderingi GPU/produktów zachowują wysoką rozdzielczość we wszystkich rozmiarach
• Obrazy hero skalują się proporcjonalnie z oknem przeglądarki
• Obrazy kart używają spójnych proporcji
• Ciemne sekcje na pełne krwawienie zachowują obróbkę krawędź do krawędzi

8. Zachowanie Responsywne (Rozszerzone)

Skalowanie Typografii

• Wyświetlacz 36px skaluje się do ~24px na urządzeniach mobilnych
• Nagłówki sekcji 24px skalują się do ~20px na urządzeniach mobilnych
• Tekst główny zachowuje 15-16px we wszystkich punktach przełamania
• Tekst przycisku zachowuje 16px dla spójnych celów dotykowych

Strategia Ciemnych/Jasnych Sekcji

• Ciemne sekcje (czarne tło, biały tekst) naprzemiennie przeplatają się z jasnymi sekcjami (białe tło, czarny tekst)
• Zielony akcent pozostaje spójny w obu typach powierzchni
• Na ciemnym: linki są białe, podkreślenia są zielone
• Na jasnym: linki są czarne, podkreślenia są zielone
• To naprzemienne przechodzenie tworzy naturalny rytm przewijania i grupowanie treści

9. Przewodnik po Promptach Agenta

Szybka Referencja Kolorów

• Główny akcent: Zieleń NVIDIA (#76b900)
• Ciemne tło: Czysta Czerń (#000000)
• Jasne tło: Czysta Biel (#ffffff)
• Tekst nagłówka (ciemne tło): Biały (#ffffff)
• Tekst nagłówka (jasne tło): Czarny (#000000)
• Tekst główny (jasne tło): Czarny (#000000) lub Prawie Czarny (#1a1a1a)
• Tekst główny (ciemne tło): Biały (#ffffff) lub Szary 300 (#a7a7a7)
• Hover linku: Niebieski (#3860be)
• Akcent obramowania: 2px solid #76b900
• Hover przycisku: Turkus (#1eaedb)

Przykładowe Prompty Komponentów

• "Utwórz sekcję hero na czarnym tle. Nagłówek 36px NVIDIA-EMEA waga 700, interlinia 1.25, kolor #ffffff. Podtytuł 18px waga 400, interlinia 1.67, kolor #a7a7a7. Przycisk CTA z przezroczystym tłem, obramowaniem 2px solid #76b900, promieniem 2px, paddingiem 11px 13px, tekst #ffffff. Hover: tło #1eaedb, tekst biały."
• "Zaprojektuj kartę produktu: białe tło, promień obramowania 2px, box-shadow rgba(0,0,0,0.3) 0px 0px 5px. Tytuł 20px NVIDIA-EMEA waga 700, interlinia 1.25, kolor #000000. Ciało 15px waga 400, interlinia 1.67, kolor #757575. Zielony akcent podkreślenia tytułu: border-bottom 2px solid #76b900."
• "Zbuduj pasek nawigacyjny: tło #000000, przylepione na górze. Logo NVIDIA wyrównane do lewej. Linki 14px NVIDIA-EMEA waga 700 wielkie litery, kolor #ffffff. Hover: kolor #3860be. Przycisk CTA z zielonym obramowaniem wyrównany do prawej."
• "Utwórz ciemną sekcję funkcji: tło #000000. Etykieta sekcji 14px waga 700 wielkie litery, kolor #76b900. Nagłówek 24px waga 700, kolor #ffffff. Opis 16px waga 400, kolor #a7a7a7. Trzy karty produktów w rzędzie z odstępem 20px."
• "Zaprojektuj stopkę: tło #000000. Wielokolumnowy układ z grupami linków. Linki 14px waga 400, kolor #a7a7a7. Hover: kolor #76b900. Dolny pasek z tekstem prawnym 12px, kolor #757575."

Przewodnik po Iteracji

1. Zawsze używaj #76b900 jako akcentu, nigdy jako wypełnienia tła -- to kolor sygnałowy dla obramowań, podkreśleń i wyróżnień
2. Przyciski są domyślnie przezroczyste z zielonymi obramowaniami -- wypełnione tła pojawiają się tylko w stanach hover/aktywnym
3. Waga 700 to dominujący głos dla wszystkich elementów interaktywnych i nagłówków; 400 jest tylko dla akapitów treści głównej
4. Promień obramowania wynosi 2px dla wszystkiego -- to ostre, minimalne zaokrąglenie jest kluczowe dla industrialnej estetyki
5. Ciemne sekcje używają białego tekstu; jasne sekcje używają czarnego tekstu -- zielony akcent działa identycznie na obu
6. Hover linku to zawsze #3860be (niebieski) niezależnie od domyślnego koloru linku
7. Interlinia 1.25 dla nagłówków, 1.50-1.67 dla tekstu głównego -- utrzymuj ten kontrast dla hierarchii wizualnej
8. Nawigacja używa wielkich liter 14px pogrubione -- ta typografia etykiet sprzętowych jest częścią głosu marki