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

System Projektowania Inspirowany Vercel

Category: Narzędzia Deweloperskie Wdrożenia frontendowe. Czarno-biała precyzja, czcionka Geist.

1. Motyw Wizualny i Atmosfera

Strona Vercel to wizualny manifest infrastruktury deweloperskiej uczynionej niewidzialną — system projektowania tak powściągliwy, że graniczy z filozoficznym. Strona jest przytłaczająco biała (#ffffff) z niemal czarnym (#171717) tekstem, tworząc galeryjną pustkę, w której każdy element zasługuje na swój piksel. To nie minimalizm jako dekoracja; to minimalizm jako zasada inżynierska. System projektowania Geist traktuje interfejs jak kompilator traktuje kod — każdy zbędny token jest usuwany, aż pozostaje wyłącznie struktura.

Rodzina czcionek Geist to klejnot koronny. Geist Sans używa agresywnego ujemnego śledzenia liter (-2,4px do -2,88px przy rozmiarach wyświetlania), tworząc nagłówki, które wyglądają na skompresowane, pilne i inżynierskie — jak kod zminifikowany do produkcji. Przy rozmiarach treści śledzenie rozluźnia się, ale geometryczna precyzja pozostaje. Geist Mono dopełnia system jako monospacowy towarzysz kodu, danych wyjściowych terminala i etykiet technicznych. Obie czcionki włączają globalnie OpenType "liga" (ligatury), dodając warstwę typograficznej wyrafinowania, która nagradza uważne czytanie.

To, co odróżnia Vercel od innych monochromatycznych systemów projektowania, to filozofia cienia-jako-obramowania. Zamiast tradycyjnych obramowań CSS, Vercel używa box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08) — cienia o zerowym przesunięciu, zerowym rozmyciu i 1px rozproszeniu, który tworzy linię podobną do obramowania bez implikacji dla modelu pudełkowego. Ta technika pozwala obramowaniom istnieć w warstwie cienia, umożliwiając płynniejsze przejścia, zaokrąglone narożniki bez przycinania i subtelniejszy wizualny ciężar niż tradycyjne obramowania. Cały system głębokości opiera się na warstwowych, wielowartościowych stosach cieni, gdzie każda warstwa służy konkretnemu celowi: jedna dla obramowania, jedna dla miękkiego uniesienia, jedna dla otaczającej głębokości.

Kluczowe Cechy Charakterystyczne:

• Geist Sans z ekstremalnym ujemnym śledzeniem liter (-2,4px do -2,88px przy wyświetlaniu) — tekst jako skompresowana infrastruktura
• Geist Mono dla kodu i etykiet technicznych z globalnym OpenType "liga"
• Technika cienia-jako-obramowania: box-shadow 0px 0px 0px 1px zastępuje tradycyjne obramowania wszędzie
• Wielowarstwowe stosy cieni dla niuansowanej głębokości (obramowanie + uniesienie + otaczające w pojedynczych deklaracjach)
• Niemal czysto biała kanwa z tekstem #171717 — nie zupełnie czarny, tworząc mikro-kontrastową miękkość
• Kolory akcentów specyficzne dla przepływu pracy: Czerwień Wysyłki (#ff5b4f), Różowy Podglądu (#de1d8d), Niebieski Dewelopmentu (#0a72ef)
• System pierścieni fokusu używający hsla(212, 100%, 48%, 1) — nasycony niebieski dla dostępności
• Znaczniki pigułkowe (9999px) z odcieniowanymi tłami dla wskaźników statusu

2. Paleta Kolorów i Role

Podstawowe

• Czerń Vercel (#171717): Podstawowy tekst, nagłówki, ciemne tła powierzchni. Nie czysta czerń — lekkie ciepło zapobiega surowości.
• Czysta Biel (#ffffff): Tło strony, powierzchnie kart, tekst przycisków na ciemnym tle.
• Prawdziwa Czerń (#000000): Użycie drugorzędne, --geist-console-text-color-default, stosowane w konkretnych kontekstach konsoli/kodu.

Kolory Akcentów Przepływu Pracy

• Czerwień Wysyłki (#ff5b4f): --ship-text, etap przepływu pracy "wyślij do produkcji" — ciepły, pilny koral-czerwień.
• Różowy Podglądu (#de1d8d): --preview-text, przepływ wdrożenia podglądu — żywy magentowo-różowy.
• Niebieski Dewelopmentu (#0a72ef): --develop-text, przepływ pracy deweloperskiej — jasny, skupiony niebieski.

Kolory Konsoli / Kodu

• Niebieski Konsoli (#0070f3): --geist-console-text-color-blue, niebieski podświetlenia składni.
• Fiolet Konsoli (#7928ca): --geist-console-text-color-purple, fiolet podświetlenia składni.
• Różowy Konsoli (#eb367f): --geist-console-text-color-pink, różowy podświetlenia składni.

Interaktywne

• Niebieski Linku (#0072f5): Podstawowy kolor linku z dekoracją podkreślenia.
• Niebieski Fokusu (hsla(212, 100%, 48%, 1)): --ds-focus-color, pierścień fokusu na elementach interaktywnych.
• Niebieski Pierścienia (rgba(147, 197, 253, 0.5)): --tw-ring-color, narzędzie pierścienia Tailwind.

Skala Neutralna

• Szary 900 (#171717): Podstawowy tekst, nagłówki, tekst nawigacji.
• Szary 600 (#4d4d4d): Tekst drugorzędny, tekst opisowy.
• Szary 500 (#666666): Tekst trzeciorzędny, przyciemnione linki.
• Szary 400 (#808080): Tekst zastępczy, stany wyłączone.
• Szary 100 (#ebebeb): Obramowania, kontury kart, separatory.
• Szary 50 (#fafafa): Subtelny odcień powierzchni, wewnętrzne podświetlenie cienia.

Powierzchnia i Nakładka

• Tło Nakładki (hsla(0, 0%, 98%, 1)): --ds-overlay-backdrop-color, tło modalnego/okna dialogowego.
• Tekst Zaznaczenia (hsla(0, 0%, 95%, 1)): --geist-selection-text-color, podświetlenie zaznaczenia tekstu.
• Tło Niebieskiej Odznaki (#ebf5ff): Tło znacznika pigułkowego, odcieniowana niebieska powierzchnia.
• Tekst Niebieskiej Odznaki (#0068d6): Tekst znacznika pigułkowego, ciemniejszy niebieski dla czytelności.

Cienie i Głębokość

• Cień Obramowania (rgba(0, 0, 0, 0.08) 0px 0px 0px 1px): Charakterystyczny — zastępuje tradycyjne obramowania.
• Subtelne Uniesienie (rgba(0, 0, 0, 0.04) 0px 2px 2px): Minimalne uniesienie dla kart.
• Stos Kart (rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, rgba(0,0,0,0.04) 0px 8px 8px -8px, #fafafa 0px 0px 0px 1px): Pełny wielowarstwowy cień karty.
• Obramowanie Pierścieniowe (rgb(235, 235, 235) 0px 0px 0px 1px): Jasnoszare obramowanie pierścieniowe dla zakładek i obrazów.

3. Zasady Typografii

Rodzina Czcionek

• Podstawowa: Geist, z zamiennikami: Arial, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol
• Monospacowa: Geist Mono, z zamiennikami: ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Liberation Mono, DejaVu Sans Mono, Courier New
• Funkcje OpenType: "liga" włączone globalnie na całym tekście Geist; "tnum" dla tabelarycznych liczb na konkretnych podpisach.

Hierarchia

Rola	Czcionka	Rozmiar	Grubość	Wysokość Linii	Odstęp Liter	Uwagi
Główny Wyświetlacz	Geist	48px (3.00rem)	600	1.00–1.17 (ciasno)	-2.4px do -2.88px	Maksymalna kompresja, efekt billboardowy
Nagłówek Sekcji	Geist	40px (2.50rem)	600	1.20 (ciasno)	-2.4px	Tytuły sekcji funkcji
Duży Podnagłówek	Geist	32px (2.00rem)	600	1.25 (ciasno)	-1.28px	Nagłówki kart, podsekcje
Podnagłówek	Geist	32px (2.00rem)	400	1.50	-1.28px	Lżejsze podnagłówki
Tytuł Karty	Geist	24px (1.50rem)	600	1.33	-0.96px	Karty funkcji
Lekki Tytuł Karty	Geist	24px (1.50rem)	500	1.33	-0.96px	Drugorzędne nagłówki kart
Duże Ciało	Geist	20px (1.25rem)	400	1.80 (rozluźnione)	normal	Wprowadzenia, opisy funkcji
Ciało	Geist	18px (1.13rem)	400	1.56	normal	Standardowy tekst do czytania
Małe Ciało	Geist	16px (1.00rem)	400	1.50	normal	Standardowy tekst UI
Średnie Ciało	Geist	16px (1.00rem)	500	1.50	normal	Nawigacja, podkreślony tekst
Półgrube Ciało	Geist	16px (1.00rem)	600	1.50	-0.32px	Mocne etykiety, aktywne stany
Przycisk / Link	Geist	14px (0.88rem)	500	1.43	normal	Przyciski, linki, podpisy
Mały Przycisk	Geist	14px (0.88rem)	400	1.00 (ciasno)	normal	Kompaktowe przyciski
Podpis	Geist	12px (0.75rem)	400–500	1.33	normal	Metadane, tagi
Mono Ciało	Geist Mono	16px (1.00rem)	400	1.50	normal	Bloki kodu
Mono Podpis	Geist Mono	13px (0.81rem)	500	1.54	normal	Etykiety kodu
Mono Małe	Geist Mono	12px (0.75rem)	500	1.00 (ciasno)	normal	text-transform: uppercase, etykiety techniczne
Mikro Odznaka	Geist	7px (0.44rem)	700	1.00 (ciasno)	normal	text-transform: uppercase, małe odznaki

Zasady

• Kompresja jako tożsamość: Geist Sans przy rozmiarach wyświetlania używa odstępu liter -2,4px do -2,88px — najbardziej agresywne ujemne śledzenie spośród wszystkich głównych systemów projektowania. Tworzy to tekst, który czuje się zminifikowany, jak kod zoptymalizowany do produkcji. Śledzenie stopniowo rozluźnia się wraz ze zmniejszaniem rozmiaru: -1,28px przy 32px, -0,96px przy 24px, -0,32px przy 16px, a normal przy 14px.
• Ligatury wszędzie: Każdy element tekstowy Geist włącza OpenType "liga". Ligatury nie są dekoracją — są strukturalne, tworząc ciaśniejsze, bardziej efektywne kombinacje glifów.
• Trzy grubości, ściśle określone role: 400 (ciało/czytanie), 500 (UI/interaktywne), 600 (nagłówki/podkreślenie). Brak pogrubienia (700) poza małymi mikro-odznakami. Ten wąski zakres grubości tworzy hierarchię poprzez rozmiar i śledzenie, a nie grubość.
• Mono dla tożsamości: Geist Mono pisane wielkimi literami z "tnum" lub "liga" służy jako głos "konsoli deweloperskiej" — kompaktowe etykiety techniczne łączące stronę marketingową z produktem.

4. Stylizacje Komponentów

Przyciski

Podstawowy Biały (Z Obramowaniem Cieniowym)

• Tło: #ffffff
• Tekst: #171717
• Wypełnienie: 0px 6px (minimalne — szerokość uzależniona od treści)
• Promień: 6px (delikatnie zaokrąglony)
• Cień: rgb(235, 235, 235) 0px 0px 0px 1px (obramowanie pierścieniowe)
• Po najechaniu: tło zmienia się na var(--ds-gray-1000) (ciemne)
• Fokus: kontur 2px solid var(--ds-focus-color) + cień var(--ds-focus-ring)
• Zastosowanie: Standardowy przycisk drugorzędny

Podstawowy Ciemny (Wywnioskowany z systemu Geist)

• Tło: #171717
• Tekst: #ffffff
• Wypełnienie: 8px 16px
• Promień: 6px
• Zastosowanie: Główne wezwanie do działania ("Start Deploying", "Get Started")

Przycisk Pigułkowy / Odznaka

• Tło: #ebf5ff (odcieniony niebieski)
• Tekst: #0068d6
• Wypełnienie: 0px 10px
• Promień: 9999px (pełna pigułka)
• Czcionka: 12px grubość 500
• Zastosowanie: Odznaki statusu, tagi, etykiety funkcji

Duża Pigułka (Nawigacja)

• Tło: przezroczyste lub #171717
• Promień: 64px–100px
• Zastosowanie: Nawigacja zakładkowa, selektory sekcji

Karty i Kontenery

• Tło: #ffffff
• Obramowanie: poprzez cień — rgba(0, 0, 0, 0.08) 0px 0px 0px 1px
• Promień: 8px (standardowy), 12px (wyróżnione/karty z obrazem)
• Stos cieni: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px
• Karty z obrazem: 1px solid #ebebeb z górnym promieniem 12px
• Po najechaniu: subtelne intensyfikowanie cienia

Pola Wejściowe i Formularze

• Przycisk radiowy: standardowa stylizacja z tłem var(--ds-gray-200) przy fokusu
• Cień fokusu: 1px 0 0 0 var(--ds-gray-alpha-600)
• Kontur fokusu: 2px solid var(--ds-focus-color) — spójny niebieski pierścień fokusu
• Obramowanie: poprzez technikę cieniową, nie tradycyjne obramowanie

Nawigacja

• Czysta pozioma nawigacja na białym tle, przyklejona
• Logotyp Vercel wyrównany do lewej, 262x52px
• Linki: Geist 14px grubość 500, tekst #171717
• Aktywny: grubość 600 lub podkreślenie
• Wezwanie do działania: ciemne przyciski pigułkowe ("Start Deploying", "Contact Sales")
• Urządzenia mobilne: zwijane menu hamburgerowe
• Rozwijane menu produktów z wielopoziomowymi menu

Obróbka Obrazów

• Zrzuty ekranu produktu z obramowaniem 1px solid #ebebeb
• Obrazy zaokrąglone u góry: promień 12px 12px 0px 0px
• Zrzuty ekranu pulpitu/kodu zdominują sekcje funkcji
• Miękkie gradientowe tła za obrazami bohaterskimi (pastelowe wielokolorowe)

Charakterystyczne Komponenty

Potok Przepływu Pracy

• Trzyetapowy poziomy potok: Develop → Preview → Ship
• Każdy etap ma własny kolor akcentu: Niebieski → Różowy → Czerwony
• Połączone liniami/strzałkami
• Wizualna metafora dla głównej propozycji wartości Vercel

Pasek Zaufania / Siatka Logo

• Logo firm (Perplexity, ChatGPT, Cursor itp.) w skali szarości
• Poziome przewijanie lub układ siatki
• Subtelne rozdzielenie obramowaniem #ebebeb

Karty Metryk

• Wyświetlanie dużej liczby (np. "10x szybciej")
• Geist 48px grubość 600 dla metryki
• Poniżej opis w szarym tekście treści
• Kontener karty z obramowaniem cieniowym

5. Zasady Układu

System Odstępów

• Jednostka podstawowa: 8px
• Skala: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 16px, 32px, 36px, 40px
• Godny uwagi skok: przejście z 16px do 32px — brak 20px ani 24px w skali podstawowej

Siatka i Kontener

• Maksymalna szerokość treści: około 1200px
• Bohater: wyśrodkowana pojedyncza kolumna z hojnym górnym wypełnieniem
• Sekcje funkcji: siatki 2–3 kolumn dla kart
• Pełnoszerokie separatory używające border-bottom: 1px solid #171717
• Zrzuty ekranu kodu/pulpitu jako pełnoszerokie lub zawarte z obramowaniem

Filozofia Białej Przestrzeni

• Pustka galeryjna: Masywne pionowe wypełnienie między sekcjami (80px–120px+). Biała przestrzeń JEST projektem — komunikuje, że Vercel nie ma nic do udowodnienia ani ukrycia.
• Skompresowany tekst, rozszerzona przestrzeń: Agresywne ujemne śledzenie liter w nagłówkach jest zrównoważone hojną otaczającą białą przestrzenią. Tekst jest gęsty; przestrzeń wokół niego jest rozległa.
• Rytm sekcji: Białe sekcje przeplatają się z białymi sekcjami — między sekcjami nie ma zróżnicowania kolorystycznego. Separacja pochodzi wyłącznie z obramowań (cieni-obramowań) i odstępów.

Skala Promieni Obramowania

• Mikro (2px): Fragmenty kodu inline, małe spany
• Subtelny (4px): Małe kontenery
• Standardowy (6px): Przyciski, linki, elementy funkcjonalne
• Wygodny (8px): Karty, elementy listy
• Obraz (12px): Wyróżnione karty, kontenery obrazów (zaokrąglone u góry)
• Duży (64px): Pigułki nawigacji zakładkowej
• XL (100px): Duże linki nawigacyjne
• Pełna Pigułka (9999px): Odznaki, pigułki statusu, tagi
• Okrąg (50%): Przełącznik menu, kontenery awatarów

6. Głębokość i Uniesienie

Poziom	Obróbka	Zastosowanie
Płaski (Poziom 0)	Brak cienia	Tło strony, bloki tekstowe
Pierścień (Poziom 1)	rgba(0,0,0,0.08) 0px 0px 0px 1px	Cień-jako-obramowanie dla większości elementów
Jasny Pierścień (Poziom 1b)	rgb(235,235,235) 0px 0px 0px 1px	Jaśniejszy pierścień dla zakładek, obrazów
Subtelna Karta (Poziom 2)	Pierścień + rgba(0,0,0,0.04) 0px 2px 2px	Standardowe karty z minimalnym uniesieniem
Pełna Karta (Poziom 3)	Pierścień + Subtelny + rgba(0,0,0,0.04) 0px 8px 8px -8px + wewnętrzny pierścień #fafafa	Wyróżnione karty, podświetlone panele
Fokus (Dostępność)	kontur 2px solid hsla(212, 100%, 48%, 1)	Fokus klawiatury na wszystkich elementach interaktywnych

Filozofia Cienia: Vercel posiada prawdopodobnie najbardziej wyrafinowany system cieni we współczesnym projektowaniu webowym. Zamiast używać cieni dla uniesienia w tradycyjnym sensie Material Design, Vercel używa wielowartościowych stosów cieni, gdzie każda warstwa ma odrębny cel architektoniczny: jedna tworzy "obramowanie" (0px rozproszenie, 1px), inna dodaje otaczającą miękkość (rozmycie 2px), jeszcze inna obsługuje głębokość na odległość (rozmycie 8px z ujemnym rozproszeniem), a wewnętrzny pierścień (#fafafa) tworzy subtelne podświetlenie sprawiające, że karta "świeci" od wewnątrz. To warstwowe podejście sprawia, że karty wyglądają na zbudowane, a nie unoszące się.

Ozdobna Głębokość

• Gradient bohatera: miękka, pastelowa wielokolorowa mgiełka gradientowa za treścią bohatera (ledwo widoczna, atmosferyczna)
• Obramowania sekcji: 1px solid #171717 (pełna ciemna linia) między głównymi sekcjami
• Brak zróżnicowania kolorystycznego tła — głębokość pochodzi wyłącznie z warstwowania cieni i kontrastu obramowań

7. Co Robić i Czego Nie Robić

Co Robić

• Używaj Geist Sans z agresywnym ujemnym śledzeniem liter przy rozmiarach wyświetlania (-2,4px do -2,88px przy 48px)
• Używaj cienia-jako-obramowania (0px 0px 0px 1px rgba(0,0,0,0.08)) zamiast tradycyjnych obramowań CSS
• Włączaj "liga" na całym tekście Geist — ligatury są strukturalne, nie opcjonalne
• Używaj systemu trzech grubości: 400 (ciało), 500 (UI), 600 (nagłówki)
• Stosuj kolory akcentów przepływu pracy (Czerwony/Różowy/Niebieski) tylko w ich kontekście przepływu pracy
• Używaj wielowarstwowych stosów cieni dla kart (obramowanie + uniesienie + otaczające + wewnętrzne podświetlenie)
• Utrzymuj paletę kolorów achromatyczną — odcienie szarości od #171717 do #ffffff są systemem
• Używaj #171717 zamiast #000000 dla podstawowego tekstu — mikro-ciepłota ma znaczenie

Czego Nie Robić

• Nie używaj dodatniego śledzenia liter na Geist Sans — jest zawsze ujemne lub zerowe
• Nie używaj grubości 700 (pogrubienie) na tekście treści — 600 jest maksimum, używane tylko dla nagłówków
• Nie używaj tradycyjnego CSS border na kartach — używaj techniki cienia-obramowania
• Nie wprowadzaj ciepłych kolorów (pomarańczowych, żółtych, zielonych) do interfejsu użytkownika
• Nie stosuj kolorów akcentów przepływu pracy (Czerwień Wysyłki, Różowy Podglądu, Niebieski Dewelopmentu) dekoracyjnie
• Nie używaj ciężkich cieni (> 0,1 krycia) — system cieni jest na poziomie szeptu
• Nie zwiększaj odstępu liter tekstu treści — Geist jest zaprojektowany do ciasnego biegu
• Nie używaj promienia pigułki (9999px) na głównych przyciskach akcji — pigułki są tylko dla odznak/tagów
• Nie pomijaj wewnętrznego pierścienia #fafafa w cieniach kart — to blask, który sprawia, że system działa

8. Zachowanie Responsywne

Punkty Przerwania

Nazwa	Szerokość	Kluczowe Zmiany
Małe Urządzenie Mobilne	<400px	Ciasna pojedyncza kolumna, minimalne wypełnienie
Urządzenie Mobilne	400–600px	Standardowe mobilne, układ stosowany
Mały Tablet	600–768px	Siatki 2-kolumnowe zaczynają się
Tablet	768–1024px	Pełne siatki kart, rozszerzone wypełnienie
Mały Desktop	1024–1200px	Standardowy układ desktopowy
Desktop	1200–1400px	Pełny układ, maksymalna szerokość treści
Duży Desktop	>1400px	Wyśrodkowany, hojne marginesy

Cele Dotykowe

• Przyciski używają wygodnego wypełnienia (8px–16px pionowo)
• Linki nawigacyjne przy 14px z odpowiednimi odstępami
• Odznaki pigułkowe mają 10px poziomego wypełnienia dla celów dotykowych
• Przełącznik menu mobilnego używa okrągłego przycisku z promieniem 50%

Strategia Zwijania

• Bohater: wyświetlacz 48px → skaluje się w dół, zachowując ujemne śledzenie proporcjonalnie
• Nawigacja: poziome linki + wezwania do działania → menu hamburgerowe
• Karty funkcji: 3-kolumnowe → 2-kolumnowe → pojedyncza kolumna stosowana
• Zrzuty ekranu kodu: zachowują proporcje, mogą przewijać się poziomo
• Logo paska zaufania: siatka → poziome przewijanie
• Stopka: wielokolumnowa → stosowana pojedyncza kolumna
• Odstępy sekcji: 80px+ → 48px na urządzeniach mobilnych

Zachowanie Obrazów

• Zrzuty ekranu pulpitu zachowują obróbkę obramowania we wszystkich rozmiarach
• Gradient bohatera mięknie/upraszcza się na urządzeniach mobilnych
• Zrzuty ekranu produktu używają responsywnych obrazów ze spójnym promieniem obramowania
• Sekcje pełnoszerokie zachowują obróbkę od krawędzi do krawędzi

9. Przewodnik po Promptach dla Agenta

Szybka Referencyjna Paleta Kolorów

• Główne wezwanie do działania: Czerń Vercel (#171717)
• Tło: Czysta Biel (#ffffff)
• Tekst nagłówków: Czerń Vercel (#171717)
• Tekst treści: Szary 600 (#4d4d4d)
• Obramowanie (cień): rgba(0, 0, 0, 0.08) 0px 0px 0px 1px
• Link: Niebieski Linku (#0072f5)
• Pierścień fokusu: Niebieski Fokusu (hsla(212, 100%, 48%, 1))

Przykładowe Prompty Komponentów

• "Utwórz sekcję bohatera na białym tle. Nagłówek przy 48px Geist grubość 600, wysokość linii 1.00, odstęp liter -2.4px, kolor #171717. Podtytuł przy 20px Geist grubość 400, wysokość linii 1.80, kolor #4d4d4d. Ciemny przycisk wezwania do działania (#171717, promień 6px, wypełnienie 8px 16px) i przycisk ghost (biały, cień-obramowanie rgba(0,0,0,0.08) 0px 0px 0px 1px, promień 6px)."
• "Zaprojektuj kartę: białe tło, bez obramowania CSS. Użyj stosu cieni: rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px. Promień 8px. Tytuł przy 24px Geist grubość 600, odstęp liter -0.96px. Treść przy 16px grubość 400, #4d4d4d."
• "Zbuduj odznakę pigułkową: tło #ebf5ff, tekst #0068d6, promień 9999px, wypełnienie 0px 10px, 12px Geist grubość 500."
• "Utwórz nawigację: biały przyklejony nagłówek. Geist 14px grubość 500 dla linków, tekst #171717. Ciemne wezwanie do działania pigułkowe 'Start Deploying' wyrównane do prawej. Cień-obramowanie na dole: rgba(0,0,0,0.08) 0px 0px 0px 1px."
• "Zaprojektuj sekcję przepływu pracy pokazującą trzy etapy: Develop (kolor tekstu #0a72ef), Preview (#de1d8d), Ship (#ff5b4f). Każdy etap: etykieta uppercase 14px Geist Mono + tytuł 24px Geist grubość 600 + opis 16px grubość 400 w #4d4d4d."

Przewodnik po Iteracji

1. Zawsze używaj cienia-jako-obramowania zamiast obramowania CSS — 0px 0px 0px 1px rgba(0,0,0,0.08) jest fundamentem
2. Odstęp liter skaluje się z rozmiarem czcionki: -2,4px przy 48px, -1,28px przy 32px, -0,96px przy 24px, normal przy 14px
3. Tylko trzy grubości: 400 (czytanie), 500 (interakcja), 600 (ogłaszanie)
4. Kolor jest funkcjonalny, nigdy dekoracyjny — kolory przepływu pracy (Czerwony/Różowy/Niebieski) oznaczają tylko etapy potoku
5. Wewnętrzny pierścień #fafafa w cieniach kart to to, co nadaje kartom Vercel ich subtelny wewnętrzny blask
6. Geist Mono pisane wielkimi literami dla etykiet technicznych, Geist Sans do wszystkiego innego