Modal
Karanlık bir sunucu odasında fosforlu bir terminal - tek ışık kaynağı parlak yeşil bir renk.
Modal arayüzü, karanlık bir sunucu odasındaki fosforlu bir terminal gibi işlev görüyor: neredeyse siyah bir zemin, soluk yeşil yazı tipi ve LED durum göstergesi görevi gören tek bir parlak limon yeşili vurgu. Tasarım dili geliştirici odaklıdır: trafik ışığı noktalarına sahip tek aralıklı kod pencereleri, imza niteliğindeki yeşil renkte izometrik 3B simgeler ve her bölümde bir öğenin parlamasına olanak tanıyan bol miktarda beyaz alan. Tipografi, başlıklar için özel bir yazı tipi (Goga) ve tüm kullanıcı arayüzü öğeleri için değişken bir yazı tipi (Inter) arasında bölünmüştür; her ikisi de dar negatif izleme ile ayarlanmıştır. Renkler eşit olarak dağıtılmıştır: çoğu ekran renksizdir ve parlak limon yeşili renk yalnızca önemli eylemlerde, logoda, 3B illüstrasyonlarda ve vurgu anlarında görünür. Bileşenler düz ve çerçevesizdir; derinlik, gölgeler yerine ince yeşil kenarlıklar ve arka plan bulanıklığı ile oluşturulmuştur.
Bu modal pencere, içeriği barındırmak için maksimum 1280 piksel genişliğe sahip tam genişlikte koyu bir düzen kullanır. Ana pencere ortalanmıştır: başlık (açık yeşil renkteki ilk cümle), bir alt başlık, iki eylem çağrısı ve görsel bir bağlantı noktası olarak tek bir 3B nesne—düzeni kenar çubuğundan ayırmadan. İçerik bölümleri tekdüze bir ritim izler: kaş etiketi (büyük harfler, Moss 70) → Goga başlığı → soluk gövde metni, ardından ya özellik açıklaması (metin + kod/görsel kart) içeren iki sütunlu bir düzen ya da üç sütunlu bir kart ızgarası. Bölümler arasındaki boşluklar geniştir—80 piksel. Sayfa, koyu boş (#000000) ve biraz daha açık arka planlı (#181818) şeritler arasında geçiş yapar ve sayfanın ortasında görsel bir nefes alma alanı olarak açık renkli bir bölüm (#def0dd) bulunur. Navigasyon, bulanık bir arka plana sahip tek, sabit bir üst çubuktan oluşur—kenar çubuğu veya mega menü yoktur. Altbilgi kompakt ve koyu renkli olup, soluk yeşil bağlantı sütunlarına sahiptir. Metin yoğunluğu rahattır: her bölüme yeterli alan verilmiş ve kart ızgaraları en fazla üç sütun kullanmaktadır.
Modal'ın görsel dili iki moda ayrılmıştır: 3 boyutlu parlayan ürün renderları ve karanlık kod penceresi maketleri. Odak noktası, markanın imzası olan yeşil ışıkla boş alanı aydınlatan radyal bir gradyan halesi içinde yer alan, pazarlama gradyanı (açık yeşilden zümrüte) kullanılarak oluşturulmuş tek bir 3 boyutlu küptür. İş yükü kartları, koyu bir arka plana karşı aynı açık yeşil renkte oluşturulmuş izometrik 3 boyutlu simgeler (tel çerçeve küp, katı merdiven, katmanlar) içerir. Kod ve kıyaslama sonuçları, trafik ışığı noktaları, fosforlu bir palette tek aralıklı sözdizimi vurgulaması ve soluk yeşil bir kenarlıkla terminal penceresi kartları olarak sunulur; gerçek bir komut satırı arayüzünün ekran görüntülerine benzerler. Müşteri logoları, görsel rekabet olmadan güveni işaret eden, tek, düşük kontrastlı bir satırda doygunluğu azaltılmış yeşil-gri etiketler olarak görüntülenir. Genel yoğunluk düşüktür; çoğu sayfa ağırlıklı olarak metin içerir ve görüntüler fotoğraf ızgaraları yerine ayrı odak noktaları olarak sunulur. Fotoğraf yoktur; Tüm görsel sistem işlenmiş, geometrik ve ışıldayan bir yapıya sahiptir.
Palet
Marka
- Lime Pulse
#7fee64— Kurumsal kimliğin temel unsurları logo, ana harekete geçirici mesaj (CTA), etiket içeriği, aktif durumlar ve illüstrasyonun temel rengidir.
Doğal
- Phosphor White
#ddffdc— Ana metin, başlık rengi, simge çerçeve çizgisi ve içi dolu düğme metni, okunabilir ana yüzeyi oluşturur. - Void Black
#000000— Sayfa tuvali, en derin arka plan katmanı - Ground Iron
#181818— Ana düğme dolgusu, kart yüzeylerindeki koyu alanlar, kullanıcı arayüzünün taban yüzeyi. - Carbon Veil
#212525— Yüksek yüzeyler, navigasyon arka planı, zeminden biraz daha açık renk. - Circuit Border
#485346— Ana etkileşimli ince çizgi olan dış hat/hayalet eylem çerçevesi, soluk yeşilimsi gri bir tondadır. - Phosphor Blue-Black
#1f2a33— Koyu şeritler arasında ayırıcı ince ikincil işaretleme çizgileri.
Tipografi
12 ila 64 piksel arası · 8 adım
- Goga — yenisiyle değiştirme: Inter Tight or Space Grotesk · ana hatlar 400, 500 · Başlık ve Alt Başlık Yazı Tipi – Tüm H1–H4 başlıkları ve kartlar için kullanılır. Goga, dar açıklıklara ve hafifçe kareleştirilmiş uçlara sahip özel bir geometrik sans-serif yazı tipidir. Orta ağırlık (500), kart düzeyindeki başlıkları vurgulamak için ayrılmıştır; normal ağırlık (400) ise kahraman ve bölüm başlıkları için kullanılır. Modal'ın kimliğini tanımlayan alternatif glif şekillerine erişmek için, 'ss01' stilistik setinin etkinleştirilmesi gerekir. Negatif harf aralığı, 48 pikselde -0,007em'den 21 pikselde -0,017em'e kadar kademeli olarak azalır.
- Inter Variable — yenisiyle değiştirme: Inter · ana hatlar 400, 500 · Kullanıcı arayüzü ve metin gövdesi – gezinme, düğmeler, metin gövdesi, etiketler, altbilgi. Etkileşimli öğeler ve gezinme için varsayılan olarak orta kalınlık (500) kullanılır; paragraflar için normal (400) kullanılır. Harf aralığı, küçük boyutlarda bile belirgin şekilde azaltılmıştır (-0,026em 14 pikselde, -0,022em 16 pikselde), bu da arayüze yoğun, terminal bir görünüm kazandırır. Alternatif noktalama işaretleri için 'cv11' karakter varyantı eklenmelidir. 12 pikseldeki büyük harfli etiketler, metin gövdesi yoğunluğunu dengelemek için +0,05em harf aralığı kullanır.
Aralıklar ve biçim
| Amaç | Anlam |
|---|---|
| Yoğunluk | ortalama |
| Temel adım | 20px |
| Düğme yarıçapı | 12px |
| Kart yarıçapı | 8px |
| Gölgeler | hayır - gölgeler yerine kenarlıklar |
| Bölümler arasında | 80px |
| Sayfa genişliği | 1280px |
Yapay zeka, web sitenizi Modal 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
- Slash — Altın yaldızlı defterlerle dolu gece kasası
- AgentQL — Geceleyin terminalin üzerinde kuzey ışıkları.
- GitHub — Biyolüminesans kontrol noktalarına sahip bir uzay komuta paneli; tek bir yeşil parıltının ileriyi gösterdiği karanlık, atmosferik bir çalışma alanı.
- Doppler — Kasanın gece yarısı mor ışıklandırması. Neredeyse siyah olan tuval, tek bir lavanta rengi sinyal ve yeşil bir onay ışığıyla parlıyor; her yüzey kavranabilecek kadar kavisli.
- Basedash — Mat yazı tipine sahip gece yarısı bir veri terminali. Ölçümlerin mor ve yeşil renkte parladığı, serifli başlıkların gürültünün üzerinde süzüldüğü ve beyaz hap şeklindeki düğmelerin yumuşak siyah yüzeylerden oluşan bir odadaki tek parlak nesneler olduğu karanlık bir gözlem evi.
- Superwhisper — Kuzey ışıkları gece yarısı camının üzerinde kayboluyor.
- Better Stack — Midnight SRE Konsolu
- Langbase — Gece Yarısı Kuzey Işıkları konsolu
- Astro — Derin Uzay Görev Kontrol Merkezi, bir bulutsudan yayılan tek bir mor ışıkla aydınlanıyor.
- Wayfinder — Ekranda, canlı bir illüstrasyonun üzerinde zar zor duyulabilen bir başlık bulunan siyah bir film perdesi. Arayüz, kontrol paneli yerine parlaklık kaydırıcısından oluşuyor.
- HashiCorp — Gece yarısı mor neon ışıklarla aydınlatılmış kontrol odası, parlayan altıgen bir küpün tek renk referansı olarak hizmet ettiği karanlık bir teknik yüzeydir.
- Umbrel — Gece sunucu odasında, tek bir şeftali rengi parıltının gerçekten önemli olanı vurguladığı karanlık bir odada, sıcak bir ateş çukuru.