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 stock фотосуреттерінен толығымен бас тартады. Визуалды тіл үш дереккөзге негізделген: (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 — Жылы сұр реңктердегі қатыгез редакциялық көрме залы