Vercel
Terminal odštampan na bijelom papiru
Vercel sistem dizajna je vježba disciplinovanog monohroma: gotovo bijelo platno (#fafafa), crni font, tanke ivice i potpuno odsustvo dekorativne boje. Vizuelni jezik podsjeća na terminal programera prikazan u štampi - Geist Sans je jedva čitljiv na "herojskoj" skali sa težinom od 400-450 i razmakom između slova od -0,06em, dok Geist Mono primjenjuje oznake, metapodatke i primjere koda velikim slovima od 11-13px. Dugmad su oštri radijusi od 6px ili pravougaonici čisto crne na bijeloj ili bijele na crnoj. Sistem se oslanja na kontrast i tipografsku hijerarhiju, a ne na boju, koristeći trouglasti znak (▲) i dvolinijski slovni znak 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 je izgrađen na mreži od 4px s kompaktnom gustoćom, što rezultira interfejsom koji podsjeća na inženjersku bilježnicu - precizan, funkcionalan i bez straha od bijelog prostora.
Kontejner je širok 1280px, centriran, s velikodušnim horizontalnim paddingom (24-48px). Glavni blok koristi asimetričnu kompoziciju s tri zone: veliki naslov s lijeve strane, simbol brenda centriran 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 dvije kolone s naslovom s lijeve strane i rasporedom proizvoda s desne strane, nakon čega slijedi mreža od tri kartice s karakteristikama. Odjeljci su odvojeni vertikalnim rubovima od 96-128px bez razdjelnika ili pomaka pozadine. Navigacija je jedan fiksni panel od 64px sa zamućenom pozadinom. Mreže kartica dosljedno koriste raspored s dvije ili tri kolone s rubovima 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 brenda koji se pojavljuje kao lebdeća silueta u "velikoj" skali. Logotipi klijenata na traci za provjeru koncepta koriste stvarne slovne oznake svakog brenda u sivoj skali. Nacrti proizvoda (Notionov chat interfejs, izlaz CLI terminala, pasoška kartica) ugrađeni su kao snimci ekrana u svijetlom načinu rada unutar uokvirenih kartica. Nema fotografija, ilustracija ili 3D elemenata - sistem je čista tipografija i geometrijski oblici na bijelom papiru.
Paleta
Neutralno
- Obsidian
#171717— Glavni naslovi, okviri za navigaciju, tamno popunjavanje dugmadi i oznake liste su gotovo crne boje, čime se izbjegava oštrina i drečava zasićenost. - Paper White
#fafafa— Platno stranice, površine kartica, svijetle popune dugmadi - to je standardna pozadina na kojoj se nalazi sve ostalo. - Pure White
#ffffff— Podignute površine kartica, umetci, polja za unos. - Hairline
#ebebeb— Okviri od 1px na dugmadima, linkovima i karticama su vidljivi pri visokim nivoima zumiranja, ali nevidljivi pri niskim nivoima zumiranja. - Ash
#c9c9c9— Onemogućen tekst, prigušene oznake, vodeni žigovi naziva brenda u logotipima klijenata. - Smoke
#a8a8a8— Sekundarni tekst, tekst rezerviranog mjesta, suptilno popunjavanje ikonama.
Tipografija
od 11 do 64px · 6 koraka
- Geist Sans — zamjena: Inter · obrisi 400, 450, 500 · Primarni font za interfejs i naslove je posebno dizajniran geometrijski sans-serif od Vercela s malim razmakom između slova pri velikim veličinama (-0,06em na 56-64px, -0,05em na 30px). 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 natpise, blokove koda, CLI izlazne panele, metapodatke i tekst napisan velikim slovima. Kombinacija 8px/600px/velika slova omogućava 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 dugmeta | 6px |
| Radijus kartice | 6px |
| Sjene | ne - okviri umjesto sjena |
| Između sekcija | 96-128px |
| Širina stranice | 1280px |
Vještačka inteligencija će izgraditi vašu web stranicu u Vercel stilu i popuniti je
- Popunite proizvodima i objavama putem linka - Instagram, TikTok, Facebook.
- Prenesite sadržaj sa vaše stare stranice - samo navedite adresu.
- Moderan dizajn na najboljem engine-u: React ( Next.js) sa serverskim renderovanjem i SEO optimizacijom odmah po instalaciji.
- Potpuno automatizirana SEO optimizacija za rezultate pretrage i preporuke neuronskih mreža.
Slični stilovi
- Headspace — Sunčani kutak za wellness na toplom papiru
- WHOOP — Laboratorija za performanse u ponoć - bijeli klinički laboratorijski stolovi ispod crne pozorišne praznine, jedan ljubičasti puls električne energije
- Together AI — Istraživačka konzola na glacijalnom papiru
- v0 by Vercel — Crtanje na tokaru. Preciznost i funkcionalnost su od najveće važnosti, 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 — monohromatski sto 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 haos.
- Sprout Social — Zelena klica na crnom škriljevcu. Jedan svijetli naglasak na strogom monokromatskom platnu, čija se boja koristi samo za akciju, sa samouvjerenim geometrijskim fontom koji služi kao putokaz.
- Krea — galerija noir u ponoć
- Evergreen — Solarni staklenik na lanenom papiru
- Factory — Terminal "ratne sobe" u ponoć. "Fabrika" je potpuno crna kontrolna ploča gdje jedna bijela kartica sleti poput depeše osvijetljene baterijskom lampom - jedini predmet u sobi je sam rad.