Column
sebuah buku besar berwarna biru tua di bawah fajar yang sejuk
Column menggunakan warna biru tua yang pekat dan bernuansa institusional pada latar belakang hampir putih: halaman ini terasa seperti permukaan produk perbankan yang kokoh terlebih dahulu dan tempat bermain pengembang kedua. Warna merek bukanlah satu warna tunggal, tetapi pasangan yang terkoordinasi—biru tua #111a4a untuk struktur yang serius, hijau mint #44b48b untuk data dan kode—dengan satu warna oranye hangat (#ec652b) yang dikhususkan untuk permukaan aksen intensitas tinggi seperti kartu Brex. Tipografi didominasi oleh SuisseIntl, sans serif geometris yang digunakan di seluruh rentang bobot dari 300 (tautan) hingga 600 (tampilan), memberikan sistem gaya editorial yang halus yang tidak dimiliki sebagian besar perusahaan fintech. Kartu mengambang di permukaan putih besar dengan bayangan berlapis yang halus; sebagian besar elemen antarmuka datar, dengan kedalaman hanya muncul di tempat kartu seharusnya terasa seperti objek fisik (widget transaksi, maket produk). Kode dan data keuangan disajikan dalam warna monokrom, berwarna hijau laut—sinyal visual bahwa ini adalah bank yang dibangun oleh para insinyur untuk para insinyur.
Struktur halaman berukuran penuh, berpusat dengan margin samping lebar (64–15 cm pada desktop). Layar utama memiliki tata letak terpisah: judul dan ajakan bertindak disejajarkan ke kiri pada jarak 25 cm, sementara widget transaksi mengambang diposisikan di sebelah kanan pada jarak 55 cm dengan latar belakang peta halftone. Di bawah layar utama, bagian-bagian bergantian antara kanvas putih (4 cm) dan kanvas terang (5 cm) dengan jarak vertikal 6 cm. Konten disusun menurut grid 6 kolom tunggal: blok teks menempati 4 kolom (7 cm), kartu gambar/produk menempati 5–6 kolom, dengan offset yang disengaja dari grid. Bagian yang menjelaskan fitur menggunakan tata letak 2 kolom: teks di sebelah kiri, produk di sebelah kanan. Bagian statistik kepercayaan dibagi menjadi grid 4 kolom di seluruh lebar halaman. Logo pelanggan terletak dalam satu baris yang berpusat dengan jarak 48px. Footer memiliki tata letak dua kolom yang ringkas. Navigasinya berupa bilah atas transparan setinggi 62px yang tetap berada di atas layar utama dengan latar belakang buram yang memudar menjadi putih saat Anda menggulir. Tidak ada bilah samping atau mega-menu—menu tarik-turunnya berupa menu bergaya panah sederhana.
Gaya visualnya minimalis dan fungsional—Column sepenuhnya menghindari foto stok. Bahasa visualnya dibangun berdasarkan tiga sumber: (1) ilustrasi data SVG, khususnya peta dunia halftone bertitik, yang dirender dengan gradien dari indigo ke oranye ke turquoise, menciptakan suasana skala global di balik elemen utama; (2) tata letak kartu produk—widget mengambang yang menampilkan saldo akun, detail transfer, dan cuplikan kode JSON dalam kartu putih dengan bayangan dramatis; (3) visualisasi grafik—grafik candlestick atau bar turquoise dengan garis penghubung tipis yang digunakan di bagian kepercayaan/statistik. Peta halftone adalah elemen visual khas—transisi gradiennya dari #d65620 (oranye) melalui ungu, biru, biru langit, turquoise, dan kuning, menciptakan spektrum yang menyatukan seluruh palet merek pada satu permukaan dekoratif. Ikon memiliki ketebalan garis luar yang seragam sebesar 1,5–2px dalam varian #232730 atau #a9acb6, dengan isian untuk status aktif. Tidak ada foto gaya hidup, tidak ada render 3D abstrak—pengekangan ini disengaja untuk memfokuskan perhatian pada produk dan data.
Palet
Merek
- Indigo Navy
#111a4a— Warna utama merek digunakan untuk tombol ajakan bertindak (call to action) yang terisi, status navigasi aktif, header, dan logo. Warna ungu kebiruan yang pekat memberikan situs nuansa hitam yang solid namun kaya; dipadukan dengan teks putih, warna ini menciptakan tombol yang paling tegas di situs. - Seafoam 600
#44b48b— Warna kode dan data adalah warna merek untuk kunci JSON, pengidentifikasi, dan nilai keuangan dalam cuplikan kode. Warna ini juga digunakan untuk titik data dalam grafik dan visualisasi pertumbuhan. - Seafoam 700
#167e6c— Warna hijau laut yang lebih gelap digunakan untuk garis luar, garis grafik, dan aksen ikon dalam konteks data. Ini menstabilkan skala warna hijau laut terhadap latar belakang yang lebih gelap. - Seafoam 400
#94efb7— Cuplikan kode yang disorot berisi nilai string, URL, dan titik akhir API di dalam blok kode. Warna hijau muda yang paling terang terlihat seperti font monospasi dengan sedikit warna kehijauan. - Deep Sea
#023247— Garis luar dekoratif dan warna aksen grafik adalah warna turquoise yang kaya, yang digunakan dalam ilustrasi SVG dan visualisasi data, bersama dengan skala warna seafoam.
Netral
- Midnight Ink
#011821— Permukaan gelap dan teks yang disorot – latar belakang kartu produk, teks utama dengan kontras tinggi. Lebih mendekati abu-abu dengan rona biru kehijauan yang sejuk; digunakan sebagai dasar untuk mode gelap ketika suatu bagian perlu dibalik. - Slate Ink
#3b3e47— Judul sekunder dan teks utama sedikit lebih hangat daripada Midnight Ink, digunakan di tempat di mana warna hitam murni akan tampak terlalu keras pada kanvas yang terang. - Steel
#7c7f88— Teks utama dan teks tautan didominasi oleh warna yang lembut (digunakan 245 kali dalam teks utama). Warna abu-biru netral yang dianggap tenang, bukan gambar yang pucat. - Fog
#a9acb6— Garis luar ikon, batas tersier, dan teks tempat penampung. Warna abu-abu sedang yang memisahkan teks tanpa bersaing dengannya. - Mist
#cbcccf— Teks utama—tanda tangan, pernyataan penafian, dan tulisan kecil—dapat dibaca dengan jelas pada latar belakang putih, tetapi secara visual kurang mencolok. - Silver Lining
#e3e4e8— Batas kartu, batas kolom input, garis pemisah. Warna struktural dan halus ini digunakan di tempat dua permukaan perlu dipisahkan tanpa bayangan.
Tipografi
dari 10 hingga 60px · 10 langkah
- SuisseIntl — penggantian: Inter · garis besar 300, 400, 500, 600 · Font utama – digunakan untuk semua judul, teks isi, tombol, navigasi, tautan, dan teks kartu. Sans serif geometris yang unik memberikan Column gaya editorial yang khas, membedakannya dari perusahaan fintech lain yang bekerja secara eksklusif hanya dengan Inter. Bobotnya adalah 600 pada 52–60px untuk judul, 500 untuk subjudul, 400 untuk teks isi, dan 300 untuk tautan dengan penekanan rendah.
- SuisseIntlMono — penggantian: JetBrains Mono · garis besar 400 · Font monospasi yang mirip dengan SuisseIntl, digunakan untuk label teknis, pengenal API, dan data yang disematkan dalam elemen UI. Font ini mempertahankan proporsi yang sama dengan SuisseIntl, sehingga teks monospasi dan proporsional sejajar dengan benar dalam konteks campuran.
- SFMono — penggantian: Fira Code · garis besar 400 · Tampilan cuplikan kode – ditampilkan dalam contoh JSON dan blok dokumentasi API. Warna hijau muda digunakan untuk membedakan kode secara visual dari teks UI.
Interval dan bentuk
| Tujuan | Arti |
|---|---|
| Kepadatan | rata-rata |
| Langkah dasar | 8px |
| Radius tombol | 8px |
| Radius kartu | 8px |
| Bayangan | tidak - batas, bukan bayangan |
| Di antara bagian-bagiannya | 72px |
| Lebar halaman | 1200px |
AI akan membangun situs web Anda dengan gaya Column 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
- dope.security — Terminal tengah malam dengan lampu suar ungu
- Leonardo — Sebuah galeri editorial terbalik. Sebuah museum berdinding hitam di mana judul-judul berwarna ungu berfungsi sebagai instalasi dinding, dan potret yang dihasilkan AI tergantung dalam kisi-kisi padat di bawahnya.
- VEED — Dinding galeri putih dengan tombol lampu hijau neon.
- Craft Docs — Kolase digital untuk pembuatan buku tempel. Desainnya menyerupai buku tempel yang dibuat dengan penuh pertimbangan dan bertekstur, di mana catatan digital yang terstruktur dipadukan dengan tekstur organik yang lembut.
- Letter — Sebuah galeri pribadi yang menampilkan artefak berkilauan dari gudang penyimpanan. Ruang pameran berdinding hitam tempat judul-judul berhuruf serif melayang di atas patung-patung krom di dinding galeri yang berwarna gelap.
- Railway — Kereta Malam Kosmik. Sebuah perjalanan tenang dan mendebarkan menembus ruang angkasa gelap bertabur bintang, dipandu oleh sinyal yang jelas.
- Garden Eight — Sebuah editorial monumental di atas kertas berwarna krem. Judul serif berukuran 215px berdiri sendiri di atas kertas perkamen yang hangat, dikelilingi oleh bentuk-bentuk pahatan yang mengambang dan ruang kosong yang mengingatkan pada udara laut—halaman ini terasa lebih seperti sampul monografi seni daripada dasbor mobil.
- Steep — Analisis Huruf Serif pada Kertas Hangat
- ElevenLabs — Esai foto dalam nuansa krem hangat dengan judul yang halus. Sebuah buku catatan bergaya Bauhaus—kertas berwarna putih telur, tinta hitam, dan aksen ungu dan oranye tunggal untuk tampilan produk.
- Awesomic — Jaring seng editorial dengan tanda baca oranye yang mengingatkan pada confetti.
- Monad — jurnal teknis editorial tentang perkamen hangat
- AI for Business — Ruang pamer editorial bergaya brutalist dengan nuansa abu-abu hangat.