Vercel
Terminal wydrukowany na białym papierze
System projektowy Vercel to ćwiczenie w zdyscyplinowanej monochromatyczności: niemal białe płótno (#fafafa), czarna czcionka, cienkie obramowania i całkowity brak dekoracyjnych kolorów. Język wizualny przywodzi na myśl terminal programisty wydrukowany – czcionka Geist Sans jest ledwo czytelna w skali „heroicznej” z grubością 400–450 i odstępem między literami -0,06 em, podczas gdy Geist Mono stosuje etykiety, metadane i przykłady kodu w wielkich literach o wysokości 11–13 px. Przyciski to ostre prostokąty o promieniu 6 px lub prostokąty czystej czerni na białym tle lub bieli na czarnym tle. System opiera się na kontraście i hierarchii typograficznej, a nie na kolorze, wykorzystując trójkątny znak (▲) i dwuwierszowy logotyp jako jedyne elementy brandingu. Powierzchnie są układane jedna na drugiej w kolejności #fafafa → #ebebeb → #171717, tworząc głębię poprzez zmianę wartości tonalnych, a nie cienia czy koloru. Każdy element zbudowany jest na siatce 4 px o kompaktowej gęstości, dzięki czemu interfejs przypomina notatnik inżyniera — jest precyzyjny, funkcjonalny i nie boi się białej przestrzeni.
Kontener ma szerokość 1280 px, jest wyśrodkowany i posiada duże poziome marginesy (24-48 px). Główny blok wykorzystuje asymetryczną kompozycję z trzema strefami: duży nagłówek po lewej stronie, glif marki wyśrodkowany, a blok „brwi” po prawej. Poniżej głównego bloku treść jest ułożona naprzemiennie w paski: pasek pełnej szerokości z logo klienta, następnie dwukolumnowa sekcja „Agent Creators” z nagłówkiem po lewej stronie i układem produktu po prawej, a następnie siatka trzech kart z funkcjami. Sekcje są oddzielone pionowymi odstępami o szerokości 96-128 px bez separatorów ani przesunięć tła. Nawigacja to pojedynczy, stały panel o szerokości 64 px z rozmytym tłem. Siatki kart konsekwentnie wykorzystują układ dwu- lub trzykolumnowy z odstępami o szerokości 16-24 px. Ogólna gęstość jest zwarta — tekst jest czytelny, jest dużo białej przestrzeni, ale rozmiar czcionki i rozmiary komponentów sprawiają, że strona nie wydaje się przestronna.
Obrazy są oszczędne i zawsze funkcjonalne. Głównym elementem wizualnym jest czarny trójkąt (▲) – geometryczny znak marki, który pojawia się jako unosząca się sylwetka w skali „wielkich liter”. Loga klientów na pasku proof-of-concept wykorzystują rzeczywiste znaki słowne każdej marki w skali szarości. Makiety produktów (interfejs czatu Notion, dane wyjściowe terminala CLI, karta paszportowa) są osadzone jako zrzuty ekranu w trybie jasnym na kartach w ramkach. Nie ma zdjęć, ilustracji ani elementów trójwymiarowych – system to czysta typografia i geometryczne kształty na białym papierze.
Paleta
Neutralny
- Obsidian
#171717— Główne nagłówki, obramowania nawigacji, ciemne wypełnienie przycisków i znaczniki listy są prawie czarne, co pozwala uniknąć ostrości i krzykliwego nasycenia. - Paper White
#fafafa— Płótno strony, powierzchnie kart, wypełnienia świetlne przycisków — to standardowe tło, na którym znajduje się wszystko inne. - Pure White
#ffffff— Podniesione powierzchnie kart, wkładki, pola wprowadzania danych. - Hairline
#ebebeb— Obramowania o szerokości 1 piksela na przyciskach, linkach i kartach są widoczne przy dużym powiększeniu, ale niewidoczne przy małym powiększeniu. - Ash
#c9c9c9— Wyłączony tekst, wyciszone etykiety, znaki wodne z nazwą marki w logo klienta. - Smoke
#a8a8a8— Tekst dodatkowy, tekst zastępczy, subtelne wypełnienie ikony.
Typografia
od 11 do 64px · 6 kroków
- Geist Sans — wymiana: Inter · wytyczne 400, 450, 500 · Podstawowym krojem interfejsu i nagłówków jest zaprojektowana na zamówienie geometryczna czcionka bezszeryfowa firmy Vercel z niewielkimi odstępami między literami przy dużych rozmiarach (-0,06 em przy 56-64 px, -0,05 em przy 30 px). Do nagłówków u góry strony wybrano grubość 450: grubszą niż Light, ale lżejszą niż Semi-Bold, co nadaje wyrazistego, ale nie przytłaczającego charakteru.
- Geist Mono — wymiana: JetBrains Mono · wytyczne 400, 500, 600 · Czcionka drugorzędna o stałej szerokości do podpisów, bloków kodu, paneli wyjściowych CLI, metadanych i tekstu pisanego wielkimi literami. Kombinacja 8 px/600 px/wielkie litery pozwala na precyzyjne umieszczanie małych logotypów. Szerokie odstępy między literami (0,071 em) w wersji o stałej szerokości zapewniają dużo miejsca na tekst pisany wielkimi literami.
Interwały i forma
| Zamiar | Oznaczający |
|---|---|
| Gęstość | gęsty |
| Podstawowy krok | 12px |
| Promień przycisku | 6px |
| Promień karty | 6px |
| Cienie | nie - granice zamiast cieni |
| Między sekcjami | 96-128px |
| Szerokość strony | 1280px |
Sztuczna inteligencja zbuduje Twoją witrynę w stylu Vercel i wypełni ją
- Uzupełnij produktami i postami za pomocą linku - Instagram, TikTok, Facebook.
- Przenieś zawartość ze starej witryny — wystarczy podać adres.
- Nowoczesny design na najlepszym silniku: React ( Next.js) z renderowaniem serwerowym i optymalizacją SEO od razu po wyjęciu z pudełka.
- W pełni zautomatyzowana optymalizacja SEO dla wyników wyszukiwania i rekomendacje sieci neuronowych.
Podobne style
- Headspace — Słoneczny kącik wellness na ciepłym papierze
- WHOOP — Laboratorium wydajności o północy – białe kliniczne stoły laboratoryjne pod czarną, teatralną pustką, pojedynczy fioletowy impuls elektryczności
- Together AI — Konsola badawcza na papierze lodowcowym
- v0 by Vercel — Rysunek tokarki. Precyzja i funkcjonalność są najważniejsze, a każdy element ma jasno określone przeznaczenie na czystej, technicznie doskonałej powierzchni.
- Dovetail — Plan pod czarnym księżycem – ledwo widoczne linie wykresu, biała czcionka, jeden fioletowy błysk
- Glideapps — monochromatyczny stół kreślarski z jednym elektryzującym turkusowym blaskiem
- Timescale — Rysunek techniczny na ciepłym papierze milimetrowym
- UGLYCASH — Notatnik pokryty naklejkami na kremowym papierze oddaje atmosferę odważnego, maksymalistycznego fintechu, który z dumą pokazuje swój chaos.
- Sprout Social — Zielony kiełek na czarnym łupku. Jeden jasny akcent na surowym, monochromatycznym płótnie, którego kolor służy wyłącznie do wyrażania akcji, z pewnym, geometrycznym krój pisma pełniącym funkcję drogowskazów.
- Krea — galeria noir o północy
- Evergreen — Szklarnia słoneczna na papierze lnianym
- Factory — Terminal „pokoju wojennego” o północy. „Fabryka” to surowy, czarny panel sterowania, na którym pojedyncza biała karta ląduje niczym oświetlona latarką dyspozytornia – jedynym przedmiotem w pomieszczeniu jest samo dzieło.