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 пикселийн өндөртэй, тунгалаг дээд самбар бөгөөд гүйлгэх үед цагаан болж бүдгэрдэг бүдэг дэвсгэртэй. Хажуугийн самбар эсвэл мега цэс байхгүй - унах цэснүүд нь энгийн сум хэлбэртэй цэснүүд юм.
Харааны хэв маяг нь минималист бөгөөд ажиллагаатай - Багана нь сток гэрэл зургаас бүрэн зайлсхийдэг. Харааны хэл нь гурван эх сурвалж дээр суурилдаг: (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 пиксел, дэд гарчигуудад 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 — Халуун цаасан дээрх Сериф фонтын шинжилгээ
- ElevenLabs — Дулаан цөцгий өнгөтэй, нарийн гарчигтай фото эссэ. Баухаус маягийн дэвтэр - өндөгний хальсан өнгөтэй цаас, хар бэх, бүтээгдэхүүний үзэсгэлэнд зориулсан нил ягаан, улбар шар өнгийн ганц чимэглэл.
- Awesomic — Конфеттиг санагдуулам улбар шар цэг таслал бүхий редакцийн цайрын тор
- Monad — дулаан илгэн дээрх редакцийн техникийн сэтгүүл
- AI for Business — Дулаан саарал өнгийн харгис үзүүлбэрийн танхим