Vercel
Terminal ispisan na bijelom papiru
Vercel dizajnerski sustav je vježba discipliniranog monokroma: gotovo bijelo platno (#fafafa), crni font, tanki obrubi i potpuni nedostatak dekorativne boje. Vizualni jezik evocira terminal programera prikazan u tisku - Geist Sans je jedva čitljiv na "herojskoj" skali s težinom od 400-450 i razmakom između slova od -0,06em, dok Geist Mono primjenjuje oznake, metapodatke i uzorke koda velikim slovima od 11-13px. Gumbi su oštri radijusi od 6px ili pravokutnici čisto crne na bijeloj ili bijele na crnoj. Sustav se oslanja na kontrast i tipografsku hijerarhiju, a ne na boju, koristeći trokutasti znak (▲) i dvolinijski tekst kao jedine elemente brendiranja. Površine su naslagane jedna na drugu redoslijedom #fafafa → #ebebeb → #171717, stvarajući dubinu promjenom tonskih vrijednosti, a ne sjene ili boje. Svaki element izgrađen je na mreži od 4px s kompaktnom gustoćom, što rezultira sučeljem koje podsjeća na inženjersku bilježnicu - precizno, funkcionalno i bez straha od bijelog prostora.
Spremnik je širok 1280px, centriran, s velikodušnim horizontalnim padom (24-48px). Glavni blok koristi asimetričnu kompoziciju s tri zone: veliki naslov s lijeve strane, centriran glif brenda i blok "obrve" s desne strane. Ispod glavnog bloka, sadržaj je raspoređen u naizmjeničnim prugama: pruga pune širine s logotipom klijenta, nakon čega slijedi odjeljak "Agent Creators" s dva stupca s naslovom s lijeve strane i rasporedom proizvoda s desne strane, nakon čega slijedi mreža od tri kartice sa značajkama. Odjeljci su odvojeni vertikalnim žljebovima od 96-128px bez razdjelnika ili pomaka pozadine. Navigacija je jedna fiksna ploča od 64px sa zamućenom pozadinom. Mreže kartica dosljedno koriste raspored s dva ili tri stupca s žljebovima od 16-24px. Ukupna gustoća je kompaktna - tekst je lako čitljiv, ima dovoljno bijelog prostora, ali veličina fonta i veličine komponenti sprječavaju da stranica djeluje prozračno.
Slike su rijetke i uvijek funkcionalne. Glavni vizualni element je crni trokut (▲) - geometrijski znak robne marke koji se pojavljuje kao lebdeća silueta u mjerilu "velikog slova". Logotipi klijenata na traci za provjeru koncepta koriste stvarne slovne znakove svake robne marke u sivim tonovima. Nacrti proizvoda (Notionovo sučelje za chat, izlaz CLI terminala, putovnica) ugrađeni su kao snimke zaslona u svijetlom načinu rada unutar uokvirenih kartica. Nema fotografija, ilustracija ili 3D elemenata - sustav je čista tipografija i geometrijski oblici na bijelom papiru.
Paleta
Neutralno
- Obsidian
#171717— Glavni naslovi, okviri navigacije, tamno ispunjavanje gumba i oznake popisa gotovo su crne boje, izbjegavajući oštrinu i drečavu zasićenost. - Paper White
#fafafa— Platno stranice, površine kartica, svijetle ispune gumba - to je standardna pozadina na kojoj se nalazi sve ostalo. - Pure White
#ffffff— Povišene površine kartica, umetci, polja za unos. - Hairline
#ebebeb— Rubovi od 1px na gumbima, poveznicama i karticama vidljivi su pri visokim razinama zumiranja, ali nevidljivi pri niskim razinama zumiranja. - Ash
#c9c9c9— Onemogućen tekst, prigušene oznake, vodeni žigovi robnih marki u logotipima klijenata. - Smoke
#a8a8a8— Sekundarni tekst, tekst rezerviranog mjesta, suptilno ispunjavanje ikonama.
Tipografija
od 11 do 64px · 6 koraka
- Geist Sans — zamjena: Inter · obrisi 400, 450, 500 · Primarni font za sučelje i naslove je posebno dizajniran geometrijski sans-serif od Vercela s uskim razmakom između slova pri velikim veličinama (-0,06 em na 56-64 px, -0,05 em na 30 px). Za naslove na vrhu stranice odabrana je debljina 450: deblja od Light, ali lakša od Semi-Bold, stvarajući samouvjeren, ali ne i nametljiv ton.
- Geist Mono — zamjena: JetBrains Mono · obrisi 400, 500, 600 · Sekundarni font s jednostrukim razmakom za opise, blokove koda, izlazne ploče CLI-ja, metapodatke i tekst napisan velikim slovima. Kombinacija 8px/600px/velikih slova omogućuje precizno postavljanje sitnih znakova riječi. Široki razmak između slova (0,071em) u verziji s jednostrukim razmakom pruža dovoljno prostora za tekst napisan velikim slovima.
Intervali i forma
| Svrha | Značenje |
|---|---|
| Gustoća | gust |
| Osnovni korak | 12px |
| Radijus gumba | 6px |
| Radijus kartice | 6px |
| Sjene | ne - obrubi umjesto sjena |
| Između odjeljaka | 96-128px |
| Širina stranice | 1280px |
Umjetna inteligencija će izraditi vašu web stranicu u Vercel stilu i ispuniti je
- Popunite proizvodima i objavama putem poveznice - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa svoje stare web-lokacije - samo navedite adresu.
- Moderan dizajn na najboljem engineu: React ( Next.js) s renderiranjem na serveru i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretraživanja i preporuke neuronskih mreža.
Slični stilovi
- Headspace — Sunčani kutak za dobrobit na toplom papiru
- WHOOP — Laboratorij za performanse u ponoć - bijeli klinički laboratorijski stolovi pod crnom kazališnom prazninom, jedan ljubičasti puls električne energije
- Together AI — Istraživačka konzola na glacijalnom papiru
- v0 by Vercel — Crtanje na tokarilici. Preciznost i funkcionalnost su najvažnije, pri čemu svaki element služi jasnoj svrsi na čistoj, tehnički savršenoj površini.
- Dovetail — Nacrt pod crnim mjesecom - jedva vidljive linije grafikona, bijeli font, jedna ljubičasta iskra
- Glideapps — monokromatski stol za crtanje s jednim električno tirkiznim sjajem
- Timescale — Inženjerski crtež na toplom milimetarskom papiru
- UGLYCASH — Bilježnica prekrivena naljepnicama na krem papiru odiše ambijentom smjelog, maksimalističkog fintecha koji ponosno pokazuje svoj kaos.
- Sprout Social — Zelena klica na crnom škriljevcu. Jedan svijetli naglasak na strogom monokromatskom platnu, čija se boja koristi samo za akciju, s pouzdanim geometrijskim fontom koji služi kao putokaz.
- Krea — galerija noir u ponoć
- Evergreen — Solarni staklenik na lanenom papiru
- Factory — Terminal "ratne sobe" u ponoć. "Tvornica" je potpuno crna kontrolna ploča na koju sleti jedna bijela kartica poput depeše osvijetljene baterijskom lampom - jedini predmet u sobi je sam rad.