Column
темно сина книга под студената зора
„Колумна“ користи длабока, институционална темно сина боја на речиси бела позадина: страницата прво се чувствува како робусна површина на банкарски производ, а потоа како игралиште за развивачи. Бојата на брендот не е една, туку координиран пар - темно сина #111a4a за сериозна структура, мента зелена #44b48b за податоци и код - со една топла портокалова (#ec652b) резервирана за акцентни површини со висок интензитет како што е картичката Brex. Типографијата е доминирана од SuisseIntl, геометриски sans serif што се користи низ целиот опсег на тежина од 300 (линкови) до 600 (приказ), давајќи му на системот рафиниран, уреднички стил што му недостасува на повеќето финтек компании. Картичките лебдат на големи бели површини со суптилни, слоевити сенки; повеќето елементи на интерфејсот се рамни, а длабочината се појавува само таму каде што картичката треба да се чувствува како физички објект (виджети за трансакции, макети на производи). Кодот и финансиските податоци се претставени во монохроматска боја, во боја на морска пена - визуелен сигнал дека ова е банка изградена од инженери за инженери.
Структурата на страницата е со полна ширина, центрирана со широки странични маргини (64–15 см на десктоп). Главниот екран е со поделен распоред: насловот и повиците за акција се порамнети лево на 25 см, додека лебдечкиот виџет за трансакции е поставен десно на 55 см наспроти полутон позадина на мапата. Под главниот екран, деловите се менуваат помеѓу бело (4 см) и светло платно (5 см) со вертикални олуци од 6 см. Содржината е подредена според една мрежа од 6 колони: текстуалните блокови зафаќаат 4 колони (7 см), картичките со слики/производи зафаќаат 5–6 колони, со намерно поместување од мрежата. Деловите што ги опишуваат карактеристиките користат распоред од 2 колони: текст лево, производ десно. Делот за статистика на доверба е поделен на мрежа од 4 колони по целата ширина на страницата. Логоата на клиентите се наоѓаат во еден центриран ред со олуци од 48px. Подножјето има компактен распоред од две колони. Навигацијата е фиксна, висока 62 пиксели, транспарентна горна лента над главниот екран со заматена позадина што бледнее во бела боја додека скролувате. Нема странична лента или мега-мени - паѓачките менија се едноставни менија во стил на стрелка.
Визуелниот стил е минималистички и функционален - Колоната целосно ги избегнува фотографиите од залихи. Визуелниот јазик е изграден врз три извори: (1) илустрации на SVG податоци, поточно испрекината полутонска мапа на светот, рендерирана со градиент од индиго до портокалова до тиркизна боја, создавајќи атмосфера на глобално ниво зад главниот елемент; (2) распореди на картички на производи - лебдечки виџети што прикажуваат салда на сметки, детали за трансфер и JSON фрагменти од код во бели картички со драматични сенки; (3) визуелизации на графикони - тиркизни свеќници или столбести дијаграми со тенки линии за поврзување што се користат во делот за доверба/статистика. Мапата со полутонови е препознатлив визуелен елемент - нејзиниот градиент преминува од #d65620 (портокалова) преку виолетова, сина, азурна, тиркизна и жолта, создавајќи спектар што ја обединува целата палета на брендот на една декоративна површина. Иконите имаат униформна дебелина на контурата од 1,5–2px во варијантите #232730 или #a9acb6, со пополнување за активни состојби. Без фотографии од животниот стил, без апстрактни 3Д рендери - ограничувањето е намерно за да се фокусира вниманието на производот и податоците.
Палета
Бренд
- 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 · Примарен фонт – се користи за сите наслови, текст во телото, копчиња, навигација, линкови и текст на картичка. Уникатниот геометриски sans serif ѝ дава на 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 — Бруталистички уреднички изложбен салон во топли сиви тонови