Vercel
Terminaal gedruk op wit papier
Die Vercel-ontwerpstelsel is 'n oefening in gedissiplineerde monochroom: 'n amper-wit doek (#fafafa), swart lettertipe, dun rande en 'n algehele afwesigheid van dekoratiewe kleur. Die visuele taal roep 'n ontwikkelaar se terminaal op wat in druk weergegee word—Geist Sans is skaars leesbaar op die "heldhaftige" skaal met 'n gewig van 400-450 en 'n letterafstand van -0.06em, terwyl Geist Mono etikette, metadata en kodemonsters in 11-13px hoofletters toepas. Knoppies is skerp 6px radiusse of reghoeke van suiwer swart op wit of wit op swart. Die stelsel maak staat op kontras en tipografiese hiërargie eerder as kleur, en gebruik die driehoekige teken (▲) en 'n twee-lyn woordmerk as die enigste handelsmerkelemente. Oppervlaktes word bo-op mekaar gestapel in die volgorde #fafafa → #ebebeb → #171717, wat diepte skep deur toonwaardes te verander eerder as skaduwee of kleur. Elke element is gebou op 'n 4px-rooster met 'n kompakte digtheid, wat lei tot 'n koppelvlak wat herinner aan 'n ingenieur se notaboek - presies, funksioneel en onverskrokke vir wit spasie.
Die houer is 1280px breed, gesentreer, met ruim horisontale opvulling (24-48px). Die hoofblok gebruik 'n asimmetriese drie-sone komposisie: 'n groot opskrif aan die linkerkant, 'n handelsmerk-glief gesentreer, en 'n "wenkbrou"-blok aan die regterkant. Onder die hoofblok word inhoud in afwisselende strepe gerangskik: 'n volle breedte streep met die kliënt se logo, gevolg deur 'n twee-kolom "Agent Skeppers" afdeling met die opskrif aan die linkerkant en 'n produk uitleg aan die regterkant, gevolg deur 'n rooster van drie kaarte met kenmerke. Afdelings word geskei deur vertikale gote van 96-128px sonder verdelers of agtergrondverskuiwings. Die navigasie is 'n enkele vaste 64px paneel met 'n vae agtergrond. Kaartroosters gebruik konsekwent 'n twee- of drie-kolom uitleg met 16-24px gote. Die algehele digtheid is kompak - die teks is maklik om te lees, daar is genoeg wit spasie, maar die lettergrootte en komponentgroottes verhoed dat die bladsy lugtig voel.
Die beelde is yl en altyd funksioneel. Die belangrikste visuele element is die swart driehoek (▲) – 'n geometriese handelsmerk wat as 'n swewende silhoeët op die "hoofstad"-skaal verskyn. Kliëntlogo's op die bewys-van-konsep-strook gebruik elke handelsmerk se werklike woordmerke in grysskaal. Produkmodelle (Notion se kletskoppelvlak, CLI-terminaaluitvoer, paspoortkaart) is as ligmodus-skermkiekies binne geraamde kaarte ingebed. Daar is geen foto's, illustrasies of 3D-elemente nie – die stelsel is suiwer tipografie en geometriese vorms op wit papier.
Palet
Neutraal
- Obsidian
#171717— Hoofopskrifte, navigasiegrense, donker knoppievul en lysmerkers is almal amper swart, wat hardheid en oordadige versadiging vermy. - Paper White
#fafafa— Die bladsydoek, die kaartoppervlaktes, die ligte vullings van die knoppies – dit is die standaardagtergrond waarop alles anders geleë is. - Pure White
#ffffff— Verhoogde kaartoppervlakke, insetsels, invoervelde. - Hairline
#ebebeb— 1px-grense op knoppies, skakels en kaarte is sigbaar by hoë zoomvlakke, maar onsigbaar by lae zoomvlakke. - Ash
#c9c9c9— Gedeaktiveerde teks, gedempte etikette, handelsmerkwatermerke in kliëntlogo's. - Smoke
#a8a8a8— Sekondêre teks, plekhouerteks, subtiele ikoonvulsel.
Tipografie
van 11 tot 64px · 6 stappe
- Geist Sans — vervanging: Inter · buitelyne 400, 450, 500 · Die primêre lettertipe vir die koppelvlak en opskrifte is 'n pasgemaakte geometriese sans-serif van Vercel met stywe letterspasiëring by groot groottes (-0.06em teen 56-64px, -0.05em teen 30px). Vir die opskrifte bo-aan die bladsy is 'n gewig van 450 gekies: dikker as Lig, maar ligter as Semi-Vet, wat 'n selfversekerde, maar nie oordrewe, toon skep.
- Geist Mono — vervanging: JetBrains Mono · buitelyne 400, 500, 600 · 'n Monospaceerde sekondêre lettertipe vir onderskrifte, kodeblokke, CLI-uitvoerpanele, metadata en hoofletterteks. Die 8px/600px/hoofletterkombinasie maak voorsiening vir presiese plasing van klein woordmerkies. Wye letterspasiëring (0.071em) in die monospaceer-weergawe bied ruim ruimte vir hoofletterteks.
Intervalle en vorm
| Doel | Betekenis |
|---|---|
| Digtheid | dig |
| Basiese stap | 12px |
| Knoppieradius | 6px |
| Kaartradius | 6px |
| Skaduwees | geen grense in plaas van skaduwees |
| Tussen afdelings | 96-128px |
| Bladsybreedte | 1280px |
KI sal jou webwerf in Vercel -styl bou en dit vul
- Vul met produkte en plasings via die skakel - Instagram, TikTok, Facebook.
- Dra inhoud van jou ou webwerf oor – spesifiseer net die adres.
- Moderne ontwerp op die beste enjin: React ( Next.js) met bedienerweergawe en SEO-optimalisering reg uit die boks.
- Volledig outomatiese SEO-optimering vir soekresultate en neurale netwerkaanbevelings.
Soortgelyke style
- Headspace — 'n Sonnige welstandshoekie op warm papier
- WHOOP — Opvoeringslaboratorium om middernag - wit kliniese laboratoriumtafels onder 'n swart teaterleegte, 'n enkele pers puls van elektrisiteit
- Together AI — Navorsingskonsole op gletserpapier
- v0 by Vercel — Draaibanktekening. Presisie en funksionaliteit is van die allergrootste belang, met elke element wat 'n duidelike doel dien op 'n skoon, tegnies perfekte oppervlak.
- Dovetail — 'n Bloudruk onder 'n swart maan—skaars sigbare grafieklyne, wit lettertipe, een pers vonkel
- Glideapps — monochroom tekentafel met een elektriese turkoois vonkel
- Timescale — Ingenieurstekening op warm grafiekpapier
- UGLYCASH — ’n Plakkerbedekte notaboek op roomkleurige papier straal die atmosfeer uit van ’n gewaagde, maksimalistiese fintech wat met trots sy chaos ten toon stel.
- Sprout Social — 'n Groen spruit op swart leiklip. Een helder aksent op 'n streng monochroom doek, waarvan die kleur slegs vir aksie gebruik word, met 'n selfversekerde geometriese lettertipe wat as wegwysers dien.
- Krea — galery noir om middernag
- Evergreen — Sonkragkweekhuis op linnepapier
- Factory — Die "oorlogskamer"-terminaal om middernag. Die "fabriek" is 'n skerp swart beheerpaneel waar 'n enkele wit kaart soos 'n flitsligverligte versending land - die enigste voorwerp in die kamer is die werk self.