Column
салкын таңдын астындагы кочкул көк китеп
Колонка дээрлик ак фондо терең, институционалдык кочкул көк түстү колдонот: баракча биринчиден бекем банк продуктунун бетин, экинчиден иштеп чыгуучунун оюн аянтчасын чагылдырат. Бренддин түсү бир эмес, координацияланган жуп — кочкул көк #111a4a олуттуу түзүлүштү, жалбыз жашыл #44b48b маалыматтар жана кодду билдирет — Brex картасы сыяктуу жогорку интенсивдүү акцент беттери үчүн сакталган бир жылуу кызгылт сары (#ec652b). Типографияда 300дөн (шилтемелерден) 600гө (дисплей) чейинки салмак диапазонунда колдонулган геометриялык sans serif SuisseIntl үстөмдүк кылат, бул системага көпчүлүк финтех компанияларында жок болгон такталган, редакциялык стилди берет. Карталар чоң ак беттерде назик, катмарлуу көлөкөлөр менен калкып жүрөт; интерфейс элементтеринин көпчүлүгү жалпак, тереңдик карта физикалык объект сыяктуу сезилиши керек болгон жерде гана көрүнөт (транзакция виджеттери, продукт макеттери). Код жана каржылык маалыматтар монохромдуу, деңиз көбүгүнүн түсүндө берилген — бул инженерлер тарабынан инженерлер үчүн курулган банк экенинин визуалдык белгиси.
Барактын түзүлүшү толук туурасынан, борборлоштурулган, кең каптал четтери менен (жумушчу столдо 64–15 см) жайгашкан. Негизги экран бөлүнгөн макет болуп саналат: аталыш жана чакырыктар солго 25 см тегизделген, ал эми калкып жүрүүчү транзакция виджети оң жакта жарым түстүү картанын фонунда 55 см аралыкта жайгашкан. Негизги экрандын астында бөлүмдөр ак (4 см) жана ачык полотно (5 см) менен кезектешип, 6 см тик науаларды ээлейт. Мазмун бир 6 тилкелүү торчого ылайык жайгаштырылган: текст блоктору 4 тилкени (7 см) ээлейт, сүрөт/продукт карталары 5–6 тилкени ээлейт, торчодон атайылап жылышып турат. Функцияларды сүрөттөгөн бөлүмдөр 2 тилкелүү макетти колдонот: текст сол жакта, продукт оң жакта. Ишеним статистикасы бөлүмү барактын толук туурасы боюнча 4 тилкелүү торчого бөлүнгөн. Кардарлардын логотиптери 48 пикселдик науалары бар бир борборлуу катарда жайгашкан. Төмөнкү колонтитулда эки тилкелүү компакттуу макет бар. Навигация – бул негизги экрандын үстүндөгү бекитилген, бийиктиги 62 пиксель болгон, тунук үстүнкү тилке, ал эми ылдый жылдырганда ак түскө өтүп кеткен бүдөмүк фон бар. Каптал тилке же мега-меню жок — ачылуучу тизмелер жөнөкөй жебе стилиндеги менюлар.
Визуалдык стили минималисттик жана функционалдуу — Column сток сүрөттөрүнөн толугу менен качат. Визуалдык тил үч булакка негизделген: (1) SVG маалыматтарынын иллюстрациялары, тактап айтканда, негизги элементтин артында глобалдык масштабдагы атмосфераны түзгөн чекиттүү жарым тондуу дүйнө картасы, индигодон кызгылт сарыга жана бирюзага градиент менен көрсөтүлгөн; (2) продукт картасынын макеттери — эсеп баланстарын, которуунун чоо-жайын жана JSON кодунун үзүндүлөрүн ак карталарда драмалык көлөкөлөр менен көрсөткөн калкып жүрүүчү виджеттер; (3) диаграмма визуализациялары — ишеним/статистика бөлүмүндө колдонулган ичке туташтыруучу сызыктары бар бирюза шам чырак же тилкелүү диаграммалар. Жарым тондуу карта — бул өзгөчө визуалдык элемент — анын градиенти #d65620 (кызгылт сары) түсүнөн кызгылт көк, көк, көгүлтүр, бирюза жана сары түстөргө өтүп, бренддин бүт палитрасын бир декоративдик бетке бириктирген спектрди түзөт. Сүрөтчөлөрдүн #232730 же #a9acb6 варианттарында бирдей контур калыңдыгы 1,5–2 пикселге барабар, активдүү абалдар үчүн толтуруу менен. Жашоо образынын сүрөттөрү, абстракттуу 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дон 60 пикселге чейин · 10 кадам
- SuisseIntl — алмаштыруу: Inter · контурлар 300, 400, 500, 600 · Негизги шрифт – бардык аталыштар, негизги текст, баскычтар, навигация, шилтемелер жана карта тексти үчүн колдонулат. Уникалдуу геометриялык sans serif шрифти Column'го өзгөчө редакциялык стилди берет, аны Inter-only менен гана иштеген башка финтех компанияларынан айырмалап турат. Салмагы аталыштар үчүн 52–60 пиксельде 600, кошумча аталыштар үчүн 500, негизги текст үчүн 400 жана аз басым жасалган шилтемелер үчүн 300 пиксел.
- SuisseIntlMono — алмаштыруу: JetBrains Mono · контурлар 400 · SuisseIntlге окшош бир аралыктуу шрифт, техникалык энбелгилер, API идентификаторлору жана UI элементтерине киргизилген маалыматтар үчүн колдонулат. Ал SuisseIntl менен бирдей пропорцияларды сактайт, ошондуктан бир аралыктуу жана пропорционалдуу текст аралаш контексттерде туура тегизделет.
- SFMono — алмаштыруу: Fira Code · контурлар 400 · Коддун үзүндүсүн көрсөтүү – JSON мисалдарында жана API документтеринин блокторунда көрсөтүлөт. Кодду UI текстинен визуалдык түрдө айырмалоо үчүн деңиз көбүгүнүн көлөкөсү колдонулат.
Интервалдар жана форма
| Максаты | Мааниси |
|---|---|
| Тыгыздык | орточо |
| Негизги кадам | 8px |
| Баскычтын радиусу | 8px |
| Картанын радиусу | 8px |
| Көлөкөлөр | көлөкөлөрдүн ордуна чек аралар жок |
| Бөлүмдөрдүн ортосунда | 72px |
| Барактын туурасы | 1200px |
Жасалма интеллект сиздин веб-сайтыңызды Column стилинде куруп, аны толтурат
- Instagram, TikTok, Facebook шилтемелери аркылуу өнүмдөр жана посттор менен толтуруңуз.
- Эски сайтыңыздан мазмунду өткөрүп бериңиз — жөн гана даректи көрсөтүңүз.
- Эң мыкты кыймылдаткычтагы заманбап дизайн: серверди рендеринг жана SEO оптималдаштыруу менен React ( Next.js).
- Издөө натыйжалары жана нейрон тармактарынын сунуштары үчүн толугу менен автоматташтырылган SEO оптималдаштыруу.
Окшош стилдер
- dope.security — Кызгылт көк маяктар менен түнкү терминал
- Leonardo — Тескери жайгаштырылган редакциялык галерея. Кара дубал менен курчалган музей, анда кочкул кызыл түстөгү жазуулар дубал инсталляцияларынын ролун аткарат, ал эми төмөндө жасалма интеллект тарабынан түзүлгөн портреттер тыгыз торчодо илинип турат.
- VEED — Неон жашыл жарык баскычтары бар ак галерея дубалы
- Craft Docs — Скрапбукинг үчүн санариптик коллаж. Дизайн ойлонулган, тактилдүү скрапбукка окшош, анда структураланган санариптик ноталар жумшак, органикалык текстуралар менен айкалышкан.
- Letter — Сактоочу жайдан жаркыраган артефакттар коюлган жеке галерея. Галереянын түстүү дубалдарындагы хром скульптуралардын үстүндө сериф жазуулары калкып жүргөн кара дубал менен курчалган көргөзмө аянты.
- Railway — Космостук түнкү экспресс. Караңгы, жылдыздуу мейкиндиктеги тынч, толкундатуучу саякат, ачык сигналдар менен жетектелет.
- Garden Eight — Каймак түстүү кагазга басылган монументалдуу редакциялык макала. 215 пикселдик серифтин аталышы жылуу пергаментте жалгыз жайгашкан, анын айланасында калкып жүрүүчү скульптуралык формалар жана деңиз абасын эске салган терс мейкиндик бар — бул баракча башкаруу панелине караганда көркөм монографиянын мукабасына көбүрөөк окшош.
- Steep — Жылуу кагаздагы Serif шрифттерин талдоо
- ElevenLabs — Жылуу каймак түстөгү, назик аталыштары бар фотоэссе. Баухаус стилиндеги дептер — жумуртканын кабыгы түстүү кагаз, кара сыя жана продукцияны көрсөтүү үчүн бир кызгылт көк жана кызгылт сары түстөгү акцент.
- Awesomic — Конфеттини эске салган кызгылт сары тыныш белгилери бар редакциялык цинк торчосу
- Monad — жылуу пергамент боюнча редакциялык техникалык журнал
- AI for Business — Жылуу боз түстөгү бруталисттик редакциянын көргөзмө залы