Vercel
Terminal dicetak pada kertas putih
Sistem reka bentuk Vercel merupakan satu latihan dalam monokrom yang berdisiplin: kanvas hampir putih (#fafafa), taip hitam, sempadan nipis dan ketiadaan warna hiasan sepenuhnya. Bahasa visual membangkitkan terminal pembangun yang dipaparkan dalam cetakan—Geist Sans hampir tidak dapat dibaca pada skala "heroik" dengan pemberat 400-450 dan jarak huruf -0.06em, manakala Geist Mono menggunakan label, metadata dan sampel kod dalam huruf besar 11-13px. Butang adalah jejari 6px yang tajam atau segi empat tepat hitam tulen pada putih atau putih pada hitam. Sistem ini bergantung pada hierarki kontras dan tipografi dan bukannya warna, menggunakan tanda segi tiga (▲) dan tanda perkataan dua baris sebagai satu-satunya elemen penjenamaan. Permukaan disusun di atas satu sama lain mengikut susunan #fafafa → #ebebeb → #171717, mewujudkan kedalaman melalui perubahan nilai ton dan bukannya bayang atau warna. Setiap elemen dibina pada grid 4px dengan ketumpatan padat, menghasilkan antara muka yang mengingatkan pada buku nota jurutera—tepat, berfungsi dan tidak takut dengan ruang putih.
Kontena ini selebar 1280px, berpusat, dengan pelapik mendatar yang luas (24-48px). Blok utama menggunakan komposisi tiga zon asimetri: tajuk utama besar di sebelah kiri, glif jenama berpusat, dan blok "kening" di sebelah kanan. Di bawah blok utama, kandungan disusun dalam jalur berselang-seli: jalur lebar penuh dengan logo pelanggan, diikuti dengan bahagian "Pencipta Ejen" dua lajur dengan tajuk utama di sebelah kiri dan susun atur produk di sebelah kanan, diikuti dengan grid tiga kad dengan ciri. Bahagian dipisahkan oleh talang menegak 96-128px tanpa pembahagi atau ofset latar belakang. Navigasi ialah panel tetap tunggal 64px dengan latar belakang kabur. Grid kad secara konsisten menggunakan susun atur dua atau tiga lajur dengan talang 16-24px. Ketumpatan keseluruhan adalah padat—teks mudah dibaca, terdapat ruang putih yang mencukupi, tetapi saiz fon dan saiz komponen menghalang halaman daripada terasa lapang.
Imej-imej tersebut jarang dan sentiasa berfungsi. Elemen visual utama ialah segi tiga hitam (▲)—tanda jenama geometri yang muncul sebagai siluet melayang pada skala "huruf besar". Logo pelanggan pada jalur bukti konsep menggunakan tanda perkataan sebenar setiap jenama dalam skala kelabu. Mockup produk (antara muka sembang Notion, output terminal CLI, kad pasport) dibenamkan sebagai tangkapan skrin mod cahaya dalam kad berbingkai. Tiada gambar, ilustrasi atau elemen 3D—sistem ini adalah tipografi dan bentuk geometri tulen di atas kertas putih.
Palet
Neutral
- Obsidian
#171717— Tajuk utama, sempadan navigasi, isian butang gelap dan penanda senarai semuanya hampir hitam, mengelakkan kesan kasar dan tepu yang mencolok. - Paper White
#fafafa— Kanvas halaman, permukaan kad, cahaya butang—inilah latar belakang standard tempat segala-galanya terletak. - Pure White
#ffffff— Permukaan kad yang dinaikkan, sisipan, medan input. - Hairline
#ebebeb— Sempadan 1px pada butang, pautan dan kad kelihatan pada tahap zum tinggi, tetapi tidak kelihatan pada tahap zum rendah. - Ash
#c9c9c9— Teks dilumpuhkan, label disenyapkan, tera air jenama dalam logo pelanggan. - Smoke
#a8a8a8— Teks sekunder, teks ruang letak, isian ikon halus.
Tipografi
dari 11 hingga 64px · 6 langkah
- Geist Sans — penggantian: Inter · garis besar 400, 450, 500 · Fon utama untuk antara muka dan tajuk ialah sans-serif geometri yang direka khas daripada Vercel dengan jarak huruf yang ketat pada saiz besar (-0.06em pada 56-64px, -0.05em pada 30px). Untuk tajuk di bahagian atas halaman, pemberat 450 telah dipilih: lebih tebal daripada Terang tetapi lebih ringan daripada Separuh Tebal, mewujudkan ton yang yakin, namun tidak mendominasi.
- Geist Mono — penggantian: JetBrains Mono · garis besar 400, 500, 600 · Fon sekunder jarak tunggal untuk kapsyen, blok kod, panel output CLI, metadata dan teks huruf besar. Gabungan 8px/600px/huruf besar membolehkan penempatan tanda perkataan kecil yang tepat. Jarak huruf yang lebar (0.071em) dalam versi jarak tunggal menyediakan ruang yang mencukupi untuk teks huruf besar.
Selang dan bentuk
| Tujuan | Maksudnya |
|---|---|
| Ketumpatan | padat |
| Langkah asas | 12px |
| Jejari butang | 6px |
| Jejari kad | 6px |
| Bayang-bayang | tiada - sempadan dan bukannya bayang-bayang |
| Antara bahagian | 96-128px |
| Lebar halaman | 1280px |
AI akan membina laman web anda dalam gaya Vercel dan mengisinya
- Isi dengan produk dan siaran melalui pautan - Instagram, TikTok, Facebook.
- Pindahkan kandungan dari tapak lama anda—cuma nyatakan alamatnya.
- Reka bentuk moden pada enjin terbaik: React ( Next.js) dengan pemaparan pelayan dan pengoptimuman SEO sedia ada.
- Pengoptimuman SEO automatik sepenuhnya untuk hasil carian dan cadangan rangkaian saraf.
Gaya yang serupa
- Headspace — Sudut kesejahteraan yang cerah di atas kertas yang hangat
- WHOOP — Makmal persembahan pada tengah malam - meja makmal klinikal putih di bawah lompang teater hitam, satu denyutan elektrik ungu
- Together AI — Konsol penyelidikan pada kertas glasier
- v0 by Vercel — Lukisan mesin bubut. Ketepatan dan kefungsian adalah yang paling utama, dengan setiap elemen mempunyai tujuan yang jelas pada permukaan yang bersih dan sempurna dari segi teknikal.
- Dovetail — Cetak biru di bawah bulan hitam—garisan graf yang hampir tidak kelihatan, fon putih, satu kilauan ungu
- Glideapps — meja draf monokrom dengan satu kilauan biru kehijauan elektrik
- Timescale — Lukisan kejuruteraan pada kertas graf yang hangat
- UGLYCASH — Sebuah buku nota bersalut pelekat di atas kertas berwarna krim memancarkan suasana fintech yang berani dan maksimalis yang dengan bangganya mempamerkan kekacauannya.
- Sprout Social — Pucuk hijau di atas batu tulis hitam. Satu aksen terang pada kanvas monokrom yang ketat, yang warnanya hanya digunakan untuk aksi, dengan fon geometri yang yakin berfungsi sebagai penunjuk arah.
- Krea — galeri noir pada tengah malam
- Evergreen — Rumah hijau solar di atas kertas linen
- Factory — Terminal "bilik perang" pada tengah malam. "Kilang" itu ialah panel kawalan hitam pekat di mana satu kad putih mendarat seperti penghantar barang yang diterangi lampu suluh—satu-satunya objek di dalam bilik itu ialah kerja itu sendiri.