Column
тамноплава књига под хладном зором
Колона користи дубоку, институционалну тегет плаву боју на скоро белој позадини: страница прво делује као робусна површина банкарског производа, а затим као игралиште за програмере. Боја бренда није само једна, већ координисани пар - тегет плава #111a4a за озбиљну структуру, мента зелена #44b48b за податке и код - са једном топло наранџастом (#ec652b) резервисаном за акцентне површине високог интензитета попут Брекс картице. Типографијом доминира SuisseIntl, геометријски бессерифни фонт који се користи у целом распону тежине од 300 (линкови) до 600 (приказ), дајући систему префињен, уреднички стил који недостаје већини финтех компанија. Картице лебде на великим белим површинама са суптилним, слојевитим сенкама; већина елемената интерфејса је равна, са дубином која се појављује само тамо где би картица требало да делује као физички објекат (виџети за трансакције, модели производа). Код и финансијски подаци су представљени монохроматски, боје морске пене - визуелни сигнал да је ово банка коју су изградили инжењери за инжењере.
Структура странице је пуне ширине, центрирана са широким бочним маргинама (64–15 цм на десктопу). Главни екран је подељен: наслов и позиви на акцију су поравнати лево на 25 цм, док је плутајући виџет за трансакције позициониран десно на 55 цм на позадини полутонске мапе. Испод главног екрана, одељци се смењују између белог (4 цм) и светлог платна (5 цм) са вертикалним ивицама од 6 цм. Садржај је распоређен према једној мрежи са 6 колона: блокови текста заузимају 4 колоне (7 цм), картице слика/производа заузимају 5–6 колона, са намерним помаком од мреже. Одељци који описују карактеристике користе распоред са 2 колоне: текст са леве стране, производ са десне стране. Одељак са статистиком поверења је подељен на мрежу са 4 колоне преко целе ширине странице. Логотипи купаца се налазе у једном центрираном реду са ивицама од 48 пиксела. Подножје има компактан распоред са две колоне. Навигација је фиксна, 62 пиксела висока, провидна горња трака изнад главног екрана са замућеном позадином која бледи у белу док скролујете. Нема бочне траке нити менија — падајући менији су једноставни менији у облику стрелица.
Визуелни стил је минималистички и функционалан — Колона потпуно избегава стокове фотографије. Визуелни језик је изграђен на три извора: (1) илустрације SVG података, тачније испрекидана полутонска мапа света, рендерована градијентом од индига преко наранџасте до тиркизне, стварајући атмосферу глобалних размера иза главног елемента; (2) распореди картица производа — плутајући виџети који приказују стања на рачуну, детаље о трансферу и JSON фрагменте кода у белим картицама са драматичним сенкама; (3) визуелизације графикона — тиркизни свећњаци или тракасти графикони са танким спојним линијама који се користе у одељку поверења/статистике. Полутонска мапа је препознатљив визуелни елемент — њен градијент прелази из #d65620 (наранџаста) преко љубичасте, плаве, азурне, тиркизне и жуте, стварајући спектар који уједињује целу палету бренда на једној декоративној површини. Иконе имају једноличну дебљину контуре од 1,5–2 пиксела у варијантама #232730 или #a9acb6, са попуњавањем за активна стања. Без фотографија животног стила, без апстрактних 3Д рендера — ограничење је намерно усмерено на производ и податке.
Палета
Brend
- 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 до 60 пиксела · 10 корака
- SuisseIntl — замена: Inter · обриси 300, 400, 500, 600 · Примарни фонт – користи се за све наслове, текст, дугмад, навигацију, линкове и текст картица. Јединствени геометријски бессерифни фонт даје часопису Column препознатљив уређивачки стил, издвајајући га од других финтех компанија које раде искључиво са Inter-only. Тежина је 600 на 52–60 пиксела за наслове, 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 — Бруталистички уреднички салон у топлим сивим тоновима