Column
цёмна-сіняя бухгалтарская кніга пад прахалодным світанкам
У Column выкарыстоўваецца глыбокі цёмна-сіні істытуцыянальны стыль на амаль белым фоне: старонка ўспрымаецца перш за ўсё як надзейная паверхня банкаўскага прадукта, а ўжо потым як пляцоўка для распрацоўшчыкаў. Фірмовы колер не адзін, а скаардынаваная пара – цёмна-сіні #111a4a для сур'ёзнай структуры, мятна-зялёны #44b48b для дадзеных і кода – з адным цёплым аранжавым (#ec652b), зарэзерваваным для акцэнтных паверхняў з высокай інтэнсіўнасцю сігналу, такіх як карта Brex. У друкарніцы дамінуе SuisseIntl, геаметрычны гратэск, які выкарыстоўваецца ва ўсім дыяпазоне таўшчыні ад 300 (спасылкі) да 600 (дысплей), што надае сістэме вытанчаны, рэдакцыйны стыль, якога не хапае большасці фінтэх-кампаній. Карты параць на вялікіх белых паверхнях з ледзь прыкметнымі шматслаёвымі ценямі; большая частка элементаў інтэрфейсу плоская, глыбіня з'яўляецца толькі там, дзе карта павінна адчувацца як фізічны аб'ект (віджэты транзакцый, макеты прадуктаў). Код і фінансавыя дадзеныя прадстаўлены ў манахромным, адценні марской пены - візуальны сігнал аб тым, што гэта банк, створаны інжынерамі для інжынераў.
Структура старонкі займае ўсю шырыню, цэнтраваная па цэнтры з шырокімі бакавымі палямі (64-15 гл на настольных кампутарах). Галоўны экран уяўляе сабой падзеленую кампаноўку - загаловак і заклікі да дзеяння выраўнаваны па левым краі на шырыні 25 см, а плавае віджэт транзакцый размешчаны справа на шырыні 55 см на фоне паўтонавай карты. Пад галоўным экранам часткі чаргуюцца паміж белым (4 гл) і светлым палатном (5 гл) з вертыкальнымі прамежкамі 6 гл. Размяшчэнне кантэнту адпавядае адзінай 6-калонкавай сетцы: тэкставыя блокі займаюць 4 калонкі (7 гл), карткі малюнкаў/тавараў — 5–6 калонак з наўмысным зрушэннем. Раздзелы з апісаннем характарыстык выкарыстоўваюць 2-калонкавы шаблон: тэкст злева, тавар справа. Раздзел статыстыкі даверу разбіты на 4-калонкавую сетку ва ўсю шырыню старонкі. Лагатыпы кліентаў размешчаны ў адным цэнтраваным шэрагу з прамежкамі 48px. Ніжні калантытул мае кампактную двухкалонкавую кампаноўку. Навігацыя ўяўляе сабой фіксаваную верхнюю панэль вышынёй 62px, празрыстую па-над галоўным экранам з размыццём фону, пераходзячым у белы колер пры пракрутцы. Няма бакавой панэлі, няма мега-меню - выпадаючыя спісы ўяўляюць сабой простыя меню ў выглядзе стрэлак.
Візуальны шэраг мінімалістычны і функцыянальны - Column цалкам пазбягае сцёкавых фатаграфій. Візуальная мова пабудавана на трох крыніцах: (1) ілюстрацыі дадзеных у фармаце SVG, у прыватнасці, кропкавая паўтонавая карта свету, выкананая з градыентам ад індыга да аранжавага і да бірузовага, якая стварае атмасферу глабальнага маштабу за галоўным элементам; (2) макеты картак прадуктаў - плаваюць фішкі, якія адлюстроўваюць балансы рахункаў, дэталі перакладаў і фрагменты кода JSON у белых картках з эфектнымі ценямі; (3) візуалізацыі графікаў - свячныя або столбчатые дыяграмы бірузовага колеру з тонкімі злучальнымі лініямі, якія выкарыстоўваюцца ў раздзеле даверу / статыстыкі. Паўтонавая карта з'яўляецца фірмовым візуальным элементам - яе градыентныя пераходы ад #d65620 (аранжавы) праз фіялетавы, сіні, нябесна-блакітны, бірузовы да жоўтага, ствараючы спектр, які аб'ядноўвае ўсю палітру брэнда на адзінай дэкаратыўнай паверхні. Абразкі маюць раўнамерную таўшчыню контуру 1,5-2px у варыянтах #232730 або # a9acb6, з заліваннем для актыўных станаў. Ніякіх фатаграфій у стылі лайфстайл, ніякіх абстрактных 3D-рэндэраў – стрыманасць наўмысна, каб засяродзіць увагу на прадукце і дадзеных.
Палітра
Брэнд
- Indigo Navy
#111a4a— Асноўны фірменны колер - для зафарбаваных заклікаў да дзеяння, актыўных станаў навігацыі, загалоўка, лагатыпа. Глыбокае фіялетава-сіні колер надае сайту самавітае, але пры гэтым насычанае чорнае адценне; у спалучэнні з белым тэкстам ён стварае найболей упэўненую кнопку на сайце. - Seafoam 600
#44b48b— Колер кода і дадзеных - гэта фірмовы колер для ключоў JSON, ідэнтыфікатараў і фінансавых значэнняў у фрагментах кода. Таксама выкарыстоўваецца для кропак дадзеных на дыяграмах і візуалізацыі росту. - Seafoam 700
#167e6c— Больш цёмнае адценне марской пены для абводкі, ліній дыяграм і акцэнтаў значкоў у кантэксце дадзеных. Замацоўвае шкалу марской пены на больш цёмным фоне. - Seafoam 400
#94efb7— Вылучаны фрагмент кода - радковыя значэнні, URL-адрасы, канчатковыя кропкі API у блоках кода. Самы светлы колер марской пены, чытаецца як монашырынны шрыфт з зялёным адценнем. - Deep Sea
#023247— Дэкаратыўная абводка і акцэнт на дыяграме - насычаны бірузовы колер, які выкарыстоўваецца ў SVG-ілюстрацыях і візуалізацыі дадзеных нараўне са шкалой колеру марской пены.
Нейтральныя
- Midnight Ink
#011821— Цёмная паверхня і выдзелены тэкст - фон картак тавараў, высокакантрасны асноўны тэкст. Бліжэй да шэрага колеру з халодным сіне-зялёным адценнем; выкарыстоўваецца ў якасці асновы для цёмнага рэжыму, калі неабходна інвертаваць якую-небудзь частку. - Slate Ink
#3b3e47— Другарадны загаловак і асноўны тэкст - трохі цяплей, чым «Паўночныя чарніла», выкарыстоўваецца там, дзе чысты чорны колер здаецца занадта рэзкім на светлым палатне. - Steel
#7c7f88— Асноўны тэкст і тэкст спасылак - пераважны прыглушаны колер (245 разоў сустракаецца ў асноўным тэксце). Нейтральны шэра-блакітны колер, які ўспрымаецца як спакойны, ніколі не бляклы малюнак. - Fog
#a9acb6— Абводка абразкоў, троесныя межы, тэкст-запаўняльнік. Сярэдне-шэры колер, які аддзяляе тэкст, не канкуруючы з ім. - Mist
#cbcccf— Асноўны тэкст - подпісы, агаворкі, дробны шрыфт. Чытаецца на белым фоне, але візуальна становіцца менш прыкметным. - Silver Lining
#e3e4e8— Межы картак, межы палёў уводу, раздзяляльныя лініі. Гэты структурны тонкі колер выкарыстоўваецца там, дзе неабходна падзяліць дзве паверхні без ценю.
Друкарня
ад 10 да 60px · 10 прыступак
- SuisseIntl — замена: Inter · напісання 300, 400, 500, 600 · Асноўны шрыфт - выкарыстоўваецца для ўсіх загалоўкаў, асноўнага тэксту, кнопак, навігацыі, спасылак і тэксту картак. Унікальны геаметрычны гратэск надае Column адметны рэдакцыйны стыль, які вылучае яго сярод фінтэх-кампаній, якія працуюць толькі з Inter-only. Таўшчыня 600 пры 52-60px для загалоўкаў, 500 для падзагалоўкаў, 400 для асноўнага тэксту, 300 для спасылак з нізкім узроўнем акцэнту.
- SuisseIntlMono — замена: JetBrains Mono · напісання 400 · Манашырынны шрыфт, аналагічны SuisseIntl, выкарыстоўваецца для тэхнічных пазнак, ідэнтыфікатараў API і ўбудаваных дадзеных у элементах карыстацкага інтэрфейсу. Захоўвае тыя ж прапорцыі, што і SuisseIntl, таму монашырынны і прапарцыйны тэкст карэктна выраўноўваюцца ў змешаных кантэкстах.
- SFMono — замена: Fira Code · напісання 400 · Адлюстраванне фрагментаў кода - адлюстроўваецца ў прыкладах JSON і блоках дакументацыі API. Выкарыстоўваецца адценне марской пены для візуальнага адрознівання кода ад тэксту карыстацкага інтэрфейсу.
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | сярэдняя |
| Базавы крок | 8px |
| Радыус кнопак | 8px |
| Радыус картак | 8px |
| Цені | не - межы замест ценяў |
| Паміж секцыямі | 72px |
| Шырыня старонкі | 1200px |
ІІ збярэ ваш сайт у стылі Column і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- dope.security — Паўночны тэрмінал з фіялетавымі маякамі
- Leonardo — Перавернутая рэдакцыйная галерэя. Музей з чорнымі сценамі, дзе фіялетавыя загалоўкі выступаюць у якасці насценных усталёвак, а створаныя з дапамогай ІІ партрэты вісяць у шчыльнай сетцы ўнізе
- VEED — Белая сцяна галерэі з неонава-зялёнымі кнопкамі запальвання
- Craft Docs — Лічбавы калаж для скрапбукінга. Дызайн нагадвае прадуманы, прыемны навобмацак альбом для запісаў, дзе структураваныя лічбавыя нататкі спалучаюцца з мяккімі, арганічнымі тэкстурамі.
- Letter — Прыватная галерэя з пераліўнымі артэфактамі са сховішча. Выставачная зала з чорнымі сценамі, дзе загалоўкі з засечкамі параць над храмаванымі скульптурамі на таніраваных сценах галерэі
- Railway — Касмічны Паўночны Экспрэс. Спакойнае, захапляльнае падарожжа па цёмнай, залітай зорным святлом прасторы, якое накіроўваецца выразнымі сігналамі.
- Garden Eight — Манументальны рэдакцыйны артыкул на крэмавай паперы. Загаловак з засечкамі 215px самотна размешчаны на цёплым пергаменце, акружаны парылымі скульптурнымі формамі і негатыўнай прасторай, якія нагадваюць марское паветра - старонка паводзіць сябе як вокладка мастацкай манаграфіі, а не як прыборная панэль
- Steep — Аналітыка шрыфтоў з засечкамі на паперы цёплага адцення
- ElevenLabs — Фотарэпартаж у цёплых крэмавых танах з ненадакучлівымі загалоўкамі. Нататнік у стылі Баухаус - папера колеру яечнай шкарлупіны, чорныя чарнілы, адзін фіялетавы і аранжавы акцэнт для дэманстрацыі прадукту
- Awesomic — Рэдакцыйная цынкавая сетка з аранжавымі знакамі прыпынку, якія нагадваюць канфеці
- Monad — рэдакцыйны тэхнічны часопіс на цёплым пергаменце
- AI for Business — Бруталістская рэдакцыйная выставачная зала ў цёплых шэрых танах