Auros
Biyolüminesans veri topları içeren derin deniz terminali
Auros, uçurumun içine yerleştirilmiş bir fintech terminali gibi işlev görüyor: neredeyse siyah turkuaz bir tuval üzerinde, biyolüminesan veri küreleri ve turkuazdan pembeye uzanan ışık geçişleri, derinlik, akışkanlık ve akış hissi yaratıyor. Arayüz minimalist ve sinematik olup, aşırı gösterişli olmadan ölçek oluşturmak için agresif negatif izleme özelliğine sahip orta kalınlıkta tek bir kullanıcı ekranına (Matter) dayanıyor. Renkler eşit olarak dağıtılmış; neredeyse tüm içerik için renksiz beyazlar ve gümüşler kullanılırken, kromatik palet atmosferik geçişler, kart yüzeylerini ayırt etme ve turkuaz maviden lavanta pembeye renk değiştiren tek bir imzalı hap şeklindeki düğme için ayrılmış. Kartlar, yükseklik yerine ince turkuaz yüzey çıkıntıları (16 piksel yarıçap, gölge yok) üzerinde yüzüyor, böylece hiyerarşi kağıt üzerindeki bir gölge yerine suyun derinliği olarak algılanıyor. Bileşenler düşünceli ve alet gibi görünüyor: büyük harf izleme işaretleri, ince geometrik ok simgeleri, soluk pembe renkte büyük sayısal göstergeler.
Koyu renkli, tam genişlikte bir tuval olup, içeriği maksimum 1440 piksel genişliğindedir. Ana öğe, tüm görüntü alanı yüksekliğini kaplayan ortalanmış bir metin bloğudur (gözat → başlık → alt metin → harekete geçirici mesaj) ve arka plan öğesi olarak bir parçacık kullanılmıştır. Bölümler, tuval ve hafifçe girintili yüzeyler arasında değişen, 68 pikselden fazla büyük dikey boşluklarla ayrılmış tam genişlikte şeritlerdir. "Keşfet" bölümü asimetrik iki sütunlu bir düzen kullanır: sol sütun üst üste dizilmiş özellik kartları içerirken, sağ sütun geometrik bir moleküler illüstrasyon içerir. İçerik, kenardan kenara uzanmak yerine, kolay okuma için dar sütunlarda (maksimum ~600 piksel) ortalanmıştır. Altbilgi, 120 piksel dikey kenar boşluğuna sahip girintili bir çukurdur (#011d1c) ve derin bir havuz etkisi yaratır. Navigasyon, 16-24 piksel aralıklarla yerleştirilmiş öğelere sahip ince, şeffaf bir paneldir. Genel ritim sinematik ve ferah; her bölüm nefes alıyor ve derin, su benzeri renk şeması, her geçişte daha derine düşme hissi yaratıyor.
Görsel stil minimalist ve atmosferik. Ana sayfada, tuvali ve kenarlarındaki lavanta-pembe vurguları yansıtan, dönen bir küre oluşturan binlerce küçük turkuaz-mavi ve beyaz noktadan oluşan üç boyutlu bir parçacık küresi yer alıyor; bu da bir bilgi nesnesini anımsatan biyolüminesan bir etki yaratıyor. Sağ sütunda dekoratif unsurlar olarak düz geometrik moleküler diyagramlar (koyu bir tuval üzerinde beyaz daireler ve ince bağlantı çizgileri) kullanılıyor. Fotoğraf yok, yaşam tarzı görüntüleri yok, insan yok; görsel dil, temiz veri grafikleri ve soyut formlara dayanıyor. Parçacık küresi, marka kimliğinin belirleyici görsel öğesidir; derin deniz metaforunu güçlendirmek için her önemli sayfada en az bir kez görünmelidir.
Palet
Marka
- Liquid Abyss
#012624— Ana arka plan, sayfanın tabanı, başlığı, ana öğesi ve baskın koyu turkuaz alanıdır. Derin deniz atmosferi yaratır. - Liquid Deep
#011d1c— Girintili yüzey seviyesi, altbilgi arka planı ve daha derin karton panellerdir. Tuvalden yarım ton daha koyu olarak algılanır ve ince bir aşağı doğru derinlik gradyanı oluşturur. - Liquid Kelp
#003734— Kabartmalı kart yüzeyi ve düğme dolgusu—uçurumun bir adım üzerinde konumlandırılmış kabartmalı bir yüzey. Özellik kartları, içerik panelleri ve gradyan düğmesinin başlangıç noktası için kullanılır.
Doğal
- Liquid Mist
#edfffe— Beyazın serin bir tonu, metin gövdesini, bölüm başlıklarını ve sıcak, açık renkli tipografiyi vurguluyor. İnce bir mavi tonu, metin gövdesini turkuaz renk şemasına bağlıyor. - Platinum
#ffffff— Başlıklar, gezinme öğeleri, simge çerçeveleri ve yüksek kontrastlı metinler için saf beyaz kullanılır. Tüm başlık seviyelerinde ve birincil gezinmede birincil metin rengidir. - Silver Mist
#bbc7c6— İkincil metin, soluk açıklamalar ve bağlantı rengi orijinal hallerinde. Turkuaz arka planı tamamlayan hafif yeşilimsi bir tonları var. - Ash
#f2f2f2— Alıntılar ve yorumlar için ek metin. Silver Mist'in turkuaz alt tonu çok parlak geldiğinde kullanılabilecek nötr, serin bir gri tonu. - Slate Deep
#707777— Hareketsiz veya düşük görünürlüklü arka planlar için ince bir yüzey renklendirmesi. Tuval ve karton arasında yer alarak çok hafif bir yükseklik farkı sağlar. - Lavender Phosphor
#fde9ff— Büyük istatistikler, sayaç rakamları ve önemli ölçümler için arka ışık rengi. İmza niteliğindeki gradyan içindeki pembe tonu, koyu yüzeylerde parlak bir vurgu olarak az miktarda kullanılmıştır.
Tipografi
10 ila 96 piksel arası · 6 adım
- Matter — yenisiyle değiştirme: Inter · ana hatlar 400, 500 · Başlıklar ve gövde metni için kullanılan ana yazı tipi, tüm başlıklar (H1–H3) ve büyük kinetik metin (86–295 piksel) için 500 ağırlığındadır. Gövde metni ve kullanıcı arayüzü metni için 400 ağırlığı kullanılır. Büyük boyutlarda agresif negatif harf aralığı (-0,04em 61 pikselde, -0,046em 86 pikselde) ve büyük başlıklarda geniş pozitif harf aralığı (0,08em 20 pikselde, 0,12em 12 pikselde, 0,15em 10 pikselde) özelliklerine sahiptir. Başlıklar için yalnızca orta ağırlık kullanma stratejisi – kalın veya ince yazı tipi kullanılmaması – yazı tipine tekdüze, mekanik bir güven kazandıran ayırt edici bir özelliktir.
- Arial — yenisiyle değiştirme: system-ui · ana hatlar 400 · Etkileşimli kullanıcı arayüzü öğeleri (navigasyon, düğmeler, başlık mikro metni, altbilgi) için ikincil bir yedekleme. Yalnızca 14 pikselde görünür – Matter yüklenmediğinde güvenli, evrensel bir yedekleme olarak kullanılır ve form etiketlerini, düğme metnini ve küçük yardımcı metni kapsar.
Aralıklar ve biçim
| Amaç | Anlam |
|---|---|
| Yoğunluk | ortalama |
| Temel adım | 20px |
| Düğme yarıçapı | 6px |
| Kart yarıçapı | 16px |
| Gölgeler | hayır - gölgeler yerine kenarlıklar |
| Bölümler arasında | 68px |
| Sayfa genişliği | 1440px |
Yapay zeka, web sitenizi Auros 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
- Design Full-Time — tek bir sıcak spot ışığı olan stüdyo sineması
- Air — "Camdan Gece Gökyüzü" heykeli
- Slash — Altın yaldızlı defterlerle dolu gece kasası
- Raycast — Gece Yarısı Komuta Merkezi, Mercan Neon
- Dimension — Buzlu cam panellerle donatılmış, alacakaranlıkta aydınlatılan bir çalışma alanı.
- Modal — Karanlık bir sunucu odasında fosforlu bir terminal - tek ışık kaynağı parlak yeşil bir renk.
- Giga — Buzlu obsidyen üzerinde gece ufku
- Reflect Notes — Yıldızlı mor uzay, notaların neredeyse simsiyah çivit mavisi bir boşluğun fonunda takımyıldızlar gibi süzüldüğü karanlık bir gözlemevidir.
- Ameba — Gece yarısı kontrol odası – buzlu cam panellerin içinde elektrik mavisi bir titreşim.
- AgentQL — Geceleyin terminalin üzerinde kuzey ışıkları.
- Frame — Gece geç saatlerde film gösterimleri için bir sinema salonu. Tek bir mavi spot ışığının tüm işi yaptığı karanlık bir oda ve kullanıcı arayüzü arka plana çekilerek yaratıcı içeriğin öne yansıtılmasına olanak tanıyor.
- Harness — Gece yarısı fosforlu yeşil vurgularla donatılmış Görev Kontrol Merkezi