Vercel
Terminal beyaz kağıda basılmıştır.
Vercel tasarım sistemi, disiplinli bir monokrom çalışmasıdır: neredeyse beyaz bir zemin (#fafafa), siyah yazı tipi, ince kenarlıklar ve dekoratif renklerin tamamen yokluğu. Görsel dil, bir geliştirici terminalinin basılı halini çağrıştırır—Geist Sans, 400-450 ağırlık ve -0.06em harf aralığıyla "kahraman" ölçekte zar zor okunabilirken, Geist Mono etiketleri, meta verileri ve kod örneklerini 11-13 piksel büyük harflerle uygular. Düğmeler, keskin 6 piksel yarıçaplı veya beyaz üzerine saf siyah veya siyah üzerine beyaz dikdörtgenlerdir. Sistem, renk yerine kontrast ve tipografik hiyerarşiye dayanır ve tek marka öğesi olarak üçgen işareti (▲) ve iki satırlı bir kelime logosunu kullanır. Yüzeyler, gölge veya renk yerine değişen ton değerleriyle derinlik yaratarak #fafafa → #ebebeb → #171717 sırasıyla üst üste istiflenir. Her bir öğe, kompakt bir yoğunluğa sahip 4 piksellik bir ızgara üzerine inşa edilmiştir; bu da mühendislerin not defterlerini anımsatan, hassas, işlevsel ve boşluktan çekinmeyen bir arayüz ortaya çıkarır.
Konteyner 1280 piksel genişliğinde, ortalanmış ve geniş yatay dolguya (24-48 piksel) sahip. Ana blok, asimetrik üç bölgeli bir kompozisyon kullanıyor: solda büyük bir başlık, ortada bir marka logosu ve sağda bir "kaş" bloğu. Ana bloğun altında, içerik alternatif şeritler halinde düzenlenmiştir: müşterinin logosunun yer aldığı tam genişlikte bir şerit, ardından solda başlık ve sağda ürün düzeni bulunan iki sütunlu "Ajan Yaratıcıları" bölümü ve ardından özelliklerin yer aldığı üç karttan oluşan bir ızgara. Bölümler, ayırıcı veya arka plan kaydırması olmadan 96-128 piksel dikey boşluklarla ayrılmıştır. Navigasyon, bulanık bir arka plana sahip tek bir sabit 64 piksel paneldir. Kart ızgaraları, 16-24 piksel boşluklarla tutarlı bir şekilde iki veya üç sütunlu bir düzen kullanır. Genel yoğunluk kompakttır; metin kolay okunabilir, bol miktarda beyaz alan vardır, ancak yazı tipi boyutu ve bileşen boyutları sayfanın havadar görünmesini engeller.
Görseller az sayıda ve her zaman işlevseldir. Ana görsel öğe, "büyük harf" ölçeğinde havada asılı bir silüet olarak görünen geometrik bir marka işareti olan siyah üçgendir (▲). Kavram kanıtı şeridindeki müşteri logoları, her markanın gerçek kelime işaretlerini gri tonlamalı olarak kullanır. Ürün maketleri (Notion'ın sohbet arayüzü, CLI terminal çıktısı, pasaport kartı), çerçeveli kartların içine açık mod ekran görüntüleri olarak yerleştirilmiştir. Fotoğraf, illüstrasyon veya 3D öğe yoktur; sistem tamamen beyaz kağıt üzerinde tipografi ve geometrik şekillerden oluşmaktadır.
Palet
Doğal
- Obsidian
#171717— Ana başlıklar, gezinme kenarlıkları, koyu düğme dolgusu ve liste işaretleyicileri neredeyse tamamen siyahtır; bu sayede sertlik ve aşırı doygunluktan kaçınılmıştır. - Paper White
#fafafa— Sayfa tuvali, kart yüzeyleri, düğmelerin ışık dolguları; her şeyin üzerinde yer aldığı standart arka plan budur. - Pure White
#ffffff— Kabartmalı kart yüzeyleri, ek parçalar, giriş alanları. - Hairline
#ebebeb— Düğmeler, bağlantılar ve kartlardaki 1 piksellik kenarlıklar yüksek yakınlaştırma seviyelerinde görünür, ancak düşük yakınlaştırma seviyelerinde görünmez. - Ash
#c9c9c9— Devre dışı bırakılmış metin, soluklaştırılmış etiketler, müşteri logolarındaki marka adı filigranları. - Smoke
#a8a8a8— İkincil metin, yer tutucu metin, ince simge dolgusu.
Tipografi
11 ila 64 piksel arası · 6 adım
- Geist Sans — yenisiyle değiştirme: Inter · ana hatlar 400, 450, 500 · Arayüz ve başlıklar için kullanılan ana yazı tipi, Vercel tarafından özel olarak tasarlanmış, büyük boyutlarda dar harf aralığına sahip (-0.06em 56-64 pikselde, -0.05em 30 pikselde) geometrik bir sans-serif yazı tipidir. Sayfanın üst kısmındaki başlıklar için 450 kalınlık seçilmiştir: Light'tan daha kalın, Semi-Bold'tan daha ince olan bu kalınlık, kendinden emin ancak aşırıya kaçmayan bir ton yaratır.
- Geist Mono — yenisiyle değiştirme: JetBrains Mono · ana hatlar 400, 500, 600 · Başlıklar, kod blokları, CLI çıktı panelleri, meta veriler ve büyük harfli metinler için tek aralıklı ikincil bir yazı tipi. 8px/600px/uppercase kombinasyonu, küçük kelime işaretlerinin hassas bir şekilde yerleştirilmesine olanak tanır. Tek aralıklı sürümdeki geniş harf aralığı (0.071em), büyük harfli metinler için yeterli alan sağlar.
Aralıklar ve biçim
| Amaç | Anlam |
|---|---|
| Yoğunluk | yoğun |
| Temel adım | 12px |
| Düğme yarıçapı | 6px |
| Kart yarıçapı | 6px |
| Gölgeler | hayır - gölgeler yerine kenarlıklar |
| Bölümler arasında | 96-128px |
| Sayfa genişliği | 1280px |
Yapay zeka, web sitenizi Vercel tarzında oluşturacak ve içeriğini dolduracak.
- Ürünlerinizi ve gönderilerinizi aşağıdaki bağlantılar aracılığıyla paylaşın: Instagram, TikTok, Facebook.
- Eski sitenizdeki içeriği aktarın; sadece adresi belirtmeniz yeterli.
- En iyi motor üzerinde modern tasarım: Sunucu tarafı işleme ve SEO optimizasyonu özellikleriyle birlikte React ( Next.js).
- Arama sonuçları için tamamen otomatik SEO optimizasyonu ve sinir ağı tabanlı öneriler.
Benzer stiller
- Headspace — Sıcak kağıt üzerinde güneşli bir sağlıklı yaşam köşesi.
- WHOOP — Gece yarısı performans laboratuvarı - siyah bir tiyatro boşluğunun altında beyaz klinik laboratuvar masaları, tek bir mor elektrik darbesi.
- Together AI — Buzul kağıdı üzerine araştırma konsolu
- v0 by Vercel — Torna çizimi. Hassasiyet ve işlevsellik en önemli unsurlardır; her bir eleman, temiz ve teknik olarak mükemmel bir yüzey üzerinde net bir amaca hizmet eder.
- Dovetail — Kara ay altında bir plan - zar zor görünen grafik çizgileri, beyaz yazı tipi, bir mor kıvılcım.
- Glideapps — Üzerinde elektrik mavisi parıltısı olan tek renkli çizim masası
- Timescale — Sıcak grafik kağıdı üzerine mühendislik çizimi
- UGLYCASH — Krem rengi kağıda basılmış, çıkartmalarla kaplı bir defter, kaosunu gururla sergileyen cesur, maksimalist bir fintech şirketinin ambiyansını yansıtıyor.
- Sprout Social — Siyah arduvaz üzerinde yeşil bir filiz. Sıkı bir monokrom tuval üzerinde parlak bir vurgu; renk yalnızca hareket için kullanılmış, kendinden emin geometrik bir yazı tipi ise yol işaretleri görevi görüyor.
- Krea — gece yarısı galeri noir
- Evergreen — Keten kağıt üzerine güneş enerjili sera
- Factory — Gece yarısı "savaş odası" terminali. "Fabrika", tek bir beyaz kartın el feneriyle aydınlatılmış bir emir gibi düştüğü simsiyah bir kontrol paneli; odadaki tek nesne işin kendisi.