
Apple
Sebuah ruangan putih dengan satu saklar biru.
Desain Apple merupakan contoh kesederhanaan: kanvas yang hampir putih, ruang putih yang luas, dan aksen biru cerah tunggal yang membuat setiap tindakan terasa disengaja. Fokus utamanya adalah tipografi—SF Pro, dengan spasi huruf negatif yang berkurang seiring bertambahnya ukuran, memberikan kejelasan arsitektural pada judul tanpa terlalu berat. Produk itu sendiri adalah desainnya: foto produk besar dan gambar gaya hidup mendominasi, sementara elemen krom meredup menjadi bingkai tipis, navigasi transparan, dan garis-garis halus. Bagian-bagiannya bergantian dengan latar belakang abu-abu muda dengan blok warna penuh untuk materi promosi, menciptakan ritme melalui perubahan skala daripada elemen dekoratif.
Tata letak halaman adalah halaman lebar penuh tanpa lebar kontainer maksimum tetap—bagian-bagian membentang dari tepi ke tepi, dengan blok teks yang berpusat di dalamnya sekitar 980px. Navigasi berupa bilah global tunggal dan tetap dengan subfolder tambahan untuk setiap produk yang muncul saat digulir. Tata letak utama selalu berpusat: nama produk yang besar, slogan satu baris, dua tombol kecil, kemudian gambar produk yang memenuhi sisa tampilan. Bagian-bagian ditumpuk secara vertikal dengan ritme vertikal yang cukup lebar (64px+ di antara bagian-bagian), bergantian antara latar belakang #f5f5f7 dan berwarna. Halaman bawah adalah satu baris horizontal kartu layanan lebar penuh (Apple TV+, Fitness+, Musik, Arcade), masing-masing berupa blok foto dengan teks overlay dan tombol kecil. Tidak ada sidebar, tidak ada tata letak konten multi-kolom, tidak ada komposisi asimetris—semuanya berpusat, ditumpuk, dan simetris.
Fotografi adalah bahasa visual yang dominan. Foto produk diambil dengan latar belakang putih murni atau abu-abu lembut, tanpa konteks apa pun—perangkat itu sendiri adalah bintangnya, terisolasi dan diterangi. Foto gaya hidup ditampilkan dalam banner lebar penuh, seringkali dengan objek yang dipotong rapat. Gradien warna (biru pastel, merah muda, hijau) berfungsi sebagai latar belakang untuk bagian produk, bukan sebagai dekorasi. Ikonografinya minimalis dan berbasis garis, setebal 1-2 piksel, dengan skala abu-abu yang sama dengan teks. Tidak ada ilustrasi, tidak ada grafik abstrak, tidak ada rendering 3D, kecuali untuk foto produk itu sendiri.
Palet
Merek
- Apple Blue
#0071e3— Tombol aksi yang terisi, status terpilih - satu-satunya warna kromatik interaktif yang digunakan secara hemat agar setiap kemunculannya bermakna. - Link Blue
#0066cc— Batas aksi yang disorot, tautan tersemat - warna yang lebih jenuh daripada Apple Blue digunakan di tempat tablet yang diisi penuh akan terlalu mencolok. - Signal Blue
#2997ff— Bingkai dekoratif, garis luar gambar, batas ikon - warna biru paling terang dalam sistem, digunakan untuk menciptakan suasana daripada untuk interaksi pengguna.
Netral
- Carbon
#1d1d1f— Teks utama, batas judul, garis navigasi, batas kartu - warna tinta yang dominan hampir hitam dengan sedikit sentuhan kehangatan. - Frost
#f5f5f7— Kanvas halaman, latar belakang teks utama, dan permukaan footer menggunakan warna abu-abu muda khas Apple, sedikit lebih dingin daripada putih murni. - Ice
#f4f8fb— Pengisian permukaan yang ekspresif, rona warna yang lembut, teks tombol pada latar belakang gelap—rona biru lembut yang menghidupkan bagian tersebut tanpa membuatnya terlalu mencolok. - Smoke
#333333— Teks sekunder, isian navigasi, batas tombol - Warna netral serbaguna untuk batas dan ikon yang membutuhkan kesan lebih kuat daripada abu-abu sedang. - Graphite
#474747— Teks navigasi, batas navigasi, batas tautan - menempati posisi menengah antara Karbon dan Asap dalam hierarki elemen. - Ash
#707070— Teks footer, batas daftar, batas navigasi, teks isi yang redup - Abu-abu sedang untuk konten yang perlu ditampilkan tetapi tidak menonjol.
Tipografi
dari 12 hingga 56px · 8 langkah
- SF Pro Display — penggantian: Inter · garis besar 400, 600, 700 · Judul dan teks besar—ukuran 40px+ menggunakan format tampilan untuk bukaan yang lebih sempit dan pelacakan negatif yang lebih kuat; 700 dikhususkan untuk tata letak iklan, dan 400 untuk nama produk dalam konten editorial.
- SF Pro Text — penggantian: Inter · garis besar 300, 400, 600 · Teks isi, navigasi, tombol, subjudul — font kerja; 400 untuk teks isi, 300 untuk subjudul dan label kualifikasi, 600 untuk elemen navigasi dan teks tombol; spasi antar huruf negatif berkurang secara proporsional terhadap ukuran (dari -0,022em hingga 12px menjadi -0,01em hingga 44px).
Interval dan bentuk
| Tujuan | Arti |
|---|---|
| Kepadatan | rata-rata |
| Langkah dasar | 12px |
| Radius tombol | 980px |
| Radius kartu | 8px |
| Bayangan | tidak - batas, bukan bayangan |
| Di antara bagian-bagiannya | 64px |
| Lebar halaman | 1440px |
AI akan membangun situs web Anda dengan gaya Apple 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
- Studio — Dinding galeri yang bergerak. Setiap layar mewakili permukaan pameran yang tenang dan abu-abu, tempat materi tipografi dan karya kreatif yang saling tumpang tindih bersaing untuk mendapatkan perhatian.
- Mollie — Sebuah meja kasir berbahan kasmir, sebuah buku besar berwarna gelap. Sisakan ruang putih yang cukup untuk desain editorial di sekitar teks hitam, lalu perkuat poin-poin terkait produk dengan warna krem hangat, cokelat espresso, dan foto-foto nyata dari metode pembayaran.
- Basis Theory — Terminal pembayaran di studio desain. Kertas teknis putih, lapisan transaksi transparan yang saling tumpang tindih, dan satu elemen kontrol berwarna turquoise menentukan arah visualnya.
- CleanShot X — Sebuah studio dengan meja kerja berlampu biru. Ciptakan ruang putih yang tenang di sekitar teks hitam yang ringkas, lalu biarkan kontrol berwarna biru yang kaya dan gambar produk Mac yang berlapis menjadi pusat perhatian.
- Modern Treasury — Buku besar perbendaharaan di atas kertas grafik. Buat halaman-halaman yang menyerupai lembar operasi putih yang tenang, di mana arus kas ditampilkan dengan garis-garis halus, simpul berlabel, dan kontrol tersembunyi yang tepat.
- Basha-Franklin — Kisi-kisi galeri di bawah ambang pintu putih. Gunakan warna hangat #f4ede6, struktur hitam yang halus, dan kolom asimetris berdasarkan foto yang menyerupai portofolio arsitektur cetak.
- Bajgart Office — Dinding galeri editorial. Gunakan ruang putih besar di mana font serif yang halus dan fragmen portofolio memiliki bobot visual yang lebih besar daripada elemen antarmuka berlapis krom.
- Heptabase — Meja yang diterangi sinar matahari. Permukaan yang hangat dan mirip kertas, kontrol berwarna arang, dan jendela mengambang untuk riset menciptakan nuansa ruang kerja yang terorganisir, bukan sekadar panel kontrol perangkat lunak.
- Bejamas — Piyama—warna hijau limau melalui kaca hitam. Ciptakan halaman editorial yang tenang dan abu-abu muda yang diselingi panel hitam menawan di mana garis-garis cahaya hijau yang kabur berpotongan dengan permukaan.
- Baba — Catatan perhatian dalam cahaya matahari merah. Buat garis naratif merah lebar di sekitar permukaan informasi putih, merah muda, dan krem yang intim, menggunakan foto orang sebagai pusat emosionalnya.
- Grafana Labs — Ruang kendali Stasiun Sinyal Sunrise. Ruang kerja abu-putih yang tenang dipadukan dengan gradien cakrawala empat warna yang lebar dan sinyal antarmuka biru yang presisi.
- Kagi — Ruang baca terpisah. Ciptakan ruang putih terbuka di sekitar teks grafit tebal, menggunakan aksen ungu yang lembut dan permukaan pastel hangat untuk memecah ketenangan.