Column
buku besar biru gelap di bawah subuh yang sejuk
Kolum menggunakan warna biru laut institusional yang pekat pada latar belakang hampir putih: halaman tersebut terasa seperti permukaan produk perbankan yang teguh dahulu dan kemudian taman permainan pembangun. Warna jenama bukanlah satu warna, tetapi sepasang warna yang diselaraskan—biru laut #111a4a untuk struktur yang serius, hijau pudina #44b48b untuk data dan kod—dengan satu warna oren hangat (#ec652b) yang dikhaskan untuk permukaan aksen intensiti tinggi seperti kad Brex. Tipografi didominasi oleh SuisseIntl, sans serif geometrik yang digunakan merentasi keseluruhan julat berat dari 300 (pautan) hingga 600 (paparan), memberikan sistem gaya editorial yang halus yang tidak dimiliki oleh kebanyakan syarikat fintech. Kad terapung pada permukaan putih besar dengan bayang-bayang berlapis yang halus; kebanyakan elemen antara muka adalah rata, dengan kedalaman hanya muncul di tempat kad sepatutnya terasa seperti objek fizikal (widget transaksi, mockup produk). Kod dan data kewangan dibentangkan dalam monokrom, berwarna buih laut—isyarat visual bahawa ini adalah bank yang dibina oleh jurutera untuk jurutera.
Struktur halaman adalah lebar penuh, berpusat dengan margin sisi yang lebar (64–15 cm pada desktop). Skrin utama ialah susun atur berpecah: tajuk utama dan seruan bertindak dijajarkan ke kiri pada 25 cm, manakala widget transaksi terapung diletakkan di sebelah kanan pada 55 cm dengan latar belakang peta separuh ton. Di bawah skrin utama, bahagian berselang-seli antara kanvas putih (4 cm) dan kanvas cerah (5 cm) dengan talang menegak 6 cm. Kandungan disusun mengikut grid 6 lajur tunggal: blok teks menempati 4 lajur (7 cm), kad imej/produk menempati 5–6 lajur, dengan ofset yang disengajakan daripada grid. Bahagian yang menerangkan ciri menggunakan susun atur 2 lajur: teks di sebelah kiri, produk di sebelah kanan. Bahagian statistik kepercayaan dibahagikan kepada grid 4 lajur merentasi lebar penuh halaman. Logo pelanggan terletak dalam baris berpusat tunggal dengan talang 48px. Pengaki mempunyai susun atur dua lajur yang padat. Navigasi ialah bar atas lutsinar setinggi 62 piksel yang tetap di atas skrin utama dengan latar belakang kabur yang akan pudar menjadi putih semasa anda menatal. Tiada bar sisi atau mega-menu—menu lungsur turun ialah menu ringkas berbentuk anak panah.
Gaya visualnya minimalis dan berfungsi—Lajur mengelakkan sepenuhnya fotografi stok. Bahasa visual dibina berdasarkan tiga sumber: (1) ilustrasi data SVG, khususnya peta dunia separuh ton bertitik, yang dipamerkan dengan kecerunan dari nila ke jingga ke firus, mewujudkan suasana skala global di belakang elemen utama; (2) susun atur kad produk—widget terapung yang memaparkan baki akaun, butiran pemindahan dan coretan kod JSON dalam kad putih dengan bayang-bayang dramatik; (3) visualisasi carta—carta candlestick atau bar firus dengan garis penghubung nipis yang digunakan dalam bahagian kepercayaan/statistik. Peta separuh ton ialah elemen visual istimewa—peralihan kecerunannya daripada #d65620 (jingga) melalui ungu, biru, biru laut, firus dan kuning, mewujudkan spektrum yang menyatukan keseluruhan palet jenama pada satu permukaan hiasan. Ikon mempunyai ketebalan garisan seragam 1.5–2px dalam varian #232730 atau #a9acb6, dengan isian untuk keadaan aktif. Tiada foto gaya hidup, tiada render 3D abstrak—kekangan ini disengajakan untuk menumpukan perhatian pada produk dan data.
Palet
Jenama
- Indigo Navy
#111a4a— Warna jenama utama digunakan untuk seruan bertindak yang lengkap, keadaan navigasi aktif, pengepala dan logo. Warna ungu-biru tua memberikan laman web ini rona hitam yang kukuh namun kaya; digandingkan dengan teks putih, ia menghasilkan butang yang paling tegas di laman web ini. - Seafoam 600
#44b48b— Warna kod dan data ialah warna jenama untuk kunci JSON, pengecam dan nilai kewangan dalam coretan kod. Ia juga digunakan untuk titik data dalam carta dan visualisasi pertumbuhan. - Seafoam 700
#167e6c— Warna buih laut yang lebih gelap untuk garis besar, garis carta dan ikon memberi penekanan dalam konteks data. Ini mengukuhkan skala buih laut terhadap latar belakang yang lebih gelap. - Seafoam 400
#94efb7— Serpihan kod yang diserlahkan mengandungi nilai rentetan, URL dan titik akhir API dalam blok kod. Warna buih laut paling terang dibaca sebagai fon monojarak dengan warna kehijauan. - Deep Sea
#023247— Garis hiasan dan warna aksen carta ialah warna firus yang kaya yang digunakan dalam ilustrasi SVG dan visualisasi data, berserta skala warna buih laut.
Neutral
- Midnight Ink
#011821— Permukaan gelap dan teks yang diserlahkan – latar belakang kad produk, teks utama berkontras tinggi. Lebih hampir kepada kelabu dengan warna biru-hijau yang sejuk; digunakan sebagai asas untuk mod gelap apabila bahagian perlu diterbalikkan. - Slate Ink
#3b3e47— Tajuk sekunder dan teks utama sedikit lebih hangat daripada Midnight Ink, digunakan di tempat warna hitam tulen kelihatan terlalu kasar pada kanvas cerah. - Steel
#7c7f88— Teks utama dan teks pautan didominasi oleh warna yang disenyapkan (digunakan 245 kali dalam teks utama). Warna kelabu-biru neutral yang dianggap tenang, bukan imej yang pudar. - Fog
#a9acb6— Garis besar ikon, sempadan tertier dan teks ruang letak. Warna kelabu sederhana yang memisahkan teks tanpa bersaing dengannya. - Mist
#cbcccf— Teks utama—tandatangan, penafian dan cetakan kecil—boleh dibaca pada latar belakang putih, tetapi kurang ketara secara visual. - Silver Lining
#e3e4e8— Sempadan kad, sempadan medan input, garisan pembahagi. Warna struktur halus ini digunakan di mana dua permukaan perlu dipisahkan tanpa bayang-bayang.
Tipografi
dari 10 hingga 60 piksel · 10 langkah
- SuisseIntl — penggantian: Inter · garis besar 300, 400, 500, 600 · Fon utama – digunakan untuk semua tajuk, teks isi, butang, navigasi, pautan dan teks kad. Sans serif geometri yang unik memberikan Column gaya editorial yang tersendiri, membezakannya daripada syarikat fintech lain yang bekerja secara eksklusif dengan Inter-only. Beratnya ialah 600 pada 52–60px untuk tajuk, 500 untuk subtajuk, 400 untuk teks isi dan 300 untuk pautan dengan penekanan rendah.
- SuisseIntlMono — penggantian: JetBrains Mono · garis besar 400 · Fon monospace yang serupa dengan SuisseIntl, digunakan untuk label teknikal, pengecam API dan data terbenam dalam elemen UI. Ia mengekalkan perkadaran yang sama seperti SuisseIntl, jadi teks monospace dan berkadar diselaraskan dengan betul dalam konteks campuran.
- SFMono — penggantian: Fira Code · garis besar 400 · Paparan coretan kod – dipaparkan dalam contoh JSON dan blok dokumentasi API. Pelindung buih laut digunakan untuk membezakan kod daripada teks UI secara visual.
Selang dan bentuk
| Tujuan | Maksudnya |
|---|---|
| Ketumpatan | purata |
| Langkah asas | 8px |
| Jejari butang | 8px |
| Jejari kad | 8px |
| Bayang-bayang | tiada - sempadan dan bukannya bayang-bayang |
| Antara bahagian | 72px |
| Lebar halaman | 1200px |
AI akan membina laman web anda dalam gaya Column 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
- dope.security — Terminal tengah malam dengan suar ungu
- Leonardo — Sebuah galeri editorial terbalik. Sebuah muzium berdinding hitam di mana tajuk utama berwarna ungu bertindak sebagai pemasangan dinding, dan potret yang dihasilkan AI tergantung dalam grid padat di bawah.
- VEED — Dinding galeri putih dengan butang lampu hijau neon
- Craft Docs — Kolaj digital untuk pembuatan buku skrap. Reka bentuknya menyerupai buku skrap yang bernas dan boleh disentuh, di mana nota digital berstruktur digabungkan dengan tekstur lembut dan organik.
- Letter — Sebuah galeri peribadi yang menampilkan artifak berkilauan dari storan. Ruang pameran berdinding hitam di mana tajuk utama berserif terapung di atas arca krom pada dinding berwarna galeri.
- Railway — Ekspres Tengah Malam Kosmik. Perjalanan yang tenang dan mendebarkan melalui angkasa lepas yang gelap dan berbintang, dipandu oleh isyarat yang jelas.
- Garden Eight — Sebuah editorial monumental di atas kertas berwarna krim. Tajuk utama serif 215px terletak bersendirian di atas kertas kulit yang hangat, dikelilingi oleh bentuk arca terapung dan ruang negatif yang mengingatkan pada udara laut—halaman tersebut lebih terasa seperti kulit monograf seni daripada papan pemuka.
- Steep — Analisis Fon Serif pada Kertas Hangat
- ElevenLabs — Esei foto dalam rona krim hangat dengan tajuk utama yang halus. Buku nota gaya Bauhaus—kertas berwarna kulit telur, dakwat hitam dan satu aksen ungu dan oren untuk paparan produk.
- Awesomic — Jaring zink editorial dengan tanda baca oren yang mengingatkan pada konfeti
- Monad — jurnal teknikal editorial mengenai perkamen hangat
- AI for Business — Bilik pameran editorial Brutalist dalam warna kelabu hangat