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

System Projektowania Inspirowany Stripe

Category: Fintech i Krypto Infrastruktura płatności. Charakterystyczne fioletowe gradienty, elegancja weight-300.

1. Motyw Wizualny i Atmosfera

Strona internetowa Stripe jest złotym standardem projektowania fintech — system, który potrafi być jednocześnie techniczny i luksusowy, precyzyjny i ciepły. Strona otwiera się na czystym białym płótnie (#ffffff) z ciemno-granatowymi nagłówkami (#061b31) i charakterystycznym fioletowym kolorem (#533afd), który pełni funkcję zarówno kotwicy marki, jak i interaktywnego akcentu. Nie jest to zimny, kliniczny fiolet oprogramowania dla przedsiębiorstw; to bogaty, nasycony fiolet, który sprawia wrażenie pewnego siebie i premium. Ogólne wrażenie to instytucja finansowa przeprojektowana przez światowej klasy odlewnię czcionek.

Niestandardowy krój sohne-var to zmienna czcionka definiująca tożsamość wizualną Stripe. Każdy element tekstowy włącza zestaw stylistyczny OpenType "ss01", który modyfikuje kształty znaków, nadając im wyraźnie geometryczny, nowoczesny charakter. Przy rozmiarach displayowych (48px–56px), sohne-var używa grubości 300 — niezwykle lekkiej grubości dla nagłówków, która tworzy eteryczny, wręcz szeptany autorytet. Jest to przeciwieństwo konwencji "pogrubionego nagłówka bohatera"; nagłówki Stripe nie potrzebują krzyczeć. Ujemny odstęp między literami (-1,4px przy 56px, -0,96px przy 48px) zagęszcza tekst w gęste, inżynieryjne bloki. Przy mniejszych rozmiarach system używa grubości 300 z proporcjonalnie zredukowanym kerningiem oraz cyframi tabelarycznymi za pomocą "tnum" do wyświetlania danych finansowych.

To, co naprawdę wyróżnia Stripe, to system cieni. Zamiast płaskiego lub jednowarstwowego podejścia większości stron, Stripe używa wielowarstwowych cieni z niebieskim odcieniem: charakterystyczne rgba(50,50,93,0.25) w połączeniu z rgba(0,0,0,0.1) tworzy cienie o chłodnej, niemal atmosferycznej głębi — jakby elementy unosiły się na zmierzchowym niebie. Niebieskoszary odcień koloru podstawowego cienia (50,50,93) bezpośrednio nawiązuje do granatowo-fioletowej palety marki, sprawiając, że nawet głębia uniesienia wydaje się zgodna z identyfikacją wizualną.

Kluczowe Cechy:

• sohne-var z OpenType "ss01" na całym tekście — niestandardowy zestaw stylistyczny definiujący kształty liter marki
• Grubość 300 jako charakterystyczna grubość nagłówków — lekka, pewna siebie, wbrew konwencji
• Ujemny odstęp między literami przy rozmiarach displayowych (-1,4px przy 56px, stopniowe rozluźnienie w dół)
• Wielowarstwowe cienie z niebieskim odcieniem używające rgba(50,50,93,0.25) — uniesienie, które czuć jako kolor marki
• Ciemno-granatowe (#061b31) nagłówki zamiast czarnych — ciepłe, premium, klasy finansowej
• Zachowawcze zaokrąglenie narożników (4px–8px) — nic w kształcie pigułki, nic surowego
• Akcenty rubinowy (#ea2261) i magenta (#f96bee) dla gradientów i elementów dekoracyjnych
• SourceCodePro jako towarzyszący krój monospacingowy dla kodu i etykiet technicznych

2. Paleta Kolorów i Role

Podstawowe

• Stripe Purple (#533afd): Podstawowy kolor marki, tła CTA, tekst linków, interaktywne wyróżnienia. Nasycony niebieskofioletowy, który zakotwicza cały system.
• Deep Navy (#061b31): --hds-color-heading-solid. Podstawowy kolor nagłówków. Nie czarny, nie szary — bardzo ciemny niebieski, który dodaje ciepła i głębi tekstowi.
• Pure White (#ffffff): Tło strony, powierzchnie kart, tekst przycisków na ciemnych tłach.

Marka i Ciemne

• Brand Dark (#1c1e54): --hds-color-util-brand-900. Głęboki indygo dla ciemnych sekcji, tła stopki i intensywnych momentów marki.
• Dark Navy (#0d253d): --hds-color-core-neutral-975. Najciemniejszy neutralny — prawie czarny z niebieskim podtonem dla maksymalnej głębi bez surowości.

Kolory Akcentowe

• Ruby (#ea2261): --hds-color-accentColorMode-ruby-icon-solid. Ciepły różowo-czerwony dla ikon, alertów i elementów akcentowych.
• Magenta (#f96bee): --hds-color-accentColorMode-magenta-icon-gradientMiddle. Żywy różowofioletowy dla gradientów i dekoracyjnych wyróżnień.
• Magenta Light (#ffd7ef): --hds-color-util-accent-magenta-100. Zabarwiona powierzchnia dla kart i odznak w tonacji magenty.

Interaktywne

• Primary Purple (#533afd): Podstawowy kolor linków, stany aktywne, zaznaczone elementy.
• Purple Hover (#4434d4): Ciemniejszy fiolet dla stanów hover na elementach podstawowych.
• Purple Deep (#2e2b8c): --hds-color-button-ui-iconHover. Ciemny fiolet dla stanów hover ikon.
• Purple Light (#b9b9f9): --hds-color-action-bg-subduedHover. Miękka lawenda dla stonowanych teł hover.
• Purple Mid (#665efd): --hds-color-input-selector-text-range. Kolor suwaka zakresu i wyróżnienia pola input.

Skala Neutralna

• Heading (#061b31): Podstawowe nagłówki, tekst nawigacji, wyraźne etykiety.
• Label (#273951): --hds-color-input-text-label. Etykiety formularzy, drugorzędne nagłówki.
• Body (#64748d): Tekst drugorzędny, opisy, podpisy.
• Success Green (#15be53): Odznaki statusu, wskaźniki sukcesu (z przezroczystością 0,2–0,4 dla teł/obramowań).
• Success Text (#108c3d): Kolor tekstu odznaki sukcesu.
• Lemon (#9b6829): --hds-color-core-lemon-500. Akcent ostrzeżenia i wyróżnienia.

Powierzchnie i Obramowania

• Border Default (#e5edf5): Standardowy kolor obramowania dla kart, separatorów i kontenerów.
• Border Purple (#b9b9f9): Obramowania stanów aktywnych/zaznaczonych na przyciskach i polach input.
• Border Soft Purple (#d6d9fc): Subtelne obramowania z fioletowym odcieniem dla elementów drugorzędnych.
• Border Magenta (#ffd7ef): Różowe obramowania dla elementów w tonacji magenty.
• Border Dashed (#362baa): Przerywane obramowania dla stref upuszczania i elementów zastępczych.

Kolory Cieni

• Shadow Blue (rgba(50,50,93,0.25)): Charakterystyczny — podstawowy kolor cienia z niebieskim odcieniem.
• Shadow Dark Blue (rgba(3,3,39,0.25)): Głębszy niebieski cień dla uniesionych elementów.
• Shadow Black (rgba(0,0,0,0.1)): Drugorzędna warstwa cienia wzmacniająca głębię.
• Shadow Ambient (rgba(23,23,23,0.08)): Miękki cień otoczenia dla subtelnego uniesienia.
• Shadow Soft (rgba(23,23,23,0.06)): Minimalny cień otoczenia dla lekkiego efektu uniesienia.

3. Reguły Typografii

Rodzina Czcionek

• Podstawowa: sohne-var, z fallbackiem: SF Pro Display
• Monospacingowa: SourceCodePro, z fallbackiem: SFMono-Regular
• Funkcje OpenType: "ss01" włączone globalnie na całym tekście sohne-var; "tnum" dla cyfr tabelarycznych w danych finansowych i podpisach.

Hierarchia

Rola	Czcionka	Rozmiar	Grubość	Wysokość wiersza	Odstęp liter	Funkcje	Uwagi
Display Hero	sohne-var	56px (3.50rem)	300	1.03 (ciasno)	-1.4px	ss01	Maksymalny rozmiar, autorytet szeptu
Display Large	sohne-var	48px (3.00rem)	300	1.15 (ciasno)	-0.96px	ss01	Drugorzędne nagłówki bohaterów
Section Heading	sohne-var	32px (2.00rem)	300	1.10 (ciasno)	-0.64px	ss01	Tytuły sekcji funkcji
Sub-heading Large	sohne-var	26px (1.63rem)	300	1.12 (ciasno)	-0.26px	ss01	Nagłówki kart, podsekcje
Sub-heading	sohne-var	22px (1.38rem)	300	1.10 (ciasno)	-0.22px	ss01	Mniejsze nagłówki sekcji
Body Large	sohne-var	18px (1.13rem)	300	1.40	normal	ss01	Opisy funkcji, tekst wprowadzający
Body	sohne-var	16px (1.00rem)	300-400	1.40	normal	ss01	Standardowy tekst do czytania
Button	sohne-var	16px (1.00rem)	400	1.00 (ciasno)	normal	ss01	Tekst przycisku podstawowego
Button Small	sohne-var	14px (0.88rem)	400	1.00 (ciasno)	normal	ss01	Przyciski drugorzędne/kompaktowe
Link	sohne-var	14px (0.88rem)	400	1.00 (ciasno)	normal	ss01	Linki nawigacyjne
Caption	sohne-var	13px (0.81rem)	400	normal	normal	ss01	Małe etykiety, metadane
Caption Small	sohne-var	12px (0.75rem)	300-400	1.33-1.45	normal	ss01	Drobny druk, znaczniki czasu
Caption Tabular	sohne-var	12px (0.75rem)	300-400	1.33	-0.36px	tnum	Dane finansowe, liczby
Micro	sohne-var	10px (0.63rem)	300	1.15 (ciasno)	0.1px	ss01	Bardzo małe etykiety, znaczniki osi
Micro Tabular	sohne-var	10px (0.63rem)	300	1.15 (ciasno)	-0.3px	tnum	Dane wykresów, małe liczby
Nano	sohne-var	8px (0.50rem)	300	1.07 (ciasno)	normal	ss01	Najmniejsze etykiety
Code Body	SourceCodePro	12px (0.75rem)	500	2.00 (luźno)	normal	--	Bloki kodu, składnia
Code Bold	SourceCodePro	12px (0.75rem)	700	2.00 (luźno)	normal	--	Pogrubiony kod, słowa kluczowe
Code Label	SourceCodePro	12px (0.75rem)	500	2.00 (luźno)	normal	uppercase	Etykiety techniczne
Code Micro	SourceCodePro	9px (0.56rem)	500	1.00 (ciasno)	normal	ss01	Małe adnotacje kodu

Zasady

• Lekka grubość jako sygnatura: Grubość 300 przy rozmiarach displayowych to najbardziej charakterystyczny wybór typograficzny Stripe. Tam, gdzie inni używają 600–700, by przykuwać uwagę, Stripe używa lekkości jako luksusu — tekst jest tak pewny siebie, że nie potrzebuje grubości, by być autorytatywny.
• ss01 wszędzie: Zestaw stylistyczny "ss01" jest nieodzowny. Modyfikuje konkretne glify (prawdopodobnie alternatywne formy a, g, l), tworząc bardziej geometryczny, współczesny charakter w całym tekście sohne-var.
• Dwa tryby OpenType: "ss01" dla tekstu displayowego/treści, "tnum" dla cyfr tabelarycznych w danych finansowych. Nigdy się nie nakładają — liczba w akapicie używa ss01, liczba w tabeli danych używa tnum.
• Progresywny tracking: Odstęp liter zagęszcza się proporcjonalnie do rozmiaru: -1,4px przy 56px, -0,96px przy 48px, -0,64px przy 32px, -0,26px przy 26px, normalny przy 16px i poniżej.
• Prostota dwóch grubości: Głównie 300 (treść i nagłówki) i 400 (UI/przyciski). Brak pogrubienia (700) w głównym kroju — SourceCodePro używa 500/700 dla kontrastu kodu.

4. Style Komponentów

Przyciski

Primary Purple

• Tło: #533afd
• Tekst: #ffffff
• Padding: 8px 16px
• Radius: 4px
• Czcionka: 16px sohne-var grubość 400, "ss01"
• Hover: tło #4434d4
• Użycie: Podstawowe CTA ("Start now", "Contact sales")

Ghost / Outlined

• Tło: transparent
• Tekst: #533afd
• Padding: 8px 16px
• Radius: 4px
• Obramowanie: 1px solid #b9b9f9
• Czcionka: 16px sohne-var grubość 400, "ss01"
• Hover: tło zmienia się na rgba(83,58,253,0.05)
• Użycie: Działania drugorzędne

Transparent Info

• Tło: transparent
• Tekst: #2874ad
• Padding: 8px 16px
• Radius: 4px
• Obramowanie: 1px solid rgba(43,145,223,0.2)
• Użycie: Działania trzeciorzędne/informacyjne

Neutral Ghost

• Tło: transparent (rgba(255,255,255,0))
• Tekst: rgba(16,16,16,0.3)
• Padding: 8px 16px
• Radius: 4px
• Obrys: 1px solid rgb(212,222,233)
• Użycie: Działania wyłączone lub stonowane

Karty i Kontenery

• Tło: #ffffff
• Obramowanie: 1px solid #e5edf5 (standardowe) lub 1px solid #061b31 (ciemny akcent)
• Radius: 4px (ciasny), 5px (standardowy), 6px (wygodny), 8px (wyróżniony)
• Cień (standardowy): rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px
• Cień (otoczenia): rgba(23,23,23,0.08) 0px 15px 35px 0px
• Hover: cień się intensyfikuje, często dodając warstwę z niebieskim odcieniem

Odznaki / Tagi / Pigułki

Neutral Pill

• Tło: #ffffff
• Tekst: #000000
• Padding: 0px 6px
• Radius: 4px
• Obramowanie: 1px solid #f6f9fc
• Czcionka: 11px grubość 400

Success Badge

• Tło: rgba(21,190,83,0.2)
• Tekst: #108c3d
• Padding: 1px 6px
• Radius: 4px
• Obramowanie: 1px solid rgba(21,190,83,0.4)
• Czcionka: 10px grubość 300

Pola Input i Formularze

• Obramowanie: 1px solid #e5edf5
• Radius: 4px
• Focus: 1px solid #533afd lub fioletowa obwódka
• Etykieta: #273951, 14px sohne-var
• Tekst: #061b31
• Placeholder: #64748d

Nawigacja

• Czysta pozioma nawigacja na białym, przyklejona z rozmytym tłem
• Logotyp marki wyrównany do lewej
• Linki: sohne-var 14px grubość 400, tekst #061b31 z "ss01"
• Radius: 6px na kontenerze nawigacji
• CTA: fioletowy przycisk wyrównany do prawej ("Sign in", "Start now")
• Mobile: przełącznik hamburger z promieniem 6px

Elementy Dekoracyjne

Przerywane Obramowania

• 1px dashed #362baa (fioletowy) dla stref zastępczych/upuszczania
• 1px dashed #ffd7ef (magenta) dla dekoracyjnych obramowań w tonacji magenty

Gradienty Akcentowe

• Gradienty od rubinu do magenty (#ea2261 do #f96bee) dla dekoracji bohaterów
• Ciemne sekcje marki używają teł #1c1e54 z białym tekstem

5. Zasady Układu

System Odstępów

• Jednostka bazowa: 8px
• Skala: 1px, 2px, 4px, 6px, 8px, 10px, 11px, 12px, 14px, 16px, 18px, 20px
• Uwaga: Skala jest gęsta przy małych wartościach (co 2px od 4–12), co odzwierciedla zorientowane na precyzję UI Stripe dla danych finansowych

Siatka i Kontener

• Maksymalna szerokość treści: około 1080px
• Bohater: wyśrodkowana pojedyncza kolumna z hojnym paddingiem, lekkie nagłówki
• Sekcje funkcji: siatki 2–3 kolumnowe dla kart funkcji
• Pełnoszerokościowe ciemne sekcje z tłem #1c1e54 dla zanurzenia w marce
• Podglądy kodu/dashboardu jako zawarte karty z cieniami z niebieskim odcieniem

Filozofia Przestrzeni

• Precyzyjne odstępy: W odróżnieniu od ogromnej pustki systemów minimalistycznych, Stripe używa mierzonej, celowej przestrzeni. Każda przerwa to świadomy wybór typograficzny.
• Gęste dane, szczodry chrome: Wyświetlenia danych finansowych (tabele, wykresy) są ściśle upakowane, ale otaczający je chrome UI jest szczodrze rozmieszczony. Tworzy to poczucie kontrolowanej gęstości — jak dobrze zorganizowany arkusz kalkulacyjny w pięknej ramce.
• Rytm sekcji: Białe sekcje przeplatają się z ciemnymi sekcjami marki (#1c1e54), tworząc dramatyczny kadencję jasne/ciemne, która zapobiega monotonii bez wprowadzania arbitralnych kolorów.

Skala Zaokrąglenia Narożników

• Mikro (1px): Drobnoziarniste elementy, subtelne zaokrąglenie
• Standardowe (4px): Przyciski, pola input, odznaki, karty — koń roboczy
• Wygodne (5px): Standardowe kontenery kart
• Luźne (6px): Nawigacja, większe elementy interaktywne
• Duże (8px): Wyróżnione karty, elementy bohaterów
• Złożone: 0px 0px 6px 6px dla kontenerów zaokrąglonych od dołu (panele zakładek, stopki rozwijane)

6. Głębia i Uniesienie

Poziom	Leczenie	Użycie
Płaski (Poziom 0)	Brak cienia	Tło strony, tekst inline
Otoczenia (Poziom 1)	rgba(23,23,23,0.06) 0px 3px 6px	Subtelne uniesienie karty, wskazówki hover
Standardowy (Poziom 2)	rgba(23,23,23,0.08) 0px 15px 35px	Standardowe karty, panele treści
Uniesiony (Poziom 3)	rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px	Wyróżnione karty, rozwijane, popovery
Głęboki (Poziom 4)	rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px	Okna modalne, pływające panele
Obwódka (Dostępność)	2px solid #533afd obrys	Obwódka fokusu klawiatury

Filozofia Cieni: System cieni Stripe opiera się na zasadzie chromatycznej głębi. Tam gdzie większość systemów projektowych używa neutralnych szarych lub czarnych cieni, podstawowy kolor cienia Stripe (rgba(50,50,93,0.25)) to głęboki niebieskoszary, który nawiązuje do granatowej palety marki. Tworzy to cienie, które nie tylko dodają głębi — dodają atmosferę marki. Wielowarstwowe podejście łączy ten cień z niebieskim odcieniem z czystą czarną warstwą drugorzędną (rgba(0,0,0,0.1)) przy innym przesunięciu, tworząc efekt paralaksy, gdzie cień z marką leży dalej od elementu, a neutralny cień bliżej. Ujemne wartości rozproszenia (-30px, -18px) zapewniają, że cienie nie rozciągają się poza footprint elementu poziomo, utrzymując uniesienie pionowe i kontrolowane.

Dekoracyjna Głębia

• Ciemne sekcje marki (#1c1e54) tworzą immersyjną głębię poprzez kontrast koloru tła
• Nakładki gradientowe z przejściami od rubinu do magenty dla dekoracji bohaterów
• Kolor cienia rgba(0,55,112,0.08) (--hds-color-shadow-sm-top) dla cieni górnej krawędzi na przyklejonych elementach

7. Co Robić i Czego Nie Robić

Robić

• Używać sohne-var z "ss01" na każdym elemencie tekstowym — zestaw stylistyczny TO jest marka
• Używać grubości 300 dla wszystkich nagłówków i tekstu treści — lekkość jest sygnaturą
• Stosować cienie z niebieskim odcieniem (rgba(50,50,93,0.25)) dla wszystkich uniesionych elementów
• Używać #061b31 (głęboki granat) dla nagłówków zamiast #000000 — ciepło ma znaczenie
• Utrzymywać zaokrąglenie narożników między 4px–8px — zachowawcze zaokrąglenie jest celowe
• Używać "tnum" dla każdego tabelarycznego/finansowego wyświetlenia liczb
• Warstwować cienie: niebieski odcień daleko + neutralny blisko dla paralaksy głębi
• Używać fioletu #533afd jako podstawowego koloru interaktywnego/CTA

Nie Robić

• Nie używać grubości 600–700 dla nagłówków sohne-var — grubość 300 to głos marki
• Nie używać dużego zaokrąglenia narożników (12px+, kształty pigułek) na kartach lub przyciskach — Stripe jest zachowawczy
• Nie używać neutralnych szarych cieni — zawsze odcień niebieski (rgba(50,50,93,...))
• Nie pomijać "ss01" na żadnym tekście sohne-var — alternatywne glify definiują osobowość
• Nie używać czystej czerni (#000000) dla nagłówków — zawsze #061b31 głęboki granat
• Nie używać ciepłych kolorów akcentowych (pomarańczowego, żółtego) dla elementów interaktywnych — fiolet jest podstawowy
• Nie stosować dodatniego odstępu liter przy rozmiarach displayowych — Stripe śledzi ciasno
• Nie używać akcentów magenty/rubinu dla przycisków lub linków — są wyłącznie dekoracyjne/gradientowe

8. Zachowanie Responsywne

Punkty Przełamania

Nazwa	Szerokość	Kluczowe Zmiany
Mobile	<640px	Pojedyncza kolumna, zmniejszone rozmiary nagłówków, ułożone karty
Tablet	640-1024px	Siatki 2-kolumnowe, umiarkowany padding
Desktop	1024-1280px	Pełny układ, 3-kolumnowe siatki funkcji
Large Desktop	>1280px	Wyśrodkowana treść z hojnymi marginesami

Obszary Dotykowe

• Przyciski używają wygodnego paddingu (8px–16px pionowo)
• Linki nawigacyjne przy 14px z odpowiednim odstępem
• Odznaki mają minimalny padding poziomy 6px dla celów dotykowych
• Przycisk przełącznika nawigacji mobilnej z promieniem 6px

Strategia Składania

• Bohater: display 56px -> 32px na mobile, grubość 300 zachowana
• Nawigacja: poziome linki + CTA -> przełącznik hamburger
• Karty funkcji: 3-kolumnowe -> 2-kolumnowe -> ułożone w jednej kolumnie
• Ciemne sekcje marki: zachowanie pełnoszerokościowego traktowania, zmniejszenie wewnętrznego paddingu
• Tabele danych finansowych: poziome przewijanie na mobile
• Odstępy sekcji: 64px+ -> 40px na mobile
• Skala typograficzna kompresuje się: rozmiary bohaterów 56px -> 48px -> 32px w różnych punktach przełamania

Zachowanie Obrazów

• Zrzuty ekranu dashboardu/produktu zachowują cień z niebieskim odcieniem we wszystkich rozmiarach
• Dekoracje gradientowe bohatera upraszczają się na mobile
• Bloki kodu zachowują traktowanie SourceCodePro, mogą przewijać się poziomo
• Obrazy kart zachowują spójne zaokrąglenie narożników 4px–6px

9. Przewodnik po Promptach dla Agenta

Szybki Podgląd Kolorów

• Podstawowe CTA: Stripe Purple (#533afd)
• Hover CTA: Purple Dark (#4434d4)
• Tło: Pure White (#ffffff)
• Tekst nagłówka: Deep Navy (#061b31)
• Tekst treści: Slate (#64748d)
• Tekst etykiety: Dark Slate (#273951)
• Obramowanie: Soft Blue (#e5edf5)
• Link: Stripe Purple (#533afd)
• Ciemna sekcja: Brand Dark (#1c1e54)
• Sukces: Green (#15be53)
• Akcent dekoracyjny: Ruby (#ea2261), Magenta (#f96bee)

Przykładowe Prompty dla Komponentów

• "Stwórz sekcję bohatera na białym tle. Nagłówek przy 48px sohne-var grubość 300, line-height 1.15, letter-spacing -0.96px, kolor #061b31, font-feature-settings 'ss01'. Podtytuł przy 18px grubość 300, line-height 1.40, kolor #64748d. Fioletowy przycisk CTA (#533afd, radius 4px, padding 8px 16px, biały tekst) i przycisk ghost (transparent, 1px solid #b9b9f9, tekst #533afd, radius 4px)."
• "Zaprojektuj kartę: białe tło, obramowanie 1px solid #e5edf5, radius 6px. Cień: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px. Tytuł przy 22px sohne-var grubość 300, letter-spacing -0.22px, kolor #061b31, 'ss01'. Treść przy 16px grubość 300, #64748d."
• "Zbuduj odznakę sukcesu: tło rgba(21,190,83,0.2), tekst #108c3d, radius 4px, padding 1px 6px, 10px sohne-var grubość 300, obramowanie 1px solid rgba(21,190,83,0.4)."
• "Stwórz nawigację: biały przyklejony nagłówek z backdrop-filter blur(12px). sohne-var 14px grubość 400 dla linków, tekst #061b31, 'ss01'. Fioletowe CTA 'Start now' wyrównane do prawej (#533afd bg, biały tekst, radius 4px). Kontener nawigacji radius 6px."
• "Zaprojektuj ciemną sekcję marki: tło #1c1e54, biały tekst. Nagłówek 32px sohne-var grubość 300, letter-spacing -0.64px, 'ss01'. Treść 16px grubość 300, rgba(255,255,255,0.7). Karty wewnątrz używają obramowania rgba(255,255,255,0.1) z radius 6px."

Przewodnik po Iteracji

1. Zawsze włączaj font-feature-settings: "ss01" na tekście sohne-var — to jest DNA typograficzne marki
2. Grubość 300 jest domyślna; używaj 400 tylko dla przycisków/linków/nawigacji
3. Formuła cienia: rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2 gdzie Y1/B1 są większe (daleki cień) a Y2/B2 mniejsze (bliski cień)
4. Kolor nagłówka to #061b31 (głęboki granat), treść to #64748d (łupek), etykiety to #273951 (ciemny łupek)
5. Zaokrąglenie narożników pozostaje w zakresie 4px–8px — nigdy nie używaj kształtów pigułek ani dużego zaokrąglenia
6. Używaj "tnum" dla dowolnych liczb w tabelach, wykresach lub wyświetleniach finansowych
7. Ciemne sekcje używają #1c1e54 — nie czarnego, nie szarego, ale głębokiego markowego indygo
8. SourceCodePro dla kodu przy 12px/500 z line-height 2.00 (bardzo hojny dla czytelności)