Vercel
Terminal dicithak ing kertas putih
Sistem desain Vercel minangka latihan monokrom sing disiplin: kanvas meh putih (#fafafa), jinis ireng, wates tipis, lan ora ana warna dekoratif. Basa visual ngelingake terminal pangembang sing ditampilake ing cetakan—Geist Sans meh ora bisa diwaca ing skala "heroik" kanthi bobot 400-450 lan jarak huruf -0.06em, dene Geist Mono ngetrapake label, metadata, lan conto kode ing huruf kapital 11-13px. Tombol-tombol kasebut tajem kanthi radius 6px utawa persegi panjang ireng murni ing putih utawa putih ing ireng. Sistem iki gumantung marang kontras lan hierarki tipografi tinimbang warna, nggunakake tandha segitiga (▲) lan tandha tembung rong baris minangka siji-sijine elemen branding. Permukaan ditumpuk ing ndhuwur siji liyane kanthi urutan #fafafa → #ebebeb → #171717, nggawe ambane kanthi ngganti nilai tonal tinimbang bayangan utawa warna. Saben elemen dibangun ing kothak 4px kanthi kapadhetan sing kompak, sing ngasilake antarmuka sing kaya notebook insinyur—tepat, fungsional, lan ora wedi karo papan kosong.
Wadhah kasebut ambane 1280px, ana ing tengah, kanthi bantalan horisontal sing akeh (24-48px). Blok utama nggunakake komposisi telung zona asimetris: judhul gedhe ing sisih kiwa, glif merek ing tengah, lan blok "alis" ing sisih tengen. Ing ngisor blok utama, isine disusun kanthi garis-garis selang-seling: garis amba kanthi logo klien, banjur bagean "Agen Pencipta" rong kolom kanthi judhul ing sisih kiwa lan tata letak produk ing sisih tengen, banjur kothak telung kertu kanthi fitur. Bagean-bagean kasebut dipisahake dening talang vertikal 96-128px tanpa pembagi utawa offset latar mburi. Navigasi minangka panel tetep 64px tunggal kanthi latar mburi burem. Kisi kertu kanthi konsisten nggunakake tata letak rong utawa telung kolom kanthi talang 16-24px. Kapadhetan sakabèhé kompak—teks gampang diwaca, ana papan putih sing cukup, nanging ukuran font lan ukuran komponen nyegah kaca kasebut krasa lega.
Gambar-gambare arang lan tansah fungsional. Unsur visual utama yaiku segitiga ireng (▲)—tandha merek geometris sing katon minangka siluet sing ngambang ing skala "kapital". Logo klien ing strip bukti-konsep nggunakake tandha tembung saben merek ing skala abu-abu. Mockup produk (antarmuka obrolan Notion, output terminal CLI, kertu paspor) disematkan minangka gambar layar mode cahya ing kertu sing dibingkai. Ora ana foto, ilustrasi, utawa unsur 3D—sistem kasebut minangka tipografi murni lan bentuk geometris ing kertas putih.
Palet
Netral
- Obsidian
#171717— Judhul utama, wates navigasi, isi tombol peteng, lan tandha dhaptar kabeh meh ireng, supaya ora kaku lan kejenuhan sing mencolok. - Paper White
#fafafa— Kanvas kaca, permukaan kertu, cahya tombol-tombol sing kebak cahya—iki minangka latar mburi standar sing dadi papan dununge kabeh liyane. - Pure White
#ffffff— Permukaan kertu sing diangkat, sisipan, kolom input. - Hairline
#ebebeb— Wates 1px ing tombol, pranala, lan kertu katon ing tingkat zoom dhuwur, nanging ora katon ing tingkat zoom endhek. - Ash
#c9c9c9— Teks dipateni, label dibisu, tandha banyu jeneng merek ing logo klien. - Smoke
#a8a8a8— Teks sekunder, teks placeholder, isian ikon halus.
Tipografi
saka 11 nganti 64px · 6 langkah
- Geist Sans — panggantos: Inter · garis besar 400, 450, 500 · Font utama kanggo antarmuka lan judhul yaiku sans-serif geometris sing dirancang khusus saka Vercel kanthi jarak huruf sing rapet ing ukuran gedhe (-0.06em ing 56-64px, -0.05em ing 30px). Kanggo judhul ing sisih ndhuwur kaca, bobot 450 dipilih: luwih kandel tinimbang Light nanging luwih entheng tinimbang Semi-Bold, nggawe nada sing percaya diri, nanging ora kaku.
- Geist Mono — panggantos: JetBrains Mono · garis besar 400, 500, 600 · Font sekunder monospaced kanggo caption, blok kode, panel output CLI, metadata, lan teks huruf gedhe. Kombinasi 8px/600px/huruf gedhe ngidini penempatan tandha tembung cilik sing tepat. Spasi huruf sing amba (0.071em) ing versi monospaced nyedhiyakake papan sing cukup kanggo teks huruf gedhe.
Interval lan wujud
| Tujuan | Tegese |
|---|---|
| Kapadhetan | padhet |
| Langkah dhasar | 12px |
| Radius tombol | 6px |
| Radius kertu | 6px |
| Bayangan | ora ana wates tinimbang bayangan |
| Antarane bagean | 96-128px |
| Ambane kaca | 1280px |
AI bakal mbangun situs web sampeyan nganggo gaya Vercel lan ngisi situs kasebut
- Isi nganggo produk lan kiriman liwat pranala - Instagram, TikTok, Facebook.
- Transfer konten saka situs lawasmu—cukup sebutna alamate.
- Desain modern nganggo mesin paling apik: React ( Next.js) nganggo rendering server lan optimasi SEO sing wis ana.
- Optimasi SEO otomatis kanggo asil panelusuran lan rekomendasi jaringan saraf.
Gaya sing padha
- Headspace — Pojok kesehatan sing cerah ing kertas sing anget
- WHOOP — Laboratorium pagelaran ing tengah wengi - meja laboratorium klinis putih ing sangisore kekosongan teater ireng, pulsa listrik ungu tunggal
- Together AI — Konsol riset ing kertas glasial
- v0 by Vercel — Gambar mesin bubut. Presisi lan fungsionalitas iku sing paling penting, saben unsur nduweni tujuan sing jelas ing permukaan sing resik lan sampurna sacara teknis.
- Dovetail — Cetak biru ing sangisore rembulan ireng—garis grafik meh ora katon, font putih, siji kilauan ungu
- Glideapps — meja gambar monokrom kanthi siji kilauan biru toska listrik
- Timescale — Gambar teknik ing kertas grafik anget
- UGLYCASH — Buku cathetan sing dilapisi stiker ing kertas warna krem mancarake swasana fintech sing wani lan maksimalis sing kanthi bangga nampilake kekacauane.
- Sprout Social — Tunas ijo ing watu tulis ireng. Aksen padhang ing kanvas monokrom sing ketat, warnane mung digunakake kanggo aksi, kanthi font geometris sing percaya diri dadi tandha.
- Krea — galeri ireng ing wayah tengah wengi
- Evergreen — Griya ijo surya ing kertas linen
- Factory — Terminal "ruang perang" ing wayah tengah wengi. "Pabrik" kuwi panel kontrol ireng polos ing ngendi ana kertu putih siji sing tiba kaya lampu senter—siji-sijine barang ing ruangan kasebut yaiku karyane dhewe.