Column
Serin şafak altında koyu mavi bir defter
Column, neredeyse beyaz bir arka plan üzerinde koyu, kurumsal bir lacivert tonu kullanıyor: sayfa öncelikle sağlam bir bankacılık ürünü yüzeyi, ikinci olarak ise bir geliştirici oyun alanı gibi hissettiriyor. Marka rengi tek bir renk değil, koordineli bir çift; ciddi yapı için lacivert #111a4a, veri ve kod için nane yeşili #44b48b ve Brex kartı gibi yüksek yoğunluklu vurgu yüzeyleri için ayrılmış tek bir sıcak turuncu (#ec652b). Tipografi, 300 (bağlantılar) ile 600 (görüntüleme) arasında tüm ağırlık aralığında kullanılan geometrik bir sans serif olan SuisseIntl tarafından domine ediliyor ve sisteme çoğu fintech şirketinin sahip olmadığı rafine, editoryal bir stil kazandırıyor. Kartlar, ince, katmanlı gölgelerle büyük beyaz yüzeyler üzerinde yüzüyor; çoğu arayüz öğesi düz, derinlik yalnızca kartın fiziksel bir nesne gibi hissettirmesi gereken yerlerde (işlem widget'ları, ürün maketleri) ortaya çıkıyor. Kod ve finansal veriler tek renkli, deniz köpüğü renginde sunuluyor; bu, bunun mühendisler tarafından mühendisler için inşa edilmiş bir banka olduğunun görsel bir işareti.
Sayfa yapısı tam genişlikte, ortalanmış ve geniş kenar boşluklarına (masaüstünde 64–15 cm) sahip. Ana ekran bölünmüş bir düzene sahip: başlık ve harekete geçirici mesajlar 25 cm sola hizalanmışken, kayan bir işlem widget'ı yarı tonlu harita arka planına karşı 55 cm sağa konumlandırılmış. Ana ekranın altında, bölümler 6 cm dikey boşluklarla beyaz (4 cm) ve açık kanvas (5 cm) arasında dönüşümlü olarak yer alıyor. İçerik tek bir 6 sütunlu ızgaraya göre düzenlenmiş: metin blokları 4 sütun (7 cm), resim/ürün kartları ise ızgaradan kasıtlı olarak kaydırılmış 5-6 sütun kaplıyor. Özellikleri açıklayan bölümler 2 sütunlu bir düzen kullanıyor: solda metin, sağda ürün. Güven istatistikleri bölümü, sayfanın tam genişliği boyunca 4 sütunlu bir ızgaraya bölünmüş. Müşteri logoları, 48 piksel boşluklarla tek bir ortalanmış satırda yer alıyor. Altbilgi, kompakt iki sütunlu bir düzene sahip. Navigasyon, ana ekranın üzerinde sabit, 62 piksel yüksekliğinde, şeffaf bir üst çubuktan oluşuyor ve arka planı bulanık olup, kaydırdıkça beyaza dönüşüyor. Yan çubuk veya mega menü yok; açılır menüler basit ok stili menülerdir.
Görsel stil minimalist ve işlevseldir; Column, hazır fotoğraf kullanımından tamamen kaçınır. Görsel dil üç kaynaktan oluşur: (1) SVG veri illüstrasyonları, özellikle indigo, turuncu ve turkuaz arasında bir gradyanla oluşturulmuş noktalı yarım tonlu dünya haritası, ana öğenin arkasında küresel ölçekte bir atmosfer yaratır; (2) ürün kartı düzenleri - hesap bakiyelerini, transfer detaylarını ve JSON kod parçacıklarını dramatik gölgelerle beyaz kartlarda gösteren yüzen widget'lar; (3) grafik görselleştirmeleri - güven/istatistik bölümünde kullanılan ince bağlantı çizgilerine sahip turkuaz mum çubuk veya çubuk grafikler. Yarım tonlu harita, imza niteliğinde bir görsel öğedir; gradyanı #d65620 (turuncu) renginden mor, mavi, açık mavi, turkuaz ve sarıya doğru geçiş yaparak, tüm marka paletini tek bir dekoratif yüzeyde birleştiren bir spektrum oluşturur. İkonlar, #232730 veya #a9acb6 varyantlarında 1,5-2 piksel kalınlığında tek tip bir dış çizgiye ve aktif durumlar için dolguya sahiptir. Yaşam tarzı fotoğrafları yok, soyut 3D görseller yok; bu kısıtlama, dikkati ürüne ve verilere odaklamak amacıyla bilinçli olarak yapılmıştır.
Palet
Marka
- Indigo Navy
#111a4a— Ana marka rengi, doldurulmuş harekete geçirici mesajlarda, aktif gezinme durumlarında, başlıkta ve logoda kullanılır. Koyu mor-mavi renk, siteye sağlam ancak zengin bir siyah tonu kazandırır; beyaz metinle birleştiğinde, sitedeki en iddialı düğmeyi oluşturur. - Seafoam 600
#44b48b— Kod ve veri rengi, kod parçacıklarındaki JSON anahtarları, tanımlayıcılar ve finansal değerler için kullanılan marka rengidir. Ayrıca grafiklerde ve büyüme görselleştirmelerinde veri noktaları için de kullanılır. - Seafoam 700
#167e6c— Veri bağlamındaki çerçeve, grafik çizgileri ve simge vurguları için daha koyu bir deniz köpüğü tonu kullanılmıştır. Bu, deniz köpüğü ölçeğini daha koyu arka plana karşı belirginleştirir. - Seafoam 400
#94efb7— Vurgulanan kod parçası, kod blokları içinde dize değerleri, URL'ler ve API uç noktaları içermektedir. En açık deniz köpüğü rengi, yeşilimsi bir tona sahip tek aralıklı bir yazı tipi olarak görünmektedir. - Deep Sea
#023247— Grafiğin dekoratif çerçeve ve vurgu rengi, SVG illüstrasyonlarında ve veri görselleştirmelerinde kullanılan zengin bir turkuaz rengidir; aynı renk deniz köpüğü renk skalasıyla da uyumludur.
Doğal
- Midnight Ink
#011821— Koyu yüzey ve vurgulanmış metin – ürün kartı arka planı, yüksek kontrastlı ana metin. Soğuk mavi-yeşil tonlu griye daha yakın; bir bölümün ters çevrilmesi gerektiğinde koyu mod için temel olarak kullanılır. - Slate Ink
#3b3e47— İkinci başlık ve ana metin, Midnight Ink'ten biraz daha sıcak bir tonda; açık renkli tuvalde saf siyahın çok sert görüneceği yerlerde kullanılmış. - Steel
#7c7f88— Ana metin ve bağlantı metinlerinde soluk bir renk hakimdir (ana metinde 245 kez kullanılmıştır). Sakinleştirici bir etki yaratan, asla soluk bir görüntü izlenimi vermeyen nötr bir gri-mavi renktir. - Fog
#a9acb6— Simge ana hatları, üçüncül kenarlıklar ve yer tutucu metin. Metni ayıran ancak onunla rekabet etmeyen orta gri bir renk. - Mist
#cbcccf— Ana metin—imzalar, sorumluluk reddi beyanları ve küçük yazılar—beyaz bir arka plan üzerinde okunabilir, ancak görsel olarak daha az dikkat çekicidir. - Silver Lining
#e3e4e8— Kart kenarları, giriş alanı kenarları, ayırma çizgileri. Bu yapısal, ince renk, iki yüzeyin gölge olmadan ayrılması gereken yerlerde kullanılır.
Tipografi
10 ila 60 piksel arası · 10 adım
- SuisseIntl — yenisiyle değiştirme: Inter · ana hatlar 300, 400, 500, 600 · Birincil yazı tipi – tüm başlıklar, gövde metni, düğmeler, gezinme, bağlantılar ve kart metni için kullanılır. Benzersiz geometrik sans serif yazı tipi, Column'a kendine özgü bir editoryal stil kazandırarak, yalnızca Inter ile çalışan diğer fintech şirketlerinden ayırır. Kalınlık, başlıklar için 52-60 pikselde 600, alt başlıklar için 500, gövde metni için 400 ve düşük vurgulu bağlantılar için 300'dür.
- SuisseIntlMono — yenisiyle değiştirme: JetBrains Mono · ana hatlar 400 · SuisseIntl'e benzer, tek aralıklı bir yazı tipi olup, teknik etiketler, API tanımlayıcıları ve kullanıcı arayüzü öğelerindeki gömülü veriler için kullanılır. SuisseIntl ile aynı oranları koruduğu için, tek aralıklı ve orantılı metinler karışık bağlamlarda doğru şekilde hizalanır.
- SFMono — yenisiyle değiştirme: Fira Code · ana hatlar 400 · Kod parçacığı gösterimi – JSON örneklerinde ve API dokümantasyon bloklarında görüntülenir. Kodu kullanıcı arayüzü metninden görsel olarak ayırmak için açık mavi bir ton kullanılır.
Aralıklar ve biçim
| Amaç | Anlam |
|---|---|
| Yoğunluk | ortalama |
| Temel adım | 8px |
| Düğme yarıçapı | 8px |
| Kart yarıçapı | 8px |
| Gölgeler | hayır - gölgeler yerine kenarlıklar |
| Bölümler arasında | 72px |
| Sayfa genişliği | 1200px |
Yapay zeka, web sitenizi Column tarzında oluşturacak ve içeriğini dolduracak.
- Ürünlerinizi ve gönderilerinizi aşağıdaki bağlantılar aracılığıyla paylaşın: Instagram, TikTok, Facebook.
- Eski sitenizdeki içeriği aktarın; sadece adresi belirtmeniz yeterli.
- En iyi motor üzerinde modern tasarım: Sunucu tarafı işleme ve SEO optimizasyonu özellikleriyle birlikte React ( Next.js).
- Arama sonuçları için tamamen otomatik SEO optimizasyonu ve sinir ağı tabanlı öneriler.
Benzer stiller
- dope.security — Mor işaretli gece terminali
- Leonardo — Tersine çevrilmiş bir yayın galerisi. Mor başlıkların duvar enstalasyonları gibi durduğu ve yapay zeka tarafından oluşturulmuş portrelerin altta yoğun bir ızgara halinde asılı olduğu siyah duvarlı bir müze.
- VEED — Neon yeşil ışıklı düğmeli beyaz galeri duvarı
- Craft Docs — Dijital bir kolaj, albüm yapımı için ideal. Tasarım, yapılandırılmış dijital notların yumuşak, organik dokularla birleştiği, özenle hazırlanmış, dokunsal bir albümü andırıyor.
- Letter — Depodan çıkarılan göz kamaştırıcı eserlerin sergilendiği özel bir galeri. Siyah duvarlı bir sergi alanında, galerinin renkli duvarlarındaki krom heykellerin üzerinde serifli başlıklar beliriyor.
- Railway — Kozmik Gece Yarısı Ekspresi. Net sinyallerle yönlendirilen, karanlık ve yıldızlarla dolu uzayda sakin ve heyecan verici bir yolculuk.
- Garden Eight — Krem rengi kağıda basılmış anıtsal bir başyazı. 215 piksellik serif başlık, sıcak parşömen üzerinde tek başına duruyor, etrafı yüzen heykelsi formlar ve deniz havasını anımsatan boşluklarla çevrili; sayfa, bir gösterge panelinden çok bir sanat monografisinin kapağı gibi hissettiriyor.
- Steep — Sıcak Kağıt Üzerinde Serif Yazı Tiplerinin Analizi
- ElevenLabs — Sıcak krem tonlarında, incelikli başlıklarla hazırlanmış bir fotoğraf denemesi. Bauhaus tarzı bir defter: yumurta kabuğu renginde kağıt, siyah mürekkep ve ürün sergilemek için tek bir mor ve turuncu vurgu.
- Awesomic — Turuncu noktalama işaretleriyle konfetiyi andıran, editoryal amaçlı çinko ağ.
- Monad — sıcak parşömen üzerine editoryal teknik dergi
- AI for Business — Sıcak gri tonlarında brutalist tarzda dekore edilmiş yayın evi.