Column
sowuk daňyň aşagynda gara gök reňkli depder
“Sütün” ak reňke golaý fonda çuňňur, institutsional gök reňk ulanýar: sahypa ilki bilen berk bank önüminiň ýüzüne, ikinjiden bolsa işläp düzüjiniň oýun meýdançasyna meňzeýär. Brendiň reňki ýeke-täk däl, eýsem sazlaşykly jübüt — gök reňk #111a4a düýpli gurluş üçin, ýaşyl reňk maglumatlar we kod üçin — ýekeje ýyly mämişi reňk (#ec652b) bilen Brex karty ýaly ýokary intensiwlikli basgançak ýüzleri üçin saklanýar. Tipografiýada 300-den (baglanyşyklar) 600-e (displeý) çenli agram aralygynda ulanylýan geometrik sans-serif bolan SuisseIntl agdyklyk edýär, bu bolsa ulgama köp fintech kompaniýalarynyň ýetmeýän inçe, redaksiýa stilini berýär. Kartlar uly ak ýüzlerde inçe, gatlakly kölegeler bilen ýüzýär; interfeýs elementleriniň köpüsi tekiz, çuňluk diňe kartyň fiziki obýekt ýaly duýulmaly ýerinde peýda bolýar (geleşik widgetleri, önüm maketleri). Kod we maliýe maglumatlary monohrom, deňiz köpügi reňkinde görkezilýär — bu bankyň inženerler tarapyndan inženerler üçin gurlandygynyň wizual alamaty.
Sahypanyň gurluşy doly giňlikde, giň gapdal gyralary bilen merkezleşdirilen (iş stolunda 64–15 sm). Esasy ekran bölünen düzülişdir: sözbaşy we hereket çagyryşlary 25 sm çep tarapa deňleşdirilen, ýüzýän geleşik widjeti bolsa sag tarapda ýarym reňkli karta fonunda 55 sm-de ýerleşdirilen. Esasy ekranyň aşagynda, bölümler ak (4 sm) we açyk kanwas (5 sm) arasynda 6 sm dik oýuklar bilen çalşyrylýar. Mazmun ýeke-täk 6 sütünli tor görnüşinde ýerleşdirilen: tekst bloklary 4 sütün (7 sm), surat/önüm kartlary 5–6 sütün eýeleýär, tordan bilgeşleýin üýtgedilip. Aýratynlyklary beýan edýän bölümler 2 sütünli düzülişi ulanýar: tekst çepde, önüm sagda. Ynam statistikasy bölümi sahypanyň doly giňligi boýunça 4 sütünli tor görnüşinde bölünen. Müşderi logotipleri 48 piksel oýuklar bilen ýeke-täk merkezleşdirilen setirde ýerleşýär. Aşakky bölümde ykjam iki sütünli düzüliş bar. Nawigasiýa esasy ekranyň üstünde ýerleşýän, 62 piksel beýiklikdäki, açyk ýokarky panel bolup, aýlananyňyzda ak reňke öwrülýän bulanyk fon bilen tapawutlanýar. Gapdal panel ýa-da mega-menýu ýok — açylýan menyular ýönekeý ok görnüşli menýulardyr.
Wizual stil minimalist we funksiýonaldyr — “Sütün” stok suratlaryndan doly gaça durýar. Wizual dil üç çeşmä esaslanýar: (1) SVG maglumat suratlary, hususan-da, esasy elementiň arkasynda global möçberde atmosfera döredýän indigodan mämişi reňke we firuze reňkine gradient bilen görkezilen nokatly ýarym reňkli dünýä kartasy; (2) önüm kartlarynyň düzülişi — ak kartlarda hasap balanslaryny, geçirim maglumatlaryny we JSON kod böleklerini görkezýän ýüzýän widjetler, dramatik kölegeler bilen; (3) diagramma wizualizasiýalary — ynam/statistika bölüminde ulanylýan inçe birleşdiriji çyzyklary bolan firuze şem ýa-da sütunly diagrammalar. Ýarym reňkli karta özboluşly wizual elementdir — onuň gradienti #d65620 (mämişi) reňkinden benewşe, gök, gök, firuze we sary reňklere geçýär we tutuş brend palitrasyny bir bezeg ýüzünde birleşdirýän spektr döredýär. Belgileriň #232730 ýa-da #a9acb6 görnüşlerinde 1,5–2 piksellik birmeňzeş kontur galyňlygy bar, işjeň ýagdaýlar üçin doldurgyç bar. Durmuş suratlary, abstrakt 3D renderler ýok — çäklendirme önüme we maglumatlara ünsi çekmek üçin niýetlenen.
Palitra
Brend
- Indigo Navy
#111a4a— Esasy brend reňki herekete çagyryşlar, işjeň nawigasiýa ýagdaýlary, sözbaşy we logotip üçin ulanylýar. Goýy benewşe-gök reňk saýta berk, ýöne baý gara reňk berýär; ak tekst bilen utgaşdyrylyp, saýtdaky iň ynamdar düwmäni döredýär. - Seafoam 600
#44b48b— Kod we maglumat reňki JSON açarlarynyň, identifikatorlarynyň we kod böleklerindäki maliýe gymmatlyklarynyň brend reňkidir. Şeýle hem, ol diagrammalardaky we ösüş wizualizasiýalaryndaky maglumat nokatlary üçin ulanylýar. - Seafoam 700
#167e6c— Maglumat kontekstinde kontur, diagramma çyzyklary we nyşan bölekleri üçin deňiz köpüginiň has garaňky reňki. Bu deňiz köpüginiň ölçegini has garaňky fona berkidip durýar. - Seafoam 400
#94efb7— Bellenen kod bölegi kod bloklarynyň içinde setir gymmatlyklaryny, URL-leri we API uç nokatlaryny öz içine alýar. Iň açyk deňiz köpüginiň reňki ýaşyl reňkli bir aralykly şrift hökmünde okaýar. - Deep Sea
#023247— Diagrammanyň bezeg kontury we aksent reňki SVG suratlarynda we maglumat wizualizasiýalarynda deňiz köpüginiň reňk şkalasy bilen birlikde ulanylýan baý firuze reňkidir.
Neýtral
- Midnight Ink
#011821— Garaňky ýüz we aýratynlaşdyrylan tekst – önümiň kartoçkasynyň fonunda, ýokary kontrastly esasy tekst. Sowuk gök-ýaşyl reňkli çal reňke has ýakyn; bölümi tersine öwürmek zerur bolanda garaňky re modeim üçin esas hökmünde ulanylýar. - Slate Ink
#3b3e47— Ikinji derejeli at we esasy tekst "Midnight Ink"-den biraz ýylyrak, arassa gara reňkiň açyk tuwalda gaty berk görünýän ýerlerinde ulanylýar. - Steel
#7c7f88— Esasy tekstde we baglanyşyk tekstinde ýumşak reňk agdyklyk edýär (esasy tekstde 245 gezek ulanylýar). Parahat hökmünde kabul edilýän, hiç haçan ýuwulmadyk surat hökmünde kabul edilýän neýtral çal-gök reňk. - Fog
#a9acb6— Belgileriň konturlary, üçünji derejeli serhetler we tekstiň ýerini tutýan. Tekst bilen bäsleşmezden, ony bölýän orta çal reňk. - Mist
#cbcccf— Esasy tekst — gol çekişler, jogapkärçilikden boýun gaçyryşlar we ownuk şriftler — ak fonda okamaga aňsat, ýöne wizual taýdan has az duýulýar. - Silver Lining
#e3e4e8— Kart serhetleri, giriş meýdanynyň serhetleri, bölüji çyzyklary. Bu gurluşly, inçe reňk iki ýüziň kölegesiz bölünmeli ýerinde ulanylýar.
Tipografiýa
10-dan 60 piksele çenli · 10 ädim
- SuisseIntl — çalyşmak: Inter · konturlar 300, 400, 500, 600 · Esasy şrift – ähli sözbaşylar, esasy tekst, düwmeler, nawigasiýa, baglanyşyklar we kartoçka teksti üçin ulanylýar. Özboluşly geometrik sans serif şrifti “Column”-a özboluşly redaksiýa stilini berýär we ony diňe “Inter-only” bilen işleýän beýleki fintech kompaniýalaryndan tapawutlandyrýar. Agramy sözbaşylar üçin 52–60 pikselde 600, kiçi sözbaşylar üçin 500, esasy tekst üçin 400 we az nygtalýan baglanyşyklar üçin 300 pikseldir.
- SuisseIntlMono — çalyşmak: JetBrains Mono · konturlar 400 · SuisseIntl-e meňzeş bir aralykly şrift, tehniki bellikler, API identifikatorlary we UI elementlerinde goýlan maglumatlar üçin ulanylýar. Ol SuisseIntl bilen birmeňzeş proporsiýalary saklaýar, şonuň üçin bir aralykly we proporsional tekst garyşyk kontekstlerde dogry deňleşýär.
- SFMono — çalyşmak: Fira Code · konturlar 400 · Kod parçajygyny görkezmek – JSON mysallarynda we API resminama bloklarynda görkezilýär. Kody UI tekstinden wizual taýdan tapawutlandyrmak üçin deňiz köpügi reňki ulanylýar.
Aralyklar we görnüş
| Maksat | Manysy |
|---|---|
| Dykyzlyk | ortaça |
| Esasy ädim | 8px |
| Düwme radiusy | 8px |
| Kart radiusy | 8px |
| Kölegeler | kölegeleriň ýerine serhetler ýok |
| Bölümleriň arasynda | 72px |
| Sahypanyň giňligi | 1200px |
Süni intellekt web sahypaňyzy Column stilinde gurar we ony doldurar
- Instagram, TikTok, Facebook salgylary arkaly önümler we ýazgylar bilen dolduryň.
- Köne saýtyňyzdan mazmuny göçüriň — diňe salgyny görkeziň.
- Iň gowy motorda döwrebap dizaýn: React ( Next.js) serwer renderi we SEO optimizasiýasy bilen gyssagly ýagdaýda.
- Gözleg netijeleri we neýron tor maslahatlary üçin doly awtomatlaşdyrylan SEO optimizasiýasy.
Meňzeş stiller
- dope.security — Gülgün reňkli maýaklar bilen gijäniň ýarym terminaly
- Leonardo — Ters öwrülen redaksiýa galereýasy. Gara diwarly muzeý, bu ýerde gyrmyzy reňkli sözbaşylar diwar gurnamalary hökmünde hereket edýär we aşaky tarapda süni intellekt tarapyndan döredilen portretler dykyz tor görnüşinde asylgy durýar.
- VEED — Neon ýaşyl çyra düwmeleri bolan ak galereýa diwary
- Craft Docs — Skrapbuking üçin sanly kollaž. Dizaýn oýlanyşykly, duýulýan skrapbuky ýatladýar, bu ýerde gurluşly sanly notalar ýumşak, organiki teksturalar bilen utgaşýar.
- Letter — Saklanylýan ýalpyldawuk artefaktlary görkezýän hususy galereýa. Galereýanyň reňkli diwarlaryndaky hrom heýkelleriň üstünde serif ýazgylary ýüzýän gara diwarly sergi giňişligi.
- Railway — “Kosmik Ýarym Gije Ekspresi”. Aýdyň signallar bilen dolandyrylýan garaňky, ýyldyzly kosmosda asuda we tolgundyryjy syýahat.
- Garden Eight — Krem reňkli kagyzdaky monumental redaksiýa makalasy. 215 piksellik serif sözbaşysy ýyly pergamentde ýeke özi ýerleşdirilip, daş-töweregi suwda ýüzýän heýkeltaraşlyk görnüşleri we deňiz howasyny ýada salýan negatiw giňişlik bilen gurşalyp alnypdyr - sahypa panelden has köp sungat monografiýasynyň daşky sahabyna meňzeýär.
- Steep — Serif şriftleriniň "War Paper"-de seljermesi
- ElevenLabs — Ýumşak krem reňkli we inçe sözbaşyly suratly esse. Bauhaus stilindäki depderçe — ýumurtga gabygy reňkli kagyz, gara syýa we önümi görkezmek üçin ýekeje gyrmyzy we mämişi reňkli bezeg.
- Awesomic — Konfeti ýadyňa salýan mämişi punktuasiýa belgileri bolan redaksiýa sink tor
- Monad — ýyly pergamentde redaksiýa tehniki žurnaly
- AI for Business — Ýyly çal reňklerde redaksiýanyň redaksiýa salony