Stripe
Buku catatan yang ditulis dengan tinta nila di atas kaca buram.
Stripe menggunakan bahasa yang hampir monokrom untuk instrumen keuangan: kanvas putih lembut dan sejuk dengan judul biru tua, hampir tanpa elemen krom dekoratif, dan satu warna indigo terang (#533afd) yang dapat digunakan sebagai tombol, tautan, atau garis luar ikon. Tipografinya sangat tipis, dengan bobot 300 poin—bahkan pada ukuran 56px—yang terasa percaya diri dan bersahaja daripada terlalu korporat; jarak antar huruf berkurang tajam seiring bertambahnya ukuran. Tombol-tombolnya kecil, berbentuk persegi (4px), dan menggunakan isian ungu atau garis luar ungu yang sangat tipis. Sistem ini sepenuhnya menghindari bayangan; kedalaman dicapai melalui perubahan corak latar belakang (putih → #f8fafd → #e5edf5 → corak ungu), bukan melalui elevasi. Seluruh antarmuka berperilaku seperti buku besar akuntansi atau terminal: informasi padat, garis yang jelas, ruang yang cukup antar bagian, dan warna hanya muncul ketika diperlukan tindakan.
Lebar maksimumnya sekitar 1320px untuk kolom konten yang berpusat pada kanvas putih. Hero berupa blok teks rata kiri dengan ukuran penuh (56px) dengan dua ajakan bertindak di bawahnya, tanpa gambar hero—tipografi itulah yang menjadi hero. Bagian-bagian disusun secara vertikal dengan jarak antar bagian yang sama, yaitu 96px, dan pembatas 1px; tidak ada garis gelap/terang yang berselang-seling. Setiap bagian mengikuti pola berulang: judul bagian kecil dengan huruf kapital semua (warna abu-abu, 12px), kemudian judul 32-48px, kemudian paragraf 22px, kemudian grid kartu produk (3 kolom di desktop) atau blok teks 2 kolom dengan seni visual. Logo klien muncul dalam strip vertikal sempit, rata kiri. Footer berupa strip lebar dengan daftar tautan multi-kolom. Ritme keseluruhannya lambat, terukur, dan didominasi teks—kepadatan informasi rendah, meskipun panjang gulirnya panjang.
Tata letak visualnya sederhana dan bergaya dokumenter. Foto halaman penuh hanya muncul di bagian yang menampilkan studi kasus (misalnya, fotografi lalu lintas udara untuk Hertz), diambil dari atas atau dari sudut dramatis, menggunakan warna alami—tanpa duotone atau pemrosesan warna. Tangkapan layar antarmuka pengguna produk digunakan dalam kartu fitur, ditampilkan dengan sudut tajam dan batas yang jelas, tanpa bingkai perangkat. Logo mitra ditampilkan dengan warna masing-masing, tanpa wadah apa pun. Tidak ada ilustrasi, rendering 3D, atau elemen grafis abstrak dekoratif. Ikon seragam: ketebalan garis 1, ketebalan garis 2 pada latar belakang putih, dengan seni garis geometris (tanda panah, tanda centang, simbol dokumen). Halaman sebagian besar terdiri dari teks dan ruang kosong; gambar menempati kurang dari 3% dari total area visual.
Palet
Merek
- Indigo Ink
#533afd— Warna ungu digunakan untuk tombol yang terisi penuh, status navigasi yang dipilih, dan momen konversi yang dipicu oleh fokus. - Indigo Hover
#7389ff— Warna ungu digunakan untuk menyoroti tautan, tag, dan frasa pendek. Warna ini tidak boleh digunakan sebagai warna utama untuk ajakan bertindak (call to action).
Netral
- Midnight Ink
#061b31— Judul utama dan teks isi memiliki warna gelap, hampir hitam, dengan sedikit nuansa biru dingin, yang menjadi dasar seluruh sistem font. - Slate
#64748d— Teks abu-abu menyoroti tautan, tag, dan frasa pendek. - Steel
#50617a— Teks tambahan dan materi pendukung ditempatkan di antara warna abu-abu dan ungu lembut yang digunakan pada sublisensi. - Smoke
#839bc8— Untuk judul dekoratif besar dan teks yang menyertainya, digunakan warna ungu yang lembut - tidak pernah digunakan pada paragraf isi. - Pure White
#ffffff— Permukaan halaman dan permukaan timbul pada kartu; latar belakang standar yang menjadi acuan pengukuran segala sesuatu yang lain. - Mist
#f8fafd— Latar belakang footer dan pembatas bagian menggunakan warna dingin yang lembut yang memisahkan area tanpa batas yang terlihat.
Tipografi
dari 12 hingga 56px · 9 langkah
- sohne-var — penggantian: Inter Tight (variable · garis besar 300, 400 · Satu-satunya font yang digunakan di seluruh antarmuka adalah untuk judul, teks isi, navigasi, tombol, dan label. Bobot 300 tetap dominan bahkan pada ukuran layar 56px, yang merupakan fitur khas: judul terdengar lebih lembut daripada lantang, membangun otoritas melalui pengendalian diri daripada volume. Bobot 400 hanya muncul pada ukuran 14–16px untuk teks navigasi dan tombol, di mana diperlukan tambahan satu goresan untuk keterbacaan pada ukuran yang lebih kecil.
Interval dan bentuk
| Tujuan | Arti |
|---|---|
| Kepadatan | luas |
| Langkah dasar | 8px |
| Radius tombol | 4px |
| Radius kartu | 4px |
| Bayangan | tidak - batas, bukan bayangan |
| Di antara bagian-bagiannya | 96px |
| Lebar halaman | 1320px |
AI akan membangun situs web Anda dengan gaya Stripe 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
- Ui — rencana klinis pada kertas matte
- monopo saigon — Cahaya cair berkilauan di balik keheningan editorial—galeri editorial monokrom yang mengambang di atas cahaya yang meleleh.
- Ventriloc — Observatorium editorial data di atas kertas hangat - bara oranye tunggal menyoroti ketelitian monokrom.
- Hyer Aviation — Senja di kokpit di atas kertas perkamen. Langit fajar yang pucat bertemu dengan logo serif seukuran badan pesawat, dan satu aksen warna tanah liat hangat memecah kekangan monokrom.
- Family — Sebuah ilustrasi dari dongeng di atas kertas perkamen krem.
- OFF+BRAND. — Bola berkilauan di atas kertas perkamen hangat
- Geniestudio — Sebuah buku catatan dengan pencahayaan lembut di siang hari—jenis buku dengan margin lebar dan satu goresan pena tebal.
- xAI — Laboratorium Krim Hangat dengan Pil Hitam
- Seed — organisme hidup di bawah kaca laboratorium
- Cosmos — Dinding galeri yang dilapisi kain linen dan digantung dengan foto-foto Polaroid.
- Cal — Kepraktisan monokrom, pendekatan manusiawi. Sebuah sistem yang memprioritaskan kejelasan dan fungsionalitas melalui palet hitam-putih yang ketat, namun melembutkannya dengan tipografi yang ramah dan bentuk-bentuk membulat.
- T1 Energy — Gambar fasilitas produksi di atas kertas perkamen hangat adalah pemandangan monokrom yang tenang, di mana skala industri dan tipografi yang halus mewujudkan keseluruhan merek.