Vercel
Terminál vytištěný na bílém papíře
Designový systém Vercel je cvičením v disciplinovaném monochromatickém režimu: téměř bílé plátno (#fafafa), černé písmo, tenké okraje a naprostá absence dekorativních barev. Vizuální jazyk evokuje vývojářský terminál vytištěný v tištěné podobě – Geist Sans je v „hrdinském“ měřítku sotva čitelný s vahou 400–450 a roztečí písmen -0,06 em, zatímco Geist Mono aplikuje popisky, metadata a ukázky kódu ve velkých písmenech 11–13 pixelů. Tlačítka jsou ostré poloměry 6 pixelů nebo obdélníky čistě černé na bílé nebo bílé na černé. Systém se spoléhá spíše na kontrast a typografickou hierarchii než na barvu a jako jediné prvky brandingu používá trojúhelníkový znak (▲) a dvouřádkový slovní symbol. Povrchy jsou naskládány na sebe v pořadí #fafafa → #ebebeb → #171717, čímž se hloubka vytváří změnou tónových hodnot spíše než stínu nebo barvy. Každý prvek je postaven na 4px mřížce s kompaktní hustotou, což vede k rozhraní připomínajícímu inženýrský zápisník – přesné, funkční a nebojí se bílého prostoru.
Kontejner má šířku 1280 pixelů, je vycentrovaný a má velkorysé horizontální odsazení (24–48 pixelů). Hlavní blok využívá asymetrickou třízónovou kompozici: velký nadpis vlevo, symbol značky uprostřed a blok s „obočím“ vpravo. Pod hlavním blokem je obsah uspořádán ve střídavých pruzích: pruh s logem klienta v celé šířce, následovaný dvousloupcovou sekcí „Agent Creators“ s nadpisem vlevo a rozvržením produktu vpravo, následovanou mřížkou tří karet s funkcemi. Sekce jsou odděleny svislými mezerami o šířce 96–128 pixelů bez oddělovačů nebo odsazení pozadí. Navigace je tvořena jedním pevným panelem o velikosti 64 pixelů s rozmazaným pozadím. Mřížky karet konzistentně používají dvou- nebo třísloupcové rozvržení s mezerami o šířce 16–24 pixelů. Celková hustota je kompaktní – text se snadno čte, je zde dostatek bílého prostoru, ale velikost písma a velikosti komponent brání tomu, aby stránka působila vzdušně.
Obrázky jsou řídké a vždy funkční. Hlavním vizuálním prvkem je černý trojúhelník (▲) – geometrický symbol značky, který se v měřítku „velkých písmen“ jeví jako vznášející se silueta. Loga klientů na prospektu používají skutečná slovní označení jednotlivých značek v odstínech šedi. Makety produktů (chatové rozhraní Notion, výstup terminálu CLI, pasová karta) jsou vloženy jako snímky obrazovky ve světlém režimu v zarámovaných kartách. Nejsou zde žádné fotografie, ilustrace ani 3D prvky – systém je čistě typografický a geometrický na bílém papíře.
Paleta
Neutrální
- Obsidian
#171717— Hlavní nadpisy, ohraničení navigace, tmavá výplň tlačítek a značky seznamu jsou téměř černé, čímž se zabrání drsnosti a křiklavé sytosti. - Paper White
#fafafa— Plátno stránky, povrchy karet, světlé výplně tlačítek – to je standardní pozadí, na kterém se nachází vše ostatní. - Pure White
#ffffff— Zvýšené plochy karet, vložky, vstupní pole. - Hairline
#ebebeb— Okraje tlačítek, odkazů a karet o tloušťce 1px jsou viditelné při vysokých úrovních přiblížení, ale neviditelné při nízkých úrovních přiblížení. - Ash
#c9c9c9— Zakázaný text, ztlumené popisky, vodoznaky s názvy značek v logech klientů. - Smoke
#a8a8a8— Sekundární text, zástupný text, jemná výplň ikon.
Typografie
od 11 do 64 pixelů · 6 kroků
- Geist Sans — nahrazení: Inter · obrysy 400, 450, 500 · Primárním písmem pro rozhraní a nadpisy je na míru navržené geometrické bezpatkové písmo od Vercelu s malými roztečemi písmen u velkých velikostí (-0,06 em při 56–64 px, -0,05 em při 30 px). Pro nadpisy v horní části stránky byla zvolena tloušťka 450: silnější než Light, ale lehčí než Semi-Bold, což vytváří sebevědomý, ale ne panovačný tón.
- Geist Mono — nahrazení: JetBrains Mono · obrysy 400, 500, 600 · Neproporcionální sekundární písmo pro popisky, bloky kódu, výstupní panely CLI, metadata a text psaný velkými písmeny. Kombinace 8px/600px/velká písmena umožňuje přesné umístění drobných slovních znaků. Široké rozteče písmen (0,071em) v neproporcionální verzi poskytují dostatek prostoru pro text psaný velkými písmeny.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | hustý |
| Základní krok | 12px |
| Poloměr tlačítka | 6px |
| Poloměr karty | 6px |
| Stíny | ne - okraje místo stínů |
| Mezi sekcemi | 96-128px |
| Šířka stránky | 1280px |
Umělá inteligence vám vytvoří web ve stylu Vercel a naplní ho
- Doplňujte produkty a příspěvky přes odkaz - Instagram, TikTok, Facebook.
- Přeneste obsah ze starého webu – stačí zadat adresu.
- Moderní design na nejlepším enginu: React ( Next.js) s renderováním na serveru a SEO optimalizací ihned po vybalení.
- Plně automatizovaná SEO optimalizace pro výsledky vyhledávání a doporučení neuronových sítí.
Podobné styly
- Headspace — Slunečný wellness koutek na teplém papíře
- WHOOP — Performance Laboratory o půlnoci - bílé klinické laboratorní stoly pod černou divadelní prázdnotou, jediný fialový puls elektřiny
- Together AI — Výzkumná konzole na ledovcovém papíře
- v0 by Vercel — Výkres soustruhu. Preciznost a funkčnost jsou prvořadé, přičemž každý prvek slouží jasnému účelu na čistém, technicky dokonalém povrchu.
- Dovetail — Plán pod černým měsícem – sotva viditelné čáry grafu, bílé písmo, jedna fialová jiskra
- Glideapps — monochromatický rýsovací stůl s jedním elektrickým tyrkysovým třpytem
- Timescale — Technické kreslení na teplém milimetrovém papíru
- UGLYCASH — Zápisník s nálepkami na krémovém papíře vyzařuje atmosféru odvážného, maximalistického fintechu, který hrdě dává najevo svůj chaos.
- Sprout Social — Zelený výhonek na černé břidlici. Jeden jasný akcent na striktním monochromatickém plátně, jehož barva slouží pouze k promítání děje, s jistým geometrickým písmem sloužícím jako ukazatel.
- Krea — galerie noir o půlnoci
- Evergreen — Solární skleník na lněném papíře
- Factory — Terminál „válečné místnosti“ o půlnoci. „Továrna“ je ostře černý ovládací panel, kde přistane jediná bílá karta jako zpráva osvětlená baterkou – jediným předmětem v místnosti je samotné dílo.