Column
тъмносиня книга под хладната зора
Колоната използва наситен, институционален тъмносиньо на почти бял фон: страницата се усеща първо като здрава повърхност за банков продукт, а след това като площадка за разработчици. Цветът на марката не е единичен, а координирана двойка – тъмносиньо #111a4a за сериозна структура, ментово зелено #44b48b за данни и код – с един топъл оранжев цвят (#ec652b), запазен за акцентни повърхности с висока интензивност, като картата Brex. Типографията е доминирана от SuisseIntl, геометричен безсерифен шрифт, използван в целия диапазон на дебелина от 300 (връзки) до 600 (дисплеи), което придава на системата изискан, редакционен стил, какъвто липсва на повечето финтех компании. Картите се носят върху големи бели повърхности с фини, многослойни сенки; повечето елементи на интерфейса са плоски, като дълбочината се появява само там, където картата би трябвало да се усеща като физически обект (джаджи за транзакции, макети на продукти). Кодът и финансовите данни са представени в монохромно, с цвят на морска пяна – визуален сигнал, че това е банка, създадена от инженери за инженери.
Структурата на страницата е с пълна ширина, центрирана с широки странични полета (64–15 см на десктоп). Основният екран е разделен на две: заглавието и призивите за действие са подравнени вляво на 25 см, докато плаващ уиджет за транзакции е позициониран отдясно на 55 см върху фон от полутонова карта. Под основния екран секциите се редуват между бяло (4 см) и светло платно (5 см) с 6 см вертикални междинни линии. Съдържанието е подредено според единична мрежа с 6 колони: текстовите блокове заемат 4 колони (7 см), картите с изображения/продукти заемат 5–6 колони, с умишлено отместване от мрежата. Секциите, описващи характеристиките, използват оформление с 2 колони: текст отляво, продукт отдясно. Разделът със статистика за доверието е разделен на мрежа с 4 колони по цялата ширина на страницата. Логотата на клиентите са разположени в един центриран ред с междинни линии от 48px. Долният колонтитул има компактно оформление с две колони. Навигацията е фиксирана, прозрачна горна лента с височина 62 пиксела над главния екран с размазан фон, който става бял при превъртане. Няма странична лента или мегаменю – падащите менюта са прости менюта във формата на стрелки.
Визуалният стил е минималистичен и функционален – 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— Вторичното заглавие и основният текст са малко по-топли от „Midnight Ink“, използван там, където чистото черно би изглеждало твърде грубо върху светлото платно. - 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 — Монументална редакционна статия на кремава хартия. Заглавието със серифни букви 215 пиксела е самотно върху топъл пергамент, заобиколено от плаващи скулптурни форми и негативно пространство, напомнящо за морски въздух – страницата прилича повече на корица на художествена монография, отколкото на табло.
- Steep — Анализ на серифни шрифтове върху топла хартия
- ElevenLabs — Фотоесе в топли кремави тонове с фини заглавия. Тетрадка в стил Баухаус - хартия с цвят на яйчена черупка, черно мастило и един лилав и оранжев акцент за представяне на продукта.
- Awesomic — Редакционна цинкова мрежа с оранжеви препинателни знаци, напомнящи конфети
- Monad — редакционно техническо списание върху топъл пергамент
- AI for Business — Бруталистичен редакционен шоурум в топли сиви тонове