Vercel
Terminal trükitud valgele paberile
Verceli disainisüsteem on distsiplineeritud monokroomsuse harjutus: peaaegu valge lõuend (#fafafa), must font, õhukesed äärised ja dekoratiivsete värvide täielik puudumine. Visuaalne keel meenutab arendaja terminali trükisena – Geist Sans on "kangelaslikul" skaalal vaevu loetav, kaal on 400–450 ja tähevahe on -0,06em, samas kui Geist Mono rakendab silte, metaandmeid ja koodinäidiseid 11–13px suurtähtedega. Nupud on teravad 6px raadiusega või puhta musta valgel taustal või valge mustal taustal ristkülikud. Süsteem tugineb pigem kontrastile ja tüpograafilisele hierarhiale kui värvile, kasutades brändielementidena kolmnurkset märki (▲) ja kaherealist sõnamärki. Pinnad on üksteise peale virnastatud järjekorras #fafafa → #ebebeb → #171717, luues sügavust muutuvate tooniväärtuste, mitte varju või värvi kaudu. Iga element on üles ehitatud kompaktse tihedusega 4px ruudustikule, mille tulemuseks on inseneri märkmikku meenutav liides – täpne, funktsionaalne ja kartmatu tühimiku ees.
Konteiner on 1280 pikslit lai, tsentreeritud ja helde horisontaalse voodriga (24–48 pikslit). Põhiplokk kasutab asümmeetrilist kolmetsoonilist kompositsiooni: vasakul on suur pealkiri, keskel brändi glüüf ja paremal on "kulmu" plokk. Põhiploki all on sisu paigutatud vahelduvate triipudena: täislaiuses triip kliendi logoga, millele järgneb kaheveeruline jaotis "Agent Creators", kus vasakul on pealkiri ja paremal tootepaigutus, millele järgneb kolmest kaardist koosnev ruudustik funktsioonidega. Sektsioonid on eraldatud vertikaalsete 96–128 pikslise äärisega, ilma eraldajate või tausta niheteta. Navigeerimine on üks fikseeritud 64 pikslise paneeliga, millel on hägune taust. Kaardiruudustikud kasutavad järjepidevalt kahe- või kolmeveerulist paigutust 16–24 pikslise äärisega. Üldine tihedus on kompaktne – teksti on lihtne lugeda, tühja ruumi on piisavalt, kuid fondi suurus ja komponentide suurused takistavad lehe õhuliseks muutumist.
Pildid on hõredad ja alati funktsionaalsed. Peamine visuaalne element on must kolmnurk (▲) – geomeetriline brändimärk, mis ilmub hõljuva siluettina "suurtähe" skaalal. Kontseptsioonitõestuse ribal olevad klientide logod kasutavad iga brändi tegelikku sõnamärki halltoonides. Toote maketid (Notioni vestlusliides, CLI-terminali väljund, passikaart) on manustatud heledates režiimides ekraanipiltidena raamitud kaartidele. Puuduvad fotod, illustratsioonid ega 3D-elemendid – süsteem on puhas tüpograafia ja geomeetrilised kujundid valgel paberil.
Palett
Neutraalne
- Obsidian
#171717— Peamised pealkirjad, navigeerimisäärised, tumedate nuppude täitmine ja loendimarkerid on kõik peaaegu mustad, vältides karmi ja kriiskavat küllastust. - Paper White
#fafafa— Lehekülje lõuend, kaardi pinnad, nuppude valgustäited – see on standardne taust, millel kõik muu asub. - Pure White
#ffffff— Tõstetud kaardipinnad, vahetükid, sisestusväljad. - Hairline
#ebebeb— Nuppude, linkide ja kaartide 1px äärised on suure suumitaseme korral nähtavad, kuid madala suumitaseme korral nähtamatud. - Ash
#c9c9c9— Keelatud tekst, summutatud sildid, brändinime vesimärgid klientide logodes. - Smoke
#a8a8a8— Teisene tekst, kohatäitetekst, peen ikoonitäide.
Tüpograafia
11-st 64 pikslini · 6 sammu
- Geist Sans — asendamine: Inter · kontuurid 400, 450, 500 · Liidese ja pealkirjade peamine font on Verceli eritellimusel disainitud geomeetriline sans-serif font, mille puhul on suurte tähtede vahe tihe (-0,06em 56–64 piksli juures, -0,05em 30 piksli juures). Lehe ülaosas olevate pealkirjade jaoks valiti 450 paksusega kiri: paksem kui Light, kuid kergem kui Semi-Bold, luues enesekindla, kuid mitte pealetükkiva tooni.
- Geist Mono — asendamine: JetBrains Mono · kontuurid 400, 500, 600 · Ühtlase reavahega teisejärguline font pealkirjade, koodiplokkide, CLI väljundpaneelide, metaandmete ja suurtähtede jaoks. 8px/600px/suurtähtede kombinatsioon võimaldab pisikeste sõnamärkide täpset paigutamist. Ühtlase reavahega versiooni lai tähevahe (0,071em) pakub suurtähtede jaoks piisavalt ruumi.
Intervallid ja vorm
| Eesmärk | Tähendus |
|---|---|
| Tihedus | tihe |
| Põhisamm | 12px |
| Nupu raadius | 6px |
| Kaardi raadius | 6px |
| Varjud | ei - varjude asemel äärised |
| Sektsioonide vahel | 96-128px |
| Lehe laius | 1280px |
Tehisintellekt loob teie veebisaidi Vercel stiilis ja täidab selle
- Täida toodete ja postitustega lingi kaudu - Instagram, TikTok, Facebook.
- Kanna sisu oma vanalt saidilt üle – täpsusta lihtsalt aadress.
- Moodne disain parimal mootoril: React ( Next.js) koos serveri renderdamise ja SEO optimeerimisega koheselt.
- Täisautomaatne SEO optimeerimine otsingutulemuste ja närvivõrgu soovituste jaoks.
Sarnased stiilid
- Headspace — Päikeseline heaolunurk soojal paberil
- WHOOP — Keskööl toimuv etenduslabor – valged kliinilise labori lauad musta teatraalse tühjuse all, üksainus lilla elektriimpulss
- Together AI — Uurimiskonsool jääpaberil
- v0 by Vercel — Treipingi joonis. Täpsus ja funktsionaalsus on esmatähtsad, kusjuures igal elemendil on selge eesmärk puhtal ja tehniliselt täiuslikul pinnal.
- Dovetail — Musta kuu all olev plaan – vaevu nähtavad graafikujooned, valge font, üks lilla sädelus
- Glideapps — mustvalge joonestuslaud ühe elektrilise türkiissinise sädelusega
- Timescale — Insenerijoonis soojal graafikpaberil
- UGLYCASH — Kreemikas paberil kleebistega kaetud märkmik õhkub julge ja maksimalistliku fintech-ettevõtte õhkkonda, mis uhkusega oma kaost demonstreerib.
- Sprout Social — Roheline võrse mustal kiltkivil. Üks ere aktsent rangel monokroomsel lõuendil, mille värvi kasutatakse ainult tegevuse tähistamiseks, ja enesekindel geomeetriline font, mis toimib viitadena.
- Krea — galerii noir keskööl
- Evergreen — Päikesekasvuhoone linasel paberil
- Factory — „Sõjaruumi” terminal keskööl. „Tehas” on karmmust juhtpaneel, kuhu maandub üks valge kaart nagu taskulambiga valgustatud teade – ainus objekt ruumis on töö ise.