Superlist
Marjon cho'g'lari bilan bezatilgan tungi ish maydoni — har bir harakatni bitta iliq to'q sariq uchqun signal beradigan sokin baqlajon ilova yuzasi
Superlist yarim tunda binafsha rangda unumdorlik tilidan foydalanadi: chuqur baqlajon, yagona asosiy rang sifatida iliq marjon va butun atmosferani aks ettiruvchi katta sans-serif sarlavhalar. Interfeys tungi ishlarga qaratilgan tuyg'uni uyg'otadi - jim, qatlamli va ishonchli, rang faqat harakatga chaqiruvlar, faol holatlar va asosiy fikrlarda funktsional tinish belgilari sifatida ishlatiladi. Sirtlar nozik qorong'u tonlarda, binafsha rang taglik bilan qatlamlangan (#181824 → #26253b), chuqurlik steril emas, balki iliq his qilinishini ta'minlash uchun sof qora rangdan saqlanib. Komponentlar keng yumaloq shakllarga (20 pikselli kartalar, tabletka tugmalari), yumshoq soyalarga ega va tor panjaralar o'rniga qulay 10-16 pikselli bo'shliqlar orqali "nafas oladi". Sarlavhaning ovozi hamma narsadir: 70-88 pikselli 600 balllik og'irlik, -0.02em harflar oralig'i bilan matnni UI emas, balki tipografik deb hisoblaydi - bu SaaSga qaraganda tahririyat matniga yaqinroq.
Qorong'u bo'limlar sahifaning butun kengligini qamrab oladi, markazlashtirilgan, maksimal kenglikdagi kontent konteynerlari mavjud. Asosiy bo'lim vertikal markazlashtirilgan bo'lib, sarlavha, pastki matn va harakatga chaqiruv (CTA) ni o'z ichiga oladi, undan keyin keyingi bo'lim ustiga katta mahsulot skrinshoti qo'yiladi. Keyingi bo'limlar markazlashtirilgan matn bloklari va karta panjaralari orasida almashinib turadi. Sharhlar bo'limida sharh kartalari va 16 ta olukli uch ustunli panjara ishlatiladi. Navigatsiya chap tomonda logotip, o'ng tomonda markazlashtirilgan havolalar va kirish harakatlari bo'lgan bitta yuqori paneldir - o'zgarmas yon panel yoki mega-menyu yo'q. Bo'limlar orasidagi oluklar saxiy (16 ta oluk) bo'lib, zich mahsulot panjarasi o'rniga keng, tahririy ritm yaratadi.
Vizual makon mahsulot skrinshotlari bilan ustunlik qiladi — asosiy va ikkinchi darajali bo'limlarni haqiqiy ilova interfeysini aks ettiruvchi yumaloq burchakli katta ramka to'ldiradi. Rasmlar minimal, faqat foydalanuvchi avatarlari yoki ilova ichidagi medianing oldindan ko'rishlari sifatida ishlatiladi (masalan, mahsulot maketining o'ng panelidagi konsert tasviri). Ishonch panelidagi logotiplar tekis, o'chirilgan oq matn belgilaridir. Dekorativ illyustratsiyalar, mavhum grafikalar, 3D renderlar yo'q. Vizual strategiya mahsulotni masshtabda namoyish etish, tipografiyaga hissiy ishni bajarishga imkon berish va marjon rangini yagona urg'u rangi sifatida ishlatishdir.
Palitra
Brend
- Coral Ember
#ff4a36— Apelsin rangi dekorativ detallar uchun ikkinchi darajali aksent va kamdan-kam uchraydigan ishoralarni ta'kidlash uchun ishlatiladi. U harakatga chaqiruvlar uchun asosiy rang sifatida ishlatilmasligi kerak.
Neytral
- Aubergine Canvas
#181824— Sahifa foni, asosiy tuval, sof qora rang o'rnini bosadigan iliq, to'q rang bo'lib, foydalanuvchi interfeysini tekis emas, balki qatlamli ko'rinishga keltiradi. - Elevated Plum
#26253b— Karta sirtlari, kiritish maydonlari, navigatsiya konteynerlari — ko'rinadigan chegarasiz chuqurlik yaratish uchun tuvalga qaraganda bir qadam osonroq. - Pure White
#ffffff— Asosiy sarlavhalar, tugma matni va belgi konturlari — qorong'i tuvalda maksimal kontrast. - Fog Text
#696f81— Asosiy matn, ikkilamchi sarlavhalar va o'chirilgan chegaralar baqlajon rangidagi fonda qulay o'qish uchun 7:1 kontrast nisbatiga ega. - Ash Text
#8e8da0— Neytral rang ikkilamchi UI elementlari, ajratgichlar va ovozsiz yorliqlar uchun qo'llab-quvvatlanadi. U harakatga chaqiruvlar uchun asosiy rang sifatida ishlatilmasligi kerak. - Mist Highlight
#a3a3a7— Nozik chegaralar, ajratgichlar va faol bo'lmagan navigatsiya elementlari tuval fonida hali ham ajralib turadigan nozik neytral ohangni yaratadi.
Tipografiya
12 dan 88 pikselgacha · 9 qadam
- sans-serif — almashtirish: Inter · konturlar 400 · sans-serif - olingan ma'lumotlarda topilgan, ammo AI tomonidan tavsiflanmagan.
- Haffer XH SemiBold — almashtirish: Inter Tight · konturlar 400, 600 · Displey va sarlavhalar uchun asosiy shrift. U harflar oralig'i -0.02em va og'irligi 600 bo'lgan sarlavhalar uchun 70–88 piksel o'lchamda ishlatiladi. Tor harflar oralig'i va katta harf balandligi sarlavhalarga tahririyat og'irligini beradi, bu esa qorong'u interfeysni boshqaruv panelidan ko'ra jurnal muqovasiga ko'proq o'xshatadi. Qalin shriftdagi Inter Tight yoki General Sans bilan almashtiring.
- Jersey 10 — almashtirish: Anybody · konturlar 400 · Urg'u raqamlari va yorqin ranglar uchun katta, dekorativ shrift. Tipografik urg'ularni yaratish uchun juda katta o'lchamlarda kamdan-kam ishlatiladi. Uni Anybody yoki Cabinet Grotesk bilan almashtirish mumkin.
Intervallar va shakl
| Maqsad | Ma'nosi |
|---|---|
| Zichlik | o'rtacha |
| Asosiy qadam | 10-16px |
| Tugma radiusi | 100px |
| Karta radiusi | 20px |
| Soyalar | yumshoq soyalar |
| Bo'limlar orasida | 80px |
| Sahifa kengligi | 1200px |
Sun'iy intellekt veb-saytingizni Superlist uslubida yaratadi va uni to'ldiradi
- Mahsulotlar va postlarni Instagram, TikTok, Facebook havolalari orqali to'ldiring.
- Eski saytingizdan kontentni o'tkazing — shunchaki manzilni ko'rsating.
- Eng yaxshi dvigatelda zamonaviy dizayn: React ( Next.js) server renderlash va SEO optimallashtirish bilan darhol.
- Qidiruv natijalari va neyron tarmoq tavsiyalari uchun to'liq avtomatlashtirilgan SEO optimallashtirish.
O'xshash uslublar
- DNA — Yarim tunda rasadxona zarrachalar linzasi orqali ko'rinib turibdi
- Abetterlou — Egar charmidagi uchqunlar - chuqur qahva rangidagi qora fonda porlab turgan issiq kremsi shrift, sahifaga bosilgan issiq metall kabi his qilinadigan kehribar-tilla rangli tugmalar.
- Galileo-ft — Elektr ko'k signallarga ega chuqur kosmik buyruqlar palubasi
- Decide AI — Yarim tunda rasadxona - yalpiz signali
- Redis Agency — Ish vaqtidan keyin ochiq bo'lgan tahririyat ustaxonasi - bu qorong'u joy, bu yerda barcha brending ishlari serif shriftlar va bitta qizil turp yordamida amalga oshiriladi.
- Spellbook — Yarim tunda marjon siyoh bilan yoritilgan sud zali — qorongʻu tahririyat yuzasi, unda faqat iliq toʻq sariq ruchkaning zarbasi eshitiladi
- Linear — yarim tunda aniqlik asbobi
- Origin Financial — Yarim tunda sokin hashamat galereyasi. Katta serif shriftlar va bir nechta yoritilgan rangli panellar moliya puxta tanlangan san'at asari degan tuyg'uni uyg'otadigan sokin, deyarli qorong'i xona.
- Hyperstudio — Dizayn obsidian rangiga chizilgan. Matn va mayda chiziqlar sof qora rangdagi oq joyni o'rab oladi, vaqti-vaqti bilan yo'lni ko'rsatuvchi oltin kompas belgilari mavjud.
- Air — "Shisha orqali yarim tun osmoni" haykali
- Raycast — Yarim tunda qo'mondonlik markazi, Coral Neon
- dope.security — Binafsha mayoqlar bilan yarim tungi terminal