Column
salqin tong ostida to'q ko'k daftar
"Ustun" deyarli oq fonda chuqur, institutsional to'q ko'k rangdan foydalanadi: sahifa avval mustahkam bank mahsuloti yuzasi, ikkinchisi esa ishlab chiquvchi o'yin maydonchasi kabi ko'rinadi. Brend rangi bitta emas, balki muvofiqlashtirilgan juftlik — jiddiy tuzilma uchun to'q ko'k #111a4a, ma'lumotlar va kod uchun yalpiz yashil #44b48b — Brex kartasi kabi yuqori intensivlikdagi urg'u sirtlari uchun ajratilgan bitta issiq to'q sariq rang (#ec652b). Tipografiyada 300 (havolalar) dan 600 (displey) gacha bo'lgan butun og'irlik oralig'ida ishlatiladigan geometrik sans serif bo'lgan SuisseIntl ustunlik qiladi, bu tizimga ko'pgina fintech kompaniyalarida yo'q bo'lgan nafis, tahririy uslubni beradi. Kartalar katta oq sirtlarda nozik, qatlamli soyalar bilan suzadi; interfeys elementlarining aksariyati tekis, chuqurlik faqat karta jismoniy ob'ekt kabi ko'rinishi kerak bo'lgan joyda paydo bo'ladi (tranzaksiya vidjetlari, mahsulot maketlari). Kod va moliyaviy ma'lumotlar monoxrom, dengiz ko'pik rangida taqdim etiladi — bu muhandislar tomonidan muhandislar uchun yaratilgan bank ekanligining vizual belgisi.
Sahifa tuzilishi to'liq kenglikda, markazda keng yon chegaralar bilan (ish stolida 64–15 sm) joylashgan. Asosiy ekran bo'lingan tartibda joylashgan: sarlavha va harakatga chaqiruvlar chapga 25 sm masofada joylashgan, suzuvchi tranzaksiya vidjeti esa o'ng tomonda yarim rangli xarita fonida 55 sm masofada joylashgan. Asosiy ekran ostida bo'limlar oq (4 sm) va och rangli kanvas (5 sm) o'rtasida almashinib turadi, 6 sm vertikal oluklar mavjud. Kontent bitta 6 ustunli panjara bo'yicha joylashtirilgan: matn bloklari 4 ustunni (7 sm), rasm/mahsulot kartalari 5–6 ustunni egallaydi, panjaradan ataylab siljigan holda. Xususiyatlarni tavsiflovchi bo'limlar 2 ustunli tartibdan foydalanadi: matn chapda, mahsulot o'ngda. Ishonch statistikasi bo'limi sahifaning to'liq kengligi bo'ylab 4 ustunli panjaraga bo'lingan. Mijozlar logotiplari 48 pikselli oluklar bilan bitta markazlashtirilgan qatorda joylashgan. Pastki qismda ixcham ikki ustunli tartib mavjud. Navigatsiya asosiy ekran ustidagi 62 piksel balandlikdagi shaffof yuqori panel bo'lib, xira fonga ega bo'lib, aylantirish paytida oq rangga aylanadi. Yon panel yoki mega-menyu yo'q — ochiladigan menyular oddiy strelka uslubidagi menyulardir.
Vizual uslub minimalist va funktsionaldir — Column stok fotosuratlaridan butunlay qochadi. Vizual til uchta manbaga asoslangan: (1) SVG ma'lumotlar illyustratsiyasi, xususan, indigodan to'q sariq ranggacha, firuza ranggacha bo'lgan gradient bilan ko'rsatilgan nuqtali yarim tonnali dunyo xaritasi, asosiy element orqasida global miqyosdagi muhit yaratadi; (2) mahsulot kartalari maketlari — hisob qoldiqlari, o'tkazma tafsilotlari va JSON kod parchalarini oq kartalarda dramatik soyalar bilan ko'rsatadigan suzuvchi vidjetlar; (3) grafik vizualizatsiyalari — ishonch/statistika bo'limida ishlatiladigan ingichka bog'lovchi chiziqlarga ega firuza shamdon yoki ustunli grafikalar. Yarim tonnali xarita o'ziga xos vizual elementdir — uning gradienti #d65620 (to'q sariq) dan binafsha, ko'k, ko'k, firuza va sariq ranglarga o'tadi, bu butun brend palitrasini bitta dekorativ sirtda birlashtiradigan spektrni yaratadi. Piktogrammalar #232730 yoki #a9acb6 variantlarida 1,5–2 pikselli yagona kontur qalinligiga ega, faol holatlar uchun to'ldirish mavjud. Turmush tarzi fotosuratlari, mavhum 3D renderlar yo'q — bu cheklov mahsulot va ma'lumotlarga e'tiborni qaratish uchun ataylab qilingan.
Palitra
Brend
- Indigo Navy
#111a4a— Asosiy brend rangi harakatga chaqiriqlar, faol navigatsiya holatlari, sarlavha va logotip uchun ishlatiladi. Binafsha-ko'k rang saytga mustahkam, ammo boy qora rang beradi; oq matn bilan birgalikda u saytdagi eng qat'iy tugmani yaratadi. - Seafoam 600
#44b48b— Kod va ma'lumotlar rangi - bu kod parchalaridagi JSON kalitlari, identifikatorlari va moliyaviy qiymatlari uchun brend rangi. Shuningdek, u grafikalar va o'sish vizualizatsiyalaridagi ma'lumotlar nuqtalari uchun ham ishlatiladi. - Seafoam 700
#167e6c— Ma'lumotlar kontekstidagi kontur, diagramma chiziqlari va ikonka urg'ulari uchun dengiz ko'pikining quyuqroq soyasi. Bu dengiz ko'pikining shkalasini quyuqroq fonga mahkamlaydi. - Seafoam 400
#94efb7— Belgilangan kod fragmenti kod bloklari ichidagi satr qiymatlari, URL manzillari va API tugash nuqtalarini o'z ichiga oladi. Eng och dengiz ko'pik rangi yashil rangga ega bir intervalli shrift sifatida o'qiladi. - Deep Sea
#023247— Grafikning dekorativ konturi va urg'u rangi dengiz ko'pikining rang shkalasi bilan birga SVG illyustratsiyalari va ma'lumotlar vizualizatsiyalarida ishlatiladigan boy firuza rangidir.
Neytral
- Midnight Ink
#011821— To'q rangli sirt va ta'kidlangan matn – mahsulot kartasi foni, yuqori kontrastli asosiy matn. Kulrang rangga yaqinroq, sovuq ko'k-yashil rangga ega; qismni teskari aylantirish kerak bo'lganda qorong'u rejim uchun asos sifatida ishlatiladi. - Slate Ink
#3b3e47— Ikkilamchi sarlavha va asosiy matn Midnight Inkga qaraganda biroz iliqroq, sof qora rang och rangli tuvalda juda qattiq ko'rinadigan joylarda qo'llaniladi. - Steel
#7c7f88— Asosiy matn va havola matnida xira rang ustunlik qiladi (asosiy matnda 245 marta ishlatilgan). Tinch, hech qachon yuvilmagan tasvir sifatida qabul qilinadigan neytral kulrang-ko'k rang. - Fog
#a9acb6— Belgining konturlari, uchinchi darajali chegaralar va to'ldiruvchi matn. Matn bilan raqobatlashmasdan uni ajratib turadigan o'rtacha kulrang rang. - Mist
#cbcccf— Asosiy matn — imzolar, ogohlantirishlar va kichik shriftlar — oq fonda o'qilishi mumkin, ammo vizual jihatdan unchalik sezilmaydi. - Silver Lining
#e3e4e8— Karta chegaralari, kiritish maydoni chegaralari, ajratuvchi chiziqlar. Ushbu strukturaviy, nozik rang ikkita sirtni soyalarsiz ajratish kerak bo'lganda ishlatiladi.
Tipografiya
10 dan 60 pikselgacha · 10 qadam
- SuisseIntl — almashtirish: Inter · konturlar 300, 400, 500, 600 · Asosiy shrift – barcha sarlavhalar, asosiy matn, tugmalar, navigatsiya, havolalar va kartochka matni uchun ishlatiladi. Noyob geometrik sans serif Column’ga oʻziga xos tahririy uslub bagʻishlaydi va uni faqat Inter-only bilan ishlaydigan boshqa fintech kompaniyalaridan ajratib turadi. Ogʻirligi sarlavhalar uchun 52–60 piksel, kichik sarlavhalar uchun 500, asosiy matn uchun 400 va kam urgʻu berilgan havolalar uchun 300 pikselni tashkil qiladi.
- SuisseIntlMono — almashtirish: JetBrains Mono · konturlar 400 · SuisseIntl ga o'xshash monospace shrifti, texnik yorliqlar, API identifikatorlari va UI elementlariga o'rnatilgan ma'lumotlar uchun ishlatiladi. U SuisseIntl bilan bir xil nisbatlarni saqlaydi, shuning uchun monospace va proporsional matn aralash kontekstlarda to'g'ri hizalanadi.
- SFMono — almashtirish: Fira Code · konturlar 400 · Kod parchalarini ko'rsatish – JSON misollari va API hujjatlari bloklarida ko'rsatiladi. Kodni UI matnidan vizual ravishda ajratish uchun dengiz ko'pikli soyadan foydalaniladi.
Intervallar va shakl
| Maqsad | Ma'nosi |
|---|---|
| Zichlik | o'rtacha |
| Asosiy qadam | 8px |
| Tugma radiusi | 8px |
| Karta radiusi | 8px |
| Soyalar | soyalar o'rniga chegaralar yo'q |
| Bo'limlar orasida | 72px |
| Sahifa kengligi | 1200px |
Sun'iy intellekt veb-saytingizni Column uslubida yaratadi va uni to'ldiradi
- Mahsulotlar va postlarni Instagram, TikTok, Facebook havolalari orqali to'ldiring.
- Eski saytingizdan kontentni o'tkazing — shunchaki manzilni ko'rsating.
- Eng yaxshi dvigatelda zamonaviy dizayn: React ( Next.js) server renderlash va SEO optimallashtirish bilan darhol.
- Qidiruv natijalari va neyron tarmoq tavsiyalari uchun to'liq avtomatlashtirilgan SEO optimallashtirish.
O'xshash uslublar
- dope.security — Binafsha mayoqlar bilan yarim tungi terminal
- Leonardo — Teskari tahririyat galereyasi. Binafsha rangli sarlavhalar devor installyatsiyalari vazifasini bajaradigan va sun'iy intellekt tomonidan yaratilgan portretlar quyida zich panjara shaklida osilgan qora devorli muzey.
- VEED — Neon yashil chiroq tugmachalari bilan oq galereya devori
- Craft Docs — Skrapbuking uchun raqamli kollaj. Dizayn puxta o'ylangan, sezgir skrapbukga o'xshaydi, bu yerda strukturaviy raqamli notalar yumshoq, organik teksturalar bilan uyg'unlashadi.
- Letter — Omborxonadan yaltiroq artefaktlar namoyish etiladigan xususiy galereya. Galereyaning rangli devorlaridagi xrom haykallar ustida serif sarlavhalari suzib yuradigan qora devorli ko'rgazma maydoni.
- Railway — Kosmik Midnight Express. Aniq signallar bilan boshqariladigan, qorong'u, yulduzli kosmosda xotirjam va hayajonli sayohat.
- Garden Eight — Krem rangli qog'ozga yozilgan monumental tahririyat maqolasi. 215 pikselli serif sarlavhasi issiq pergamentda yolg'iz joylashgan bo'lib, uning atrofida suzuvchi haykaltaroshlik shakllari va dengiz havosini eslatuvchi negativ bo'shliq joylashgan - sahifa boshqaruv panelidan ko'ra ko'proq badiiy monografiya muqovasiga o'xshaydi.
- Steep — Issiq qog'ozdagi serif shriftlarini tahlil qilish
- ElevenLabs — Iliq krem tusli, nozik sarlavhali fotoinsho. Bauhaus uslubidagi daftar — tuxum qobig'i rangli qog'oz, qora siyoh va mahsulotni namoyish qilish uchun bitta binafsha va to'q sariq rangli aksent.
- Awesomic — Konfetini eslatuvchi to'q sariq tinish belgilari bilan bezatilgan rux to'ri
- Monad — Issiq pergamentdagi tahririyat texnik jurnali
- AI for Business — Issiq kulrang tuslardagi shafqatsiz tahririyat ko'rgazma zali