Superlist
Mercan közleriyle bezenmiş gece çalışma alanı; her eylemin sinyalini veren tek bir sıcak turuncu kıvılcımın yandığı, sessiz patlıcan moru bir uygulama yüzeyi.
Superlist, gece yarısı moru tonlarında bir verimlilik dili kullanıyor: tek ana renk olarak koyu patlıcan moru, sıcak mercan ve tüm atmosferi yakalayan büyük, sans-serif başlıklar. Arayüz, gece geç saatlerde odaklanmış çalışma hissini uyandırıyor—sessiz, katmanlı ve kendinden emin; renk yalnızca eylem çağrılarında, aktif durumlarda ve önemli noktalarda işlevsel noktalama işareti olarak kullanılıyor. Yüzeyler, derinliğin steril değil sıcak hissettirmesi için saf siyahtan kaçınılarak, mor alt tonlu ince koyu tonlarda (#181824 → #26253b) katmanlandırılmıştır. Bileşenler, geniş yuvarlak şekiller (20 piksel kartlar, hap düğmeler), yumuşak gölgeler içerir ve sıkı ızgaralar yerine rahat 10-16 piksel boşluklarla "nefes alır". Başlığın sesi her şeydir: 70-88 pikselde 600 punto ağırlık ve -0.02em'lik sıkı harf aralığı, metni kullanıcı arayüzü yerine tipografik olarak ele alır—SaaS'tan ziyade editoryal metne daha yakındır.
Sayfanın tüm genişliğini kaplayan koyu renkli bölümler, ortalanmış ve maksimum genişlikte içerik kutularına sahiptir. Ana bölüm dikey olarak ortalanmıştır ve bir başlık, alt metin ve harekete geçirici mesaj (CTA) içerir; ardından bir sonraki bölümü örten büyük bir ürün ekran görüntüsü gelir. Sonraki bölümler, ortalanmış metin blokları ve kart ızgaraları arasında geçiş yapar. Yorumlar bölümü, yorum kartları ve 16 boşluk içeren üç sütunlu bir ızgara kullanır. Navigasyon, solunda logo, ortalanmış bağlantılar ve sağında giriş işlemleri bulunan tek bir üst çubuktan oluşur; sabit bir kenar çubuğu veya mega menü yoktur. Bölümler arasındaki boşluklar geniştir (16 boşluk), yoğun bir ürün ızgarası yerine ferah, editoryal bir ritim yaratır.
Görsel alan, ürün ekran görüntüleriyle domine ediliyor; gerçek uygulama arayüzünü sergileyen, yuvarlak köşeli büyük bir çerçeve, ana ve ikincil bölümleri dolduruyor. Fotoğraflar minimal düzeyde tutuluyor, yalnızca kullanıcı avatarları veya uygulama içi medya önizlemeleri olarak kullanılıyor (örneğin, ürün maketinin sağ panelindeki konser görüntüsü). Güven çubuğundaki logolar, düz, soluk beyaz metin sembolleridir. Dekoratif illüstrasyonlar, soyut grafikler veya 3D render'lar yok. Görsel strateji, ürünü büyük ölçekte sergilemek, tipografinin duygusal işi yapmasına izin vermek ve mercan rengini tek vurgu rengi olarak kullanmaktır.
Palet
Marka
- Coral Ember
#ff4a36— Turuncu, dekoratif detaylar için ikincil bir vurgu rengi olarak ve nadir görülen ipuçlarını öne çıkarmak için kullanılır. Eyleme geçme çağrıları için birincil renk olarak kullanılmamalıdır.
Doğal
- Aubergine Canvas
#181824— Sayfa arka planı, yani ana tuval, saf siyahın yerini alan sıcak, koyu bir tondur ve bu da kullanıcı arayüzünün düz değil, katmanlı görünmesini sağlar. - Elevated Plum
#26253b— Kart yüzeyleri, giriş alanları, gezinme konteynerleri—görünür bir sınır olmadan derinlik oluşturmak için tuvalden bir adım daha kolay. - Pure White
#ffffff— Ana başlıklar, düğme metinleri ve simge çerçeveleri—koyu bir zemin üzerinde maksimum kontrast. - Fog Text
#696f81— Ana metin, ikincil başlıklar ve soluk kenarlıklar; patlıcan rengi bir arka plana karşı rahat okuma için 7:1 kontrast oranı. - Ash Text
#8e8da0— İkincil kullanıcı arayüzü öğeleri, ayırıcılar ve soluk etiketler için nötr bir renk desteklenir. Eylem çağrıları için birincil renk olarak kullanılmamalıdır. - Mist Highlight
#a3a3a7— İnce kenarlıklar, ayırıcılar ve pasif gezinme öğeleri, tuval üzerinde yine de öne çıkan, zarif bir nötr ton oluşturur.
Tipografi
12 ila 88 piksel arası · 9 adım
- sans-serif — yenisiyle değiştirme: Inter · ana hatlar 400 · Sans-serif - çıkarılan verilerde bulundu ancak yapay zeka tarafından tanımlanmadı.
- Haffer XH SemiBold — yenisiyle değiştirme: Inter Tight · ana hatlar 400, 600 · Ekran ve başlıklar için kullanılan birincil yazı tipi. Ana başlıklar için 70-88 piksel boyutunda, -0.02em harf aralığı ve 600 kalınlıkta kullanılır. Dar harf aralığı ve yüksek harf yüksekliği, başlıklara editoryal bir ağırlık kazandırarak koyu arayüzün bir kontrol panelinden ziyade bir dergi kapağına benzemesini sağlar. Kalın ağırlıkta Inter Tight veya General Sans ile değiştirilebilir.
- Jersey 10 — yenisiyle değiştirme: Anybody · ana hatlar 400 · Vurgulu rakamlar ve öne çıkan yazı tipleri için büyük, dekoratif bir yazı tipi. Tipografik vurgular oluşturmak için çok büyük boyutlarda az miktarda kullanılır. Anybody veya Cabinet Grotesk ile değiştirilebilir.
Aralıklar ve biçim
| Amaç | Anlam |
|---|---|
| Yoğunluk | ortalama |
| Temel adım | 10-16px |
| Düğme yarıçapı | 100px |
| Kart yarıçapı | 20px |
| Gölgeler | yumuşak gölgeler |
| Bölümler arasında | 80px |
| Sayfa genişliği | 1200px |
Yapay zeka, web sitenizi Superlist 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
- DNA — Parçacık merceğinden bakıldığında Gece Yarısı Gözlemevi
- Abetterlou — Eyer Derisi Üzerindeki Parıltılar - Koyu kahve-siyah bir arka plana karşı parıldayan sıcak, kremsi bir yazı tipi ve sayfaya bastırılmış sıcak metal hissi veren kehribar-altın düğmeler.
- Galileo-ft — Elektrik mavisi sinyallere sahip derin uzay komuta güvertesi
- Decide AI — Gece yarısı gözlemevi - nane sinyali
- Redis Agency — Mesai saatleri dışında da açık olan editörlük atölyesi, tüm marka çalışmalarının serif yazı tipleri ve tek bir kırmızı turpla yapıldığı zifiri karanlık bir yerdir.
- Spellbook — Mercan rengi mürekkeple aydınlatılmış gece yarısı bir mahkeme salonu—tek sesin sıcak turuncu kalem darbesi olduğu karanlık bir yayın ortamı.
- Linear — gece yarısı hassas aleti
- Origin Financial — Sessiz bir ihtişamın gece yarısı galerisi. Büyük serif yazı tipleri ve birkaç aydınlatılmış renkli panelin, finansın özenle tasarlanmış bir sanat eseri olduğu hissini yarattığı, sessiz, neredeyse karanlık bir oda.
- Hyperstudio — Tasarım obsidyene kazınmıştır. Metin ve ince çizgiler, saf siyah beyaz bir alanı çerçevelerken, arada sırada altın rengi pusula işaretleri yolu gösterir.
- Air — "Camdan Gece Gökyüzü" heykeli
- Raycast — Gece Yarısı Komuta Merkezi, Mercan Neon
- dope.security — Mor işaretli gece terminali