Superlist
Ruang kerja waktu malam dengan bara karang—permukaan terung yang tenang di mana percikan api oren hangat menandakan setiap tindakan
Superlist menggunakan bahasa produktiviti dalam ton ungu tengah malam: terung pekat, karang hangat sebagai satu-satunya warna utama dan tajuk utama sans-serif besar yang merangkumi keseluruhan suasana. Antara muka ini membangkitkan rasa kerja yang tertumpu pada lewat malam—tenang, berlapis dan yakin, dengan warna hanya digunakan sebagai tanda baca berfungsi pada ajakan bertindak, keadaan aktif dan perkara penting. Permukaan berlapis dalam ton gelap halus dengan ton bawah ungu (#181824 → #26253b), mengelakkan warna hitam tulen untuk memastikan kedalamannya terasa hangat dan bukannya steril. Komponen menampilkan bentuk bulat yang luas (kad 20px, butang pil), bayang lembut dan "bernafas" melalui jurang 10-16px yang selesa dan bukannya grid yang ketat. Suara tajuk utama adalah segalanya: pemberat 600 poin pada 70-88px dengan jarak huruf yang ketat -0.02em menganggap teks sebagai tipografi dan bukannya UI—ia lebih hampir dengan salinan editorial daripada SaaS.
Bahagian gelap merangkumi keseluruhan lebar halaman, dengan bekas kandungan selebar maksimum yang berpusat. Bahagian utama berpusat secara menegak dan mengandungi tajuk utama, subteks dan seruan bertindak (CTA), diikuti dengan tangkapan skrin produk yang besar yang bertindih dengan bahagian seterusnya. Bahagian berikutnya berselang-seli antara blok teks berpusat dan grid kad. Bahagian ulasan menggunakan grid tiga lajur dengan kad ulasan dan 16 talang. Navigasi ialah bar atas tunggal dengan logo di sebelah kiri, pautan berpusat dan tindakan log masuk di sebelah kanan—tiada bar sisi tetap atau mega-menu. Talang antara bahagian luas (16 talang), mewujudkan rentak editorial yang luas dan bukannya grid produk yang padat.
Ruang visual didominasi oleh tangkapan skrin produk—bingkai besar dengan sudut bulat, yang mempamerkan antara muka aplikasi sebenar, mengisi bahagian utama dan sekunder. Foto adalah minimum, hanya digunakan sebagai avatar pengguna atau pratonton media dalam aplikasi (contohnya, imej konsert di panel kanan mockup produk). Logo pada bar kepercayaan ialah simbol teks putih yang rata dan disenyapkan. Tiada ilustrasi hiasan, tiada grafik abstrak, tiada pemaparan 3D. Strategi visual adalah untuk mempamerkan produk pada skala besar, biarkan tipografi melakukan kerja emosi dan menggunakan karang sebagai satu-satunya warna aksen.
Palet
Jenama
- Coral Ember
#ff4a36— Warna oren digunakan sebagai aksen sekunder untuk perincian hiasan dan untuk menonjolkan isyarat yang jarang berlaku. Ia tidak boleh digunakan sebagai warna utama untuk seruan bertindak.
Neutral
- Aubergine Canvas
#181824— Latar belakang halaman, kanvas utama, ialah warna gelap dan hangat yang menggantikan warna hitam tulen, menjadikan antara muka pengguna kelihatan berlapis dan bukannya rata. - Elevated Plum
#26253b— Permukaan kad, medan input, bekas navigasi—satu langkah lebih mudah daripada kanvas untuk mencipta kedalaman tanpa sempadan yang boleh dilihat. - Pure White
#ffffff— Tajuk utama, teks butang dan garis besar ikon—kontras maksimum pada kanvas gelap. - Fog Text
#696f81— Teks utama, tajuk sekunder dan sempadan yang disenyapkan—nisbah kontras 7:1 untuk bacaan yang selesa dengan latar belakang berwarna terung. - Ash Text
#8e8da0— Warna neutral disokong untuk elemen UI sekunder, pembahagi dan label yang disenyapkan. Ia tidak boleh digunakan sebagai warna utama untuk seruan bertindak. - Mist Highlight
#a3a3a7— Sempadan halus, pembahagi dan elemen navigasi yang tidak aktif mencipta rona neutral halus yang masih menonjol pada kanvas.
Tipografi
dari 12 hingga 88px · 9 langkah
- sans-serif — penggantian: Inter · garis besar 400 · sans-serif - terdapat dalam data yang diekstrak tetapi tidak diterangkan oleh AI.
- Haffer XH SemiBold — penggantian: Inter Tight · garis besar 400, 600 · Fon utama untuk paparan dan tajuk. Ia digunakan pada saiz 70–88px untuk tajuk wira dengan jarak huruf -0.02em dan pemberat 600. Jarak huruf yang sempit dan ketinggian huruf yang besar memberikan tajuk pemberat editorial, menjadikan antara muka gelap kelihatan lebih seperti kulit majalah daripada papan pemuka. Gantikan dengan Inter Tight atau General Sans dalam pemberat tebal.
- Jersey 10 — penggantian: Anybody · garis besar 400 · Fon hiasan yang besar untuk nombor aksen dan sorotan. Digunakan dengan berhati-hati pada saiz yang sangat besar untuk mencipta aksen tipografi. Boleh digantikan dengan Anybody atau Cabinet Grotesk.
Selang dan bentuk
| Tujuan | Maksudnya |
|---|---|
| Ketumpatan | purata |
| Langkah asas | 10-16px |
| Jejari butang | 100px |
| Jejari kad | 20px |
| Bayang-bayang | bayang-bayang lembut |
| Antara bahagian | 80px |
| Lebar halaman | 1200px |
AI akan membina laman web anda dalam gaya Superlist dan mengisinya
- Isi dengan produk dan siaran melalui pautan - Instagram, TikTok, Facebook.
- Pindahkan kandungan dari tapak lama anda—cuma nyatakan alamatnya.
- Reka bentuk moden pada enjin terbaik: React ( Next.js) dengan pemaparan pelayan dan pengoptimuman SEO sedia ada.
- Pengoptimuman SEO automatik sepenuhnya untuk hasil carian dan cadangan rangkaian saraf.
Gaya yang serupa
- DNA — Balai Cerap Tengah Malam seperti yang dilihat melalui kanta zarah
- Abetterlou — Percikan pada Kulit Pelana - fon berkrim hangat yang bersinar dengan latar belakang hitam kopi yang pekat, dengan butang emas ambar yang terasa seperti logam panas yang ditekan ke dalam halaman.
- Galileo-ft — Dek arahan angkasa lepas dengan isyarat biru elektrik
- Decide AI — Balai Cerap pada tengah malam - isyarat pudina
- Redis Agency — Bengkel editorial, yang dibuka selepas waktu pejabat, merupakan tempat yang gelap gelita di mana semua kerja penjenamaan dilakukan dengan fon serif dan sebiji lobak merah.
- Spellbook — Sebuah bilik mahkamah tengah malam yang diterangi dakwat karang—permukaan editorial gelap di mana satu-satunya bunyi hanyalah sapuan pen oren yang hangat
- Linear — instrumen ketepatan tengah malam
- Origin Financial — Sebuah galeri tengah malam yang penuh dengan kemewahan yang tenang. Sebuah bilik yang sunyi dan hampir gelap di mana fon serif yang besar dan beberapa panel berwarna yang diterangi mencipta perasaan bahawa kewangan adalah karya seni yang dikurasi dengan teliti.
- Hyperstudio — Reka bentuknya dicoret menjadi obsidian. Teks dan garisan halus membingkai ruang putih berwarna hitam tulen, dengan tanda kompas keemasan sekali-sekala menunjukkan jalan.
- Air — arca "Langit Tengah Malam Melalui Kaca"
- Raycast — Pusat Perintah Tengah Malam, Coral Neon
- dope.security — Terminal tengah malam dengan suar ungu