Vercel
Terminál vytlačený na bielom papieri
Dizajnový systém Vercel je cvičením v disciplinovanom monochromatickom režime: takmer biele plátno (#fafafa), čierne písmo, tenké okraje a úplná absencia dekoratívnej farby. Vizuálny jazyk evokuje vývojársky terminál vykreslený v tlačenej podobe – Geist Sans je v „hrdinskej“ mierke sotva čitateľný s hmotnosťou 400 – 450 a rozstupom písmen -0,06 em, zatiaľ čo Geist Mono aplikuje popisky, metadáta a vzorky kódu vo veľkých písmenách 11 – 13 px. Tlačidlá sú ostré polomery 6 px alebo obdĺžniky čisto čiernej na bielej alebo bielej na čiernej. Systém sa spolieha skôr na kontrast a typografickú hierarchiu než na farbu, pričom ako jediné prvky značky používa trojuholníkový znak (▲) a dvojriadkový slovný symbol. Povrchy sú naskladané na sebe v poradí #fafafa → #ebebeb → #171717, čím sa hĺbka vytvára zmenou tónových hodnôt, a nie tieňom alebo farbou. Každý prvok je postavený na 4px mriežke s kompaktnou hustotou, výsledkom čoho je rozhranie pripomínajúce inžiniersky zápisník – presné, funkčné a nebojace sa bieleho priestoru.
Kontajner má šírku 1280 pixelov, je vycentrovaný a má veľkorysé horizontálne odsadenie (24 – 48 pixelov). Hlavný blok používa asymetrickú trojzónovú kompozíciu: veľký nadpis vľavo, symbol značky v strede a blok „obočí“ vpravo. Pod hlavným blokom je obsah usporiadaný v striedajúcich sa pruhoch: pruh s logom klienta na celú šírku, za ktorým nasleduje dvojstĺpcová sekcia „Agent Creators“ s nadpisom vľavo a rozložením produktu vpravo, za ktorou nasleduje mriežka troch kariet s funkciami. Sekcie sú oddelené zvislými medzerami s rozmermi 96 – 128 pixelov bez oddeľovačov alebo odsadení pozadia. Navigácia tvorí jeden pevný panel s rozmermi 64 pixelov s rozmazaným pozadím. Mriežky kariet konzistentne používajú dvoj- alebo trojstĺpcové rozloženie s medzerami s rozmermi 16 – 24 pixelov. Celková hustota je kompaktná – text sa ľahko číta, je dostatok bieleho priestoru, ale veľkosť písma a veľkosti komponentov bránia tomu, aby stránka pôsobila vzdušne.
Obrázky sú riedke a vždy funkčné. Hlavným vizuálnym prvkom je čierny trojuholník (▲) – geometrický symbol značky, ktorý sa v mierke „veľkých písmen“ javí ako vznášajúca sa silueta. Logá klientov na skúšobnom páse používajú skutočné slovné označenia každej značky v odtieňoch sivej. Makety produktov (rozhranie chatu Notion, výstup terminálu CLI, pasová karta) sú vložené ako snímky obrazovky v svetelnom režime v rámci zarámovaných kariet. Neexistujú žiadne fotografie, ilustrácie ani 3D prvky – systém je čistá typografia a geometrické tvary na bielom papieri.
Paleta
Neutrálny
- Obsidian
#171717— Hlavné nadpisy, orámovanie navigácie, tmavá výplň tlačidiel a značky zoznamu sú takmer čierne, čím sa predchádza ostrosti a krikľavej sýtosti. - Paper White
#fafafa— Plátno stránky, povrchy kariet, svetlé výplne tlačidiel – to je štandardné pozadie, na ktorom sa nachádza všetko ostatné. - Pure White
#ffffff— Zvýšené povrchy kariet, vložky, vstupné polia. - Hairline
#ebebeb— Okraje tlačidiel, odkazov a kariet s hrúbkou 1 pixel sú viditeľné pri vysokých úrovniach priblíženia, ale neviditeľné pri nízkych úrovniach priblíženia. - Ash
#c9c9c9— Zakázaný text, stlmené popisky, vodoznaky s názvom značky v logách klientov. - Smoke
#a8a8a8— Sekundárny text, zástupný text, jemná výplň ikon.
Typografia
od 11 do 64px · 6 krokov
- Geist Sans — náhrada: Inter · obrysy 400, 450, 500 · Primárnym písmom pre rozhranie a nadpisy je na mieru navrhnuté geometrické bezpätkové písmo od spoločnosti Vercel s tesnými rozstupmi písmen pri veľkých veľkostiach (-0,06 em pri 56 – 64 px, -0,05 em pri 30 px). Pre nadpisy v hornej časti stránky bola zvolená hrúbka 450: hrubšia ako Light, ale svetlejšia ako Semi-Bold, čo vytvára sebavedomý, no nie panovačný tón.
- Geist Mono — náhrada: JetBrains Mono · obrysy 400, 500, 600 · Nerozmiestnené sekundárne písmo pre popisky, bloky kódu, výstupné panely CLI, metadáta a text písaný veľkými písmenami. Kombinácia 8px/600px/veľké písmená umožňuje presné umiestnenie malých slovných označení. Veľké rozstupy písmen (0,071em) v nerozmiestnenej verzii poskytujú dostatok priestoru pre text písaný veľkými písmenami.
Intervaly a forma
| Účel | Význam |
|---|---|
| Hustota | hustý |
| Základný krok | 12px |
| Polomer tlačidla | 6px |
| Polomer karty | 6px |
| Tiene | nie - okraje namiesto tieňov |
| Medzi sekciami | 96-128px |
| Šírka stránky | 1280px |
Umelá inteligencia vytvorí vašu webovú stránku v štýle Vercel a naplní ju
- Doplňte produktmi a príspevkami cez odkaz - Instagram, TikTok, Facebook.
- Preneste obsah zo svojej starej stránky – stačí zadať adresu.
- Moderný dizajn na najlepšom engine: React ( Next.js) s vykresľovaním servera a SEO optimalizáciou hneď po vybalení.
- Plne automatizovaná SEO optimalizácia pre výsledky vyhľadávania a odporúčania neurónových sietí.
Podobné štýly
- Headspace — Slnečný wellness kútik na teplom papieri
- WHOOP — Performance laboratórium o polnoci - biele klinické laboratórne stoly pod čiernou divadelnou prázdnotou, jediný fialový pulz elektriny
- Together AI — Výskumná konzola na ľadovom papieri
- v0 by Vercel — Výkres sústruhu. Presnosť a funkčnosť sú prvoradé, pričom každý prvok slúži jasnému účelu na čistom, technicky dokonalom povrchu.
- Dovetail — Plán pod čiernym mesiacom - sotva viditeľné čiary grafu, biele písmo, jedna fialová iskra
- Glideapps — monochromatický kresliaci stôl s jedným elektricky tyrkysovým trblietaním
- Timescale — Technické kreslenie na teplom milimetrovom papieri
- UGLYCASH — Zápisník s nálepkami na krémovom papieri vyžaruje atmosféru odvážneho, maximalistického fintechu, ktorý hrdo ukazuje svoj chaos.
- Sprout Social — Zelený klíčok na čiernej bridlici. Jeden jasný akcent na prísnom monochromatickom plátne, ktorého farba slúži len na dej, so sebavedomým geometrickým písmom slúžiacim ako smerovky.
- Krea — galéria noir o polnoci
- Evergreen — Solárny skleník na ľanovom papieri
- Factory — Terminál „vojenskej miestnosti“ o polnoci. „Továreň“ je strohý čierny ovládací panel, kde pristane jediná biela karta ako rozoslanie osvetlené baterkou – jediným predmetom v miestnosti je samotné dielo.