Superlist
Ruang kerja malam hari dengan bara api karang—permukaan aplikasi berwarna terong yang tenang di mana percikan oranye hangat tunggal menandai setiap tindakan.
Superlist menggunakan bahasa produktivitas dalam nuansa ungu tengah malam: ungu terong tua, warna koral hangat sebagai satu-satunya warna utama, dan judul sans-serif besar yang menangkap keseluruhan suasana. Antarmuka membangkitkan perasaan kerja fokus larut malam—tenang, berlapis, dan percaya diri, dengan warna hanya digunakan sebagai penanda fungsional pada ajakan bertindak, status aktif, dan poin-poin penting. Permukaan dilapisi dengan nada gelap halus dengan nuansa ungu (#181824 → #26253b), menghindari warna hitam murni untuk memastikan kedalaman terasa hangat dan bukan steril. Komponen menampilkan bentuk bulat yang lebar (kartu 20px, tombol pil), bayangan lembut, dan "bernapas" melalui celah nyaman 10-16px daripada grid yang rapat. Suara judul adalah segalanya: bobot 600 poin pada 70-88px dengan spasi huruf rapat -0,02em memperlakukan teks sebagai tipografi daripada UI—lebih dekat ke teks editorial daripada SaaS.
Bagian gelap membentang di seluruh lebar halaman, dengan wadah konten yang berpusat dan berukuran maksimal. Bagian utama berpusat secara vertikal dan berisi judul, subteks, dan ajakan bertindak (CTA), diikuti oleh tangkapan layar produk besar yang tumpang tindih dengan bagian berikutnya. Bagian selanjutnya bergantian antara blok teks yang berpusat dan kisi kartu. Bagian ulasan menggunakan kisi tiga kolom dengan kartu ulasan dan 16 jarak antar bagian. Navigasi berupa bilah atas tunggal dengan logo di sebelah kiri, tautan yang berpusat, dan tindakan masuk di sebelah kanan—tanpa bilah sisi tetap atau mega-menu. Jarak antar bagian cukup lebar (16 jarak), menciptakan ritme editorial yang lapang, bukan kisi produk yang padat.
Ruang visual didominasi oleh tangkapan layar produk—bingkai besar dengan sudut membulat, yang menampilkan antarmuka aplikasi sebenarnya, memenuhi bagian utama dan sekunder. Foto-foto diminimalkan, hanya digunakan sebagai avatar pengguna atau pratinjau media dalam aplikasi (misalnya, gambar konser di panel kanan maket produk). Logo pada bilah kepercayaan berupa simbol teks putih datar dan redup. Tidak ada ilustrasi dekoratif, tidak ada grafik abstrak, tidak ada render 3D. Strategi visualnya adalah menampilkan produk dalam skala sebenarnya, membiarkan tipografi melakukan pekerjaan emosional, dan menggunakan warna koral sebagai satu-satunya warna aksen.
Palet
Merek
- Coral Ember
#ff4a36— Warna oranye digunakan sebagai aksen sekunder untuk detail dekoratif dan untuk menyoroti isyarat yang jarang muncul. Warna ini tidak boleh digunakan sebagai warna utama untuk ajakan bertindak.
Netral
- Aubergine Canvas
#181824— Latar belakang halaman, kanvas utama, adalah warna gelap yang hangat yang menggantikan warna hitam murni, membuat antarmuka pengguna tampak berlapis daripada datar. - Elevated Plum
#26253b— Permukaan kartu, kolom input, wadah navigasi—satu langkah lebih mudah daripada kanvas untuk menciptakan kedalaman tanpa batas yang terlihat. - Pure White
#ffffff— Judul utama, teks tombol, dan garis luar ikon—kontras maksimal pada latar belakang gelap. - Fog Text
#696f81— Teks utama, subjudul, dan batas yang redup—rasio kontras 7:1 untuk kenyamanan membaca dengan latar belakang berwarna ungu terong. - Ash Text
#8e8da0— Warna netral didukung untuk elemen UI sekunder, pembatas, dan label yang redup. Warna ini tidak boleh digunakan sebagai warna utama untuk ajakan bertindak (call to action). - Mist Highlight
#a3a3a7— Garis tepi, pembatas, dan elemen navigasi yang tidak aktif menciptakan nuansa netral yang halus namun tetap menonjol di atas kanvas.
Tipografi
dari 12 hingga 88px · 9 langkah
- sans-serif — penggantian: Inter · garis besar 400 · sans-serif - ditemukan dalam data yang diekstrak tetapi tidak dijelaskan oleh AI.
- Haffer XH SemiBold — penggantian: Inter Tight · garis besar 400, 600 · Font utama untuk tampilan dan judul. Font ini digunakan dengan ukuran 70–88px untuk judul hero dengan spasi antar huruf -0,02em dan ketebalan 600. Spasi antar huruf yang sempit dan tinggi huruf yang besar memberikan kesan editorial pada judul, membuat antarmuka gelap terlihat lebih seperti sampul majalah daripada dasbor. Ganti dengan Inter Tight atau General Sans dengan ketebalan tebal.
- Jersey 10 — penggantian: Anybody · garis besar 400 · Font dekoratif berukuran besar untuk angka aksen dan sorotan. Digunakan secara hemat pada ukuran yang sangat besar untuk menciptakan aksen tipografi. Dapat diganti dengan Anybody atau Cabinet Grotesk.
Interval dan bentuk
| Tujuan | Arti |
|---|---|
| Kepadatan | rata-rata |
| Langkah dasar | 10-16px |
| Radius tombol | 100px |
| Radius kartu | 20px |
| Bayangan | bayangan lembut |
| Di antara bagian-bagiannya | 80px |
| Lebar halaman | 1200px |
AI akan membangun situs web Anda dengan gaya Superlist dan mengisinya.
- Isi dengan produk dan postingan melalui tautan - Instagram, TikTok, Facebook.
- Pindahkan konten dari situs lama Anda—cukup tentukan alamatnya.
- Desain modern pada mesin terbaik: React ( Next.js) dengan rendering sisi server dan optimasi SEO langsung dari awal.
- Optimasi SEO otomatis sepenuhnya untuk hasil pencarian dan rekomendasi jaringan saraf.
Gaya serupa
- DNA — Observatorium Tengah Malam seperti yang terlihat melalui lensa partikel.
- Abetterlou — Sparks on Saddle Leather - font lembut dan hangat yang bersinar di atas latar belakang hitam pekat seperti kopi, dengan tombol berwarna kuning keemasan yang terasa seperti logam panas yang ditekan ke halaman.
- Galileo-ft — Ruang kendali luar angkasa dengan sinyal biru elektrik.
- Decide AI — Observatorium tengah malam - sinyal mint
- Redis Agency — Bengkel editorial, yang buka hingga larut malam, adalah tempat yang gelap gulita di mana semua pekerjaan branding dilakukan dengan menggunakan font serif dan sebuah lobak merah.
- Spellbook — Ruang sidang tengah malam yang diterangi tinta koral—permukaan editorial gelap di mana satu-satunya suara adalah goresan pena oranye yang hangat.
- Linear — instrumen presisi tengah malam
- Origin Financial — Sebuah galeri tengah malam yang penuh kemewahan yang tenang. Sebuah ruangan yang sunyi, hampir gelap, di mana font serif besar dan beberapa panel berwarna yang bercahaya menciptakan perasaan bahwa keuangan adalah sebuah karya seni yang dikurasi dengan cermat.
- Hyperstudio — Desainnya diukir pada batu obsidian. Teks dan garis-garis halus membingkai ruang putih berwarna hitam pekat, dengan tanda kompas emas sesekali yang menunjukkan arah.
- Air — patung "Langit Tengah Malam Melalui Kaca"
- Raycast — Pusat Komando Tengah Malam, Neon Karang
- dope.security — Terminal tengah malam dengan lampu suar ungu