Column
ປື້ມບັນຊີສີຟ້າເຂັ້ມພາຍໃຕ້ຮຸ່ງອາລຸນທີ່ເຢັນສະບາຍ
ຖັນໃຊ້ສີຟ້າເຂັ້ມ ແລະ ເປັນລະບົບ ເທິງພື້ນຫຼັງເກືອບສີຂາວ: ໜ້າເວັບຮູ້ສຶກຄືກັບໜ້າຜະລິດຕະພັນທະນາຄານທີ່ແຂງແຮງກ່ອນ ແລະ ເປັນສະໜາມເດັກຫຼິ້ນຂອງນັກພັດທະນາຕໍ່ໄປ. ສີຂອງຍີ່ຫໍ້ບໍ່ແມ່ນສີດຽວ, ແຕ່ເປັນຄູ່ທີ່ປະສານງານກັນ - ສີຟ້າເຂັ້ມ #111a4a ສຳລັບໂຄງສ້າງທີ່ຈິງຈັງ, ສີຂຽວອ່ອນ #44b48b ສຳລັບຂໍ້ມູນ ແລະ ລະຫັດ - ດ້ວຍສີສົ້ມອຸ່ນດຽວ (#ec652b) ທີ່ສະຫງວນໄວ້ສຳລັບໜ້າຜິວທີ່ມີຄວາມເຂັ້ມສູງເຊັ່ນບັດ Brex. ຮູບແບບຕົວອັກສອນຖືກຄອບງຳໂດຍ SuisseIntl, ເຊິ່ງເປັນຕົວອັກສອນ sans serif ທີ່ເປັນເລຂາຄະນິດທີ່ໃຊ້ໃນທຸກລະດັບນ້ຳໜັກຕັ້ງແຕ່ 300 (ລິ້ງ) ຫາ 600 (ໜ້າຈໍ), ເຮັດໃຫ້ລະບົບມີແບບບັນນາທິການທີ່ປັບປຸງໃຫ້ດີຂຶ້ນທີ່ບໍລິສັດ fintech ສ່ວນໃຫຍ່ຂາດ. ບັດລອຍຢູ່ເທິງໜ້າຜິວສີຂາວຂະໜາດໃຫຍ່ທີ່ມີເງົາທີ່ລະອຽດອ່ອນ ແລະ ເປັນຊັ້ນໆ; ອົງປະກອບອິນເຕີເຟດສ່ວນໃຫຍ່ແມ່ນຮາບພຽງ, ມີຄວາມເລິກປາກົດພຽງແຕ່ບ່ອນທີ່ບັດຄວນຮູ້ສຶກຄືກັບວັດຖຸທາງກາຍະພາບ (ວິດເຈັດທຸລະກຳ, ຮູບແບບຜະລິດຕະພັນ). ລະຫັດ ແລະ ຂໍ້ມູນທາງການເງິນຖືກນຳສະເໜີເປັນສີດຽວ, ສີນ້ຳທະເລ - ເປັນສັນຍານທີ່ເບິ່ງເຫັນວ່ານີ້ແມ່ນທະນາຄານທີ່ສ້າງໂດຍວິສະວະກອນສຳລັບວິສະວະກອນ.
ໂຄງສ້າງໜ້າເວັບມີຄວາມກວ້າງເຕັມ, ຢູ່ໃຈກາງດ້ວຍຂອບຂ້າງກວ້າງ (64–15 ຊມ ໃນເດັສທັອບ). ໜ້າຈໍຫຼັກແມ່ນຮູບແບບແຍກ: ຫົວຂໍ້ ແລະ ການຮຽກຮ້ອງໃຫ້ດຳເນີນການຖືກຈັດລຽງໄວ້ທາງຊ້າຍທີ່ 25 ຊມ, ໃນຂະນະທີ່ວິດເຈັດທຸລະກຳລອຍຢູ່ເບື້ອງຂວາທີ່ 55 ຊມ ທຽບກັບພື້ນຫຼັງແຜນທີ່ເຄິ່ງໂທນ. ຢູ່ດ້ານລຸ່ມຂອງໜ້າຈໍຫຼັກ, ພາກສ່ວນຕ່າງໆສະຫຼັບກັນລະຫວ່າງສີຂາວ (4 ຊມ) ແລະ ຜ້າໃບສີອ່ອນ (5 ຊມ) ພ້ອມດ້ວຍຮ່ອງຮອຍແນວຕັ້ງ 6 ຊມ. ເນື້ອຫາຖືກຈັດລຽງຕາມຕາຂ່າຍໄຟຟ້າ 6 ຖັນດຽວ: ບລັອກຂໍ້ຄວາມຄອບຄອງ 4 ຖັນ (7 ຊມ), ບັດຮູບພາບ/ຜະລິດຕະພັນຄອບຄອງ 5–6 ຖັນ, ໂດຍມີການຊົດເຊີຍຈາກຕາຂ່າຍໄຟຟ້າ. ພາກສ່ວນທີ່ອະທິບາຍຄຸນສົມບັດໃຊ້ຮູບແບບ 2 ຖັນ: ຂໍ້ຄວາມຢູ່ເບື້ອງຊ້າຍ, ຜະລິດຕະພັນຢູ່ເບື້ອງຂວາ. ພາກສ່ວນສະຖິຕິຄວາມໄວ້ວາງໃຈແບ່ງອອກເປັນຕາຂ່າຍໄຟຟ້າ 4 ຖັນຕະຫຼອດຄວາມກວ້າງຂອງໜ້າ. ໂລໂກ້ລູກຄ້າຕັ້ງຢູ່ໃນແຖວດຽວທີ່ຢູ່ໃຈກາງດ້ວຍຮ່ອງຮອຍ 48px. ສ່ວນລຸ່ມສຸດມີຮູບແບບສອງຖັນທີ່ກະທັດຮັດ. ການນຳທາງແມ່ນແຖບດ້ານເທິງທີ່ໂປ່ງໃສ, ສູງ 62 ພິກເຊວ ເຊິ່ງຢູ່ເທິງໜ້າຈໍຫຼັກ ພ້ອມດ້ວຍພື້ນຫຼັງທີ່ມົວ ເຊິ່ງຈະຈາງລົງເປັນສີຂາວເມື່ອທ່ານເລື່ອນລົງ. ບໍ່ມີແຖບຂ້າງ ຫຼື ເມນູຂະໜາດໃຫຍ່ - ເມນູແບບເລື່ອນລົງແມ່ນເມນູແບບລູກສອນງ່າຍໆ.
ຮູບແບບການເບິ່ງເຫັນແມ່ນ minimalist ແລະ ເປັນປະໂຫຍດ - Column ຫຼີກລ່ຽງການຖ່າຍຮູບສະຕັອກຢ່າງສິ້ນເຊີງ. ພາສາການເບິ່ງເຫັນແມ່ນສ້າງຂຶ້ນໂດຍອີງໃສ່ສາມແຫຼ່ງຂໍ້ມູນຄື: (1) ພາບປະກອບຂໍ້ມູນ SVG, ໂດຍສະເພາະແມ່ນແຜນທີ່ໂລກເຄິ່ງໂທນທີ່ມີຈຸດ, ສະແດງດ້ວຍການ gradient ຈາກສີຄາມຫາສີສົ້ມຫາສີຟ້າຂຽວ, ສ້າງບັນຍາກາດຂອງຂະໜາດໂລກຢູ່ເບື້ອງຫຼັງອົງປະກອບຫຼັກ; (2) ຮູບແບບບັດຜະລິດຕະພັນ - widgets ລອຍຕົວທີ່ສະແດງຍອດເງິນໃນບັນຊີ, ລາຍລະອຽດການໂອນ, ແລະ snippets ລະຫັດ JSON ໃນບັດສີຂາວທີ່ມີເງົາທີ່ໜ້າປະທັບໃຈ; (3) ການສະແດງພາບຕາຕະລາງ - ຕາຕະລາງ candlestick ສີຟ້າຂຽວ ຫຼື ຕາຕະລາງແທ່ງທີ່ມີເສັ້ນເຊື່ອມຕໍ່ບາງໆທີ່ໃຊ້ໃນພາກສ່ວນ trust/statistics. ແຜນທີ່ເຄິ່ງໂທນແມ່ນອົງປະກອບການເບິ່ງເຫັນທີ່ໂດດເດັ່ນ - ການປ່ຽນ gradient ຂອງມັນຈາກ #d65620 (ສີສົ້ມ) ໄປຫາສີມ່ວງ, ສີຟ້າ, ສີຟ້າຂຽວ, ສີຟ້າຂຽວ, ແລະສີເຫຼືອງ, ສ້າງ spectrum ທີ່ລວມ palette ຍີ່ຫໍ້ທັງໝົດໃສ່ພື້ນຜິວຕົກແຕ່ງດຽວ. ຮູບສັນຍາລັກມີຄວາມໜາຂອງໂຄງຮ່າງທີ່ເປັນເອກະພາບ 1.5–2px ໃນຕົວແປ #232730 ຫຼື #a9acb6, ມີການຕື່ມສຳລັບສະຖານະທີ່ໃຊ້ງານ. ບໍ່ມີຮູບພາບວິຖີຊີວິດ, ບໍ່ມີຮູບພາບ 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 ຫາ 60px · 10 ຂັ້ນຕອນ
- SuisseIntl — ການທົດແທນ: Inter · ໂຄງຮ່າງ 300, 400, 500, 600 · ຟອນຫຼັກ - ໃຊ້ສຳລັບຫົວຂໍ້ທັງໝົດ, ຂໍ້ຄວາມໃນໜ້າເວັບ, ປຸ່ມ, ການນຳທາງ, ລິ້ງ ແລະ ຂໍ້ຄວາມໃນບັດ. ຕົວອັກສອນ sans serif ທີ່ເປັນເອກະລັກເຮັດໃຫ້ Column ມີຮູບແບບບັນນາທິການທີ່ໂດດເດັ່ນ, ເຮັດໃຫ້ມັນແຕກຕ່າງຈາກບໍລິສັດ fintech ອື່ນໆທີ່ເຮັດວຽກສະເພາະກັບ Inter-only. ນ້ຳໜັກແມ່ນ 600 ທີ່ 52–60px ສຳລັບຫົວຂໍ້, 500 ສຳລັບຫົວຂໍ້ຍ່ອຍ, 400 ສຳລັບຂໍ້ຄວາມໃນໜ້າເວັບ, ແລະ 300 ສຳລັບລິ້ງທີ່ມີຄວາມເນັ້ນໜັກຕ່ຳ.
- SuisseIntlMono — ການທົດແທນ: JetBrains Mono · ໂຄງຮ່າງ 400 · ຟອນຕ໌ monospaced ຄ້າຍຄືກັບ SuisseIntl, ໃຊ້ສຳລັບປ້າຍຊື່ທາງເທັກນິກ, ຕົວລະບຸ API, ແລະຂໍ້ມູນທີ່ຝັງຢູ່ໃນອົງປະກອບ UI. ມັນຮັກສາສັດສ່ວນດຽວກັນກັບ SuisseIntl, ດັ່ງນັ້ນຂໍ້ຄວາມ monospaced ແລະສັດສ່ວນຈຶ່ງຈັດລຽງຢ່າງຖືກຕ້ອງໃນສະພາບການປະສົມ.
- SFMono — ການທົດແທນ: Fira Code · ໂຄງຮ່າງ 400 · ການສະແດງຕົວຢ່າງລະຫັດ - ສະແດງໃນຕົວຢ່າງ JSON ແລະບລັອກເອກະສານ API. ສີນ້ຳຕານທະເລຖືກໃຊ້ເພື່ອແຍກລະຫັດອອກຈາກຂໍ້ຄວາມ UI.
ໄລຍະຫ່າງ ແລະ ຮູບແບບ
| ຈຸດປະສົງ | ຄວາມໝາຍ |
|---|---|
| ຄວາມໜາແໜ້ນ | ໂດຍສະເລ່ຍ |
| ຂັ້ນຕອນພື້ນຖານ | 8px |
| ລັດສະໝີປຸ່ມ | 8px |
| ລັດສະໝີບັດ | 8px |
| ເງົາ | ບໍ່ມີ - ຂອບແທນທີ່ຈະເປັນເງົາ |
| ລະຫວ່າງພາກສ່ວນຕ່າງໆ | 72px |
| ຄວາມກວ້າງຂອງໜ້າ | 1200px |
AI ຈະສ້າງເວັບໄຊທ໌ຂອງທ່ານໃນແບບຂອງ Column ແລະຕື່ມຂໍ້ມູນໃສ່ມັນ
- ຕື່ມຂໍ້ມູນໃສ່ຜະລິດຕະພັນ ແລະ ໂພສຕ່າງໆຜ່ານລິ້ງ - Instagram, TikTok, Facebook.
- ໂອນຍ້າຍເນື້ອຫາຈາກເວັບໄຊເກົ່າຂອງທ່ານ - ພຽງແຕ່ລະບຸທີ່ຢູ່.
- ການອອກແບບທີ່ທັນສະໄໝໃນເຄື່ອງຈັກທີ່ດີທີ່ສຸດ: React ( Next.js) ພ້ອມດ້ວຍການສະແດງຜົນເຊີບເວີ ແລະ ການເພີ່ມປະສິດທິພາບ SEO.
- ການເພີ່ມປະສິດທິພາບ SEO ແບບອັດຕະໂນມັດຢ່າງເຕັມທີ່ສຳລັບຜົນການຄົ້ນຫາ ແລະ ຄຳແນະນຳກ່ຽວກັບເຄືອຂ່າຍປະສາດ.
ແບບທີ່ຄ້າຍຄືກັນ
- dope.security — ສະຖານີທ່ຽງຄືນທີ່ມີໄຟສັນຍານສີມ່ວງ
- Leonardo — ຫ້ອງວາງສະແດງບັນນາທິການແບບກັບຫົວ. ພິພິທະພັນທີ່ມີຝາສີດຳບ່ອນທີ່ຫົວຂໍ້ຂ່າວສີມ່ວງເຮັດໜ້າທີ່ເປັນການຕິດຕັ້ງຝາຜະໜັງ, ແລະຮູບຄົນທີ່ສ້າງຂຶ້ນໂດຍ AI ແຂວນຢູ່ໃນຕາຂ່າຍທີ່ໜາແໜ້ນຢູ່ດ້ານລຸ່ມ.
- VEED — ຝາຜະໜັງຫ້ອງວາງສະແດງສີຂາວມີປຸ່ມໄຟນີອອນສີຂຽວ
- Craft Docs — ຮູບຕໍ່ດິຈິຕອລສຳລັບການເຮັດ scrapbook. ການອອກແບບຄ້າຍຄືກັບ scrapbook ທີ່ຄິດເຖິງ ແລະ ສຳຜັດໄດ້, ບ່ອນທີ່ບັນທຶກດິຈິຕອລທີ່ມີໂຄງສ້າງປະສົມປະສານກັບໂຄງສ້າງທີ່ອ່ອນນຸ້ມ ແລະ ອໍແກນິກ.
- Letter — ຫ້ອງວາງສະແດງສ່ວນຕົວທີ່ມີສິ່ງປະດິດທີ່ເຫຼື້ອມເປັນເງົາຈາກບ່ອນເກັບມ້ຽນ. ພື້ນທີ່ວາງສະແດງທີ່ມີຝາສີດຳບ່ອນທີ່ຫົວຂໍ້ຮູບຍ້ອມລອຍຢູ່ເໜືອຮູບປັ້ນໂຄຣມຢູ່ເທິງຝາສີຂອງຫ້ອງວາງສະແດງ.
- Railway — ລົດໄຟດ່ວນ Cosmic Midnight Express. ການເດີນທາງທີ່ສະຫງົບ ແລະ ໜ້າຕື່ນເຕັ້ນຜ່ານອະວະກາດທີ່ມືດມົວ ແລະ ມີແສງດາວສ່ອງເຖິງ, ນຳພາໂດຍສັນຍານທີ່ຊັດເຈນ.
- Garden Eight — ບົດບັນນາທິການທີ່ຍິ່ງໃຫຍ່ຢູ່ເທິງເຈ້ຍສີຄຣີມ. ຫົວຂໍ້ຂ່າວ serif ຂະໜາດ 215px ຕັ້ງຢູ່ໂດດດ່ຽວຢູ່ເທິງເຈ້ຍ parchment ອຸ່ນໆ, ລ້ອມຮອບດ້ວຍຮູບແບບປະຕິມາກຳທີ່ລອຍຢູ່ ແລະ ພື້ນທີ່ລົບທີ່ເຕືອນໃຫ້ນຶກເຖິງອາກາດທະເລ - ໜ້າເວັບນີ້ໃຫ້ຄວາມຮູ້ສຶກຄືກັບໜ້າປົກຂອງເອກະສານສິລະປະຫຼາຍກວ່າແຜງໜ້າປັດ.
- Steep — ການວິເຄາະຕົວອັກສອນ Serif ໃນເຈ້ຍອຸ່ນ
- ElevenLabs — ບົດຂຽນຮູບພາບໃນໂທນສີຄຣີມອຸ່ນໆພ້ອມດ້ວຍຫົວຂໍ້ຂ່າວທີ່ລະອຽດອ່ອນ. ປື້ມບັນທຶກແບບ Bauhaus—ເຈ້ຍສີເປືອກໄຂ່, ໝຶກສີດຳ, ແລະສີມ່ວງ ແລະ ສີສົ້ມດຽວສຳລັບວາງສະແດງຜະລິດຕະພັນ.
- Awesomic — ຕາໜ່າງສັງກະສີບັນນາທິການທີ່ມີເຄື່ອງໝາຍວັກຕອນສີສົ້ມເຮັດໃຫ້ນຶກເຖິງເຈ້ຍປິວຕີ້
- Monad — ວາລະສານດ້ານວິຊາການກ່ຽວກັບເຈ້ຍ parchment ອຸ່ນ
- AI for Business — ຫ້ອງວາງສະແດງບັນນາທິການແບບ Brutalist ໃນໂທນສີເທົາອົບອຸ່ນ