Vercel
ພິມເຄື່ອງໝາຍການຄ້າໃສ່ເຈ້ຍສີຂາວ
ລະບົບການອອກແບບ Vercel ແມ່ນການຝຶກຝົນການໃຊ້ສີດຽວທີ່ມີລະບຽບວິໄນ: ຜ້າໃບເກືອບຂາວ (#fafafa), ຕົວພິມສີດຳ, ຂອບບາງໆ, ແລະ ບໍ່ມີສີຕົກແຕ່ງເລີຍ. ພາສາທີ່ເບິ່ງເຫັນເຮັດໃຫ້ນຶກເຖິງສະຖານີນັກພັດທະນາທີ່ສະແດງໃນຕົວພິມ - Geist Sans ຍາກທີ່ຈະອ່ານອອກໃນລະດັບ "ວິລະຊົນ" ດ້ວຍນ້ຳໜັກ 400-450 ແລະໄລຍະຫ່າງຂອງຕົວອັກສອນ -0.06em, ໃນຂະນະທີ່ Geist Mono ໃຊ້ປ້າຍ, ຂໍ້ມູນ metadata, ແລະຕົວຢ່າງລະຫັດໃນຂະໜາດ 11-13px. ປຸ່ມຕ່າງໆແມ່ນຮູບຊົງ 6px ຫຼື ຮູບສີ່ແຈສາກສີດຳບໍລິສຸດເທິງສີຂາວ ຫຼື ສີຂາວເທິງສີດຳ. ລະບົບອີງໃສ່ຄວາມຄົມຊັດ ແລະ ລຳດັບຊັ້ນຂອງຕົວອັກສອນແທນທີ່ຈະເປັນສີ, ໂດຍໃຊ້ເຄື່ອງໝາຍສາມຫຼ່ຽມ (▲) ແລະ ເຄື່ອງໝາຍຄຳສັບສອງແຖວເປັນອົງປະກອບການສ້າງຍີ່ຫໍ້ເທົ່ານັ້ນ. ພື້ນຜິວຖືກວາງຊ້ອນກັນຕາມລຳດັບ #fafafa → #ebebeb → #171717, ສ້າງຄວາມເລິກຜ່ານການປ່ຽນຄ່າໂທນສີແທນທີ່ຈະເປັນເງົາ ຫຼື ສີ. ແຕ່ລະອົງປະກອບແມ່ນສ້າງຂຶ້ນໃນຕາຂ່າຍໄຟຟ້າຂະໜາດ 4px ທີ່ມີຄວາມໜາແໜ້ນກະທັດຮັດ, ເຊິ່ງສົ່ງຜົນໃຫ້ມີອິນເຕີເຟດທີ່ເຕືອນເຖິງປື້ມບັນທຶກຂອງວິສະວະກອນ - ຊັດເຈນ, ໃຊ້ງານໄດ້ດີ, ແລະບໍ່ຢ້ານພື້ນທີ່ຫວ່າງ.
ຕູ້ຄອນເທນເນີມີຄວາມກວ້າງ 1280px, ຢູ່ກາງ, ມີຊ່ອງຫວ່າງຕາມແນວນອນທີ່ກວ້າງຂວາງ (24-48px). ບລັອກຫຼັກໃຊ້ອົງປະກອບສາມເຂດທີ່ບໍ່ສະເໝີກັນ: ຫົວຂໍ້ໃຫຍ່ຢູ່ເບື້ອງຊ້າຍ, ຮູບສັນຍາລັກຍີ່ຫໍ້ຢູ່ໃຈກາງ, ແລະບລັອກ "ຄິ້ວ" ຢູ່ເບື້ອງຂວາ. ຢູ່ລຸ່ມບລັອກຫຼັກ, ເນື້ອຫາຖືກຈັດລຽງເປັນເສັ້ນສະຫຼັບກັນ: ເສັ້ນເຕັມຄວາມກວ້າງທີ່ມີໂລໂກ້ຂອງລູກຄ້າ, ຕາມດ້ວຍພາກສ່ວນ "ຜູ້ສ້າງຕົວແທນ" ສອງຖັນທີ່ມີຫົວຂໍ້ຢູ່ເບື້ອງຊ້າຍ ແລະຮູບແບບຜະລິດຕະພັນຢູ່ເບື້ອງຂວາ, ຕາມດ້ວຍຕາຂ່າຍຂອງບັດສາມໃບທີ່ມີຄຸນສົມບັດ. ພາກສ່ວນຕ່າງໆຖືກແຍກອອກດ້ວຍຮ່ອງແນວຕັ້ງຂອງ 96-128px ໂດຍບໍ່ມີຕົວແບ່ງ ຫຼື ການຊົດເຊີຍພື້ນຫຼັງ. ການນຳທາງແມ່ນແຜງດຽວຄົງທີ່ 64px ທີ່ມີພື້ນຫຼັງມົວ. ຕາຂ່າຍບັດໃຊ້ຮູບແບບສອງ ຫຼື ສາມຖັນຢ່າງຕໍ່ເນື່ອງທີ່ມີຮ່ອງ 16-24px. ຄວາມໜາແໜ້ນໂດຍລວມແມ່ນກະທັດຮັດ - ຂໍ້ຄວາມອ່ານງ່າຍ, ມີພື້ນທີ່ສີຂາວພຽງພໍ, ແຕ່ຂະໜາດຕົວອັກສອນ ແລະ ຂະໜາດອົງປະກອບປ້ອງກັນບໍ່ໃຫ້ໜ້າເວັບຮູ້ສຶກໂປ່ງໃສ.
ຮູບພາບມີໜ້ອຍ ແລະ ໃຊ້ງານໄດ້ສະເໝີ. ອົງປະກອບທີ່ເບິ່ງເຫັນໄດ້ຫຼັກແມ່ນຮູບສາມຫຼ່ຽມສີດຳ (▲)—ເຄື່ອງໝາຍຍີ່ຫໍ້ເລຂາຄະນິດທີ່ປະກົດເປັນຮູບຊົງທີ່ລອຍຢູ່ໃນຂະໜາດ "ຕົວພິມໃຫຍ່". ໂລໂກ້ລູກຄ້າໃນແຖບຫຼັກຖານແນວຄວາມຄິດໃຊ້ເຄື່ອງໝາຍຄຳສັບຕົວຈິງຂອງແຕ່ລະຍີ່ຫໍ້ໃນລະດັບສີເທົາ. ຮູບແບບຜະລິດຕະພັນ (ອິນເຕີເຟດສົນທະນາຂອງ Notion, ຜົນຜະລິດຂອງເຄື່ອງໝາຍ CLI, ບັດໜັງສືຜ່ານແດນ) ຖືກຝັງເປັນພາບໜ້າຈໍໂໝດແສງພາຍໃນບັດທີ່ມີກອບ. ບໍ່ມີຮູບຖ່າຍ, ພາບປະກອບ, ຫຼື ອົງປະກອບ 3D—ລະບົບແມ່ນຮູບແບບຕົວອັກສອນ ແລະ ຮູບຊົງເລຂາຄະນິດທີ່ບໍລິສຸດໃນເຈ້ຍສີຂາວ.
ພາເລັດ
ເປັນກາງ
- Obsidian
#171717— ຫົວຂໍ້ຫຼັກ, ຂອບການນຳທາງ, ການຕື່ມປຸ່ມສີເຂັ້ມ, ແລະ ເຄື່ອງໝາຍລາຍຊື່ ລ້ວນແຕ່ເກືອບເປັນສີດຳ, ຫຼີກລ່ຽງຄວາມຫຍາບຄາຍ ແລະ ຄວາມອີ່ມຕົວທີ່ສົດໃສ. - Paper White
#fafafa— ຜ້າໃບໜ້າ, ໜ້າບັດ, ແສງໄຟຂອງປຸ່ມຕ່າງໆ - ນີ້ແມ່ນພື້ນຫຼັງມາດຕະຖານທີ່ທຸກຢ່າງອື່ນໆຕັ້ງຢູ່. - Pure White
#ffffff— ໜ້າດິນບັດ, ແຜ່ນສຽບ, ຊ່ອງປ້ອນຂໍ້ມູນທີ່ຖືກຍົກຂຶ້ນ. - Hairline
#ebebeb— ຂອບ 1px ຢູ່ປຸ່ມ, ລິ້ງ ແລະ ບັດສາມາດເບິ່ງເຫັນໄດ້ໃນລະດັບການຊູມສູງ, ແຕ່ເບິ່ງບໍ່ເຫັນໃນລະດັບການຊູມຕ່ຳ. - Ash
#c9c9c9— ຂໍ້ຄວາມທີ່ປິດໃຊ້ງານ, ປ້າຍກຳກັບທີ່ປິດສຽງ, ເຄື່ອງໝາຍນ້ຳຊື່ຍີ່ຫໍ້ໃນໂລໂກ້ລູກຄ້າ. - Smoke
#a8a8a8— ຂໍ້ຄວາມສຳຮອງ, ຂໍ້ຄວາມຕົວຍຶດ, ການຕື່ມໄອຄອນເລັກນ້ອຍ.
ຮູບແບບຕົວອັກສອນ
ຈາກ 11 ຫາ 64px · 6 ຂັ້ນຕອນ
- Geist Sans — ການທົດແທນ: Inter · ໂຄງຮ່າງ 400, 450, 500 · ຟອນຫຼັກສຳລັບອິນເຕີເຟດ ແລະ ຫົວຂໍ້ແມ່ນຟອນ sans-serif ເລຂາຄະນິດທີ່ອອກແບບມາເປັນພິເສດຈາກ Vercel ທີ່ມີໄລຍະຫ່າງລະຫວ່າງຕົວອັກສອນທີ່ແຄບໃນຂະໜາດໃຫຍ່ (-0.06em ທີ່ 56-64px, -0.05em ທີ່ 30px). ສຳລັບຫົວຂໍ້ຢູ່ເທິງສຸດຂອງໜ້າ, ໄດ້ມີການເລືອກນ້ຳໜັກ 450: ໜາກວ່າ Light ແຕ່ເບົາກວ່າ Semi-Bold, ສ້າງນ້ຳສຽງທີ່ໝັ້ນໃຈ, ແຕ່ບໍ່ຮຸນແຮງ.
- Geist Mono — ການທົດແທນ: JetBrains Mono · ໂຄງຮ່າງ 400, 500, 600 · ຟອນສຳຮອງທີ່ມີຊ່ອງຫວ່າງດຽວສຳລັບຄຳບັນຍາຍ, ບລັອກລະຫັດ, ແຜງຜົນຜະລິດ CLI, ຂໍ້ມູນເມຕາ ແລະ ຂໍ້ຄວາມຕົວພິມໃຫຍ່. ການປະສົມປະສານ 8px/600px/ຕົວພິມໃຫຍ່ຊ່ວຍໃຫ້ສາມາດວາງເຄື່ອງໝາຍຄຳສັບຂະໜາດນ້ອຍໄດ້ຢ່າງແນ່ນອນ. ໄລຍະຫ່າງຕົວອັກສອນທີ່ກວ້າງ (0.071em) ໃນລຸ້ນທີ່ມີຊ່ອງຫວ່າງດຽວໃຫ້ພື້ນທີ່ພຽງພໍສຳລັບຂໍ້ຄວາມຕົວພິມໃຫຍ່.
ໄລຍະຫ່າງ ແລະ ຮູບແບບ
| ຈຸດປະສົງ | ຄວາມໝາຍ |
|---|---|
| ຄວາມໜາແໜ້ນ | ໜາແໜ້ນ |
| ຂັ້ນຕອນພື້ນຖານ | 12px |
| ລັດສະໝີປຸ່ມ | 6px |
| ລັດສະໝີບັດ | 6px |
| ເງົາ | ບໍ່ມີ - ຂອບແທນທີ່ຈະເປັນເງົາ |
| ລະຫວ່າງພາກສ່ວນຕ່າງໆ | 96-128px |
| ຄວາມກວ້າງຂອງໜ້າ | 1280px |
AI ຈະສ້າງເວັບໄຊທ໌ຂອງທ່ານໃນແບບຂອງ Vercel ແລະຕື່ມຂໍ້ມູນໃສ່ມັນ
- ຕື່ມຂໍ້ມູນໃສ່ຜະລິດຕະພັນ ແລະ ໂພສຕ່າງໆຜ່ານລິ້ງ - Instagram, TikTok, Facebook.
- ໂອນຍ້າຍເນື້ອຫາຈາກເວັບໄຊເກົ່າຂອງທ່ານ - ພຽງແຕ່ລະບຸທີ່ຢູ່.
- ການອອກແບບທີ່ທັນສະໄໝໃນເຄື່ອງຈັກທີ່ດີທີ່ສຸດ: React ( Next.js) ພ້ອມດ້ວຍການສະແດງຜົນເຊີບເວີ ແລະ ການເພີ່ມປະສິດທິພາບ SEO.
- ການເພີ່ມປະສິດທິພາບ SEO ແບບອັດຕະໂນມັດຢ່າງເຕັມທີ່ສຳລັບຜົນການຄົ້ນຫາ ແລະ ຄຳແນະນຳກ່ຽວກັບເຄືອຂ່າຍປະສາດ.
ແບບທີ່ຄ້າຍຄືກັນ
- Headspace — ມຸມສຸຂະພາບທີ່ມີແດດສ່ອງໃສ່ເຈ້ຍອຸ່ນໆ
- WHOOP — ຫ້ອງທົດລອງປະສິດທິພາບໃນເວລາທ່ຽງຄືນ - ໂຕະຫ້ອງທົດລອງທາງຄລີນິກສີຂາວພາຍໃຕ້ຊ່ອງວ່າງສີດຳ, ກະແສໄຟຟ້າສີມ່ວງດຽວ
- Together AI — ຄອນໂຊນຄົ້ນຄວ້າເທິງເຈ້ຍກ້ອນ
- v0 by Vercel — ຮູບແຕ້ມຂອງເຄື່ອງກຶງ. ຄວາມແມ່ນຍຳ ແລະ ໜ້າທີ່ການໃຊ້ງານແມ່ນສຳຄັນທີ່ສຸດ, ໂດຍແຕ່ລະອົງປະກອບຮັບໃຊ້ຈຸດປະສົງທີ່ຊັດເຈນຢູ່ເທິງພື້ນຜິວທີ່ສະອາດ ແລະ ສົມບູນແບບທາງດ້ານເຕັກນິກ.
- Dovetail — ແຜນຜັງພາຍໃຕ້ດວງຈັນສີດຳ — ເສັ້ນກຣາຟທີ່ເຫັນໄດ້ຍາກ, ຕົວອັກສອນສີຂາວ, ມີແສງສີມ່ວງອັນໜຶ່ງ
- Glideapps — ໂຕະຂຽນແບບສີດຽວທີ່ມີແສງໄຟສີຟ້າອ່ອນໆອັນດຽວ
- Timescale — ຮູບແຕ້ມວິສະວະກຳເທິງເຈ້ຍກຣາຟອຸ່ນ
- UGLYCASH — ປື້ມບັນທຶກທີ່ປົກດ້ວຍສະຕິກເກີໃສ່ເຈ້ຍສີຄຣີມສະແດງເຖິງບັນຍາກາດຂອງ fintech ທີ່ກ້າຫານ ແລະ ສູງສຸດ ເຊິ່ງສະແດງຄວາມວຸ້ນວາຍຂອງມັນຢ່າງພາກພູມໃຈ.
- Sprout Social — ໜໍ່ໄມ້ສີຂຽວຢູ່ເທິງແຜ່ນຫີນສີດຳ. ຈຸດເດັ່ນທີ່ສົດໃສອັນໜຶ່ງຢູ່ເທິງຜ້າໃບສີດຽວ, ສີຂອງມັນໃຊ້ສຳລັບການກະທຳເທົ່ານັ້ນ, ພ້ອມດ້ວຍຕົວອັກສອນເລຂາຄະນິດທີ່ໜ້າເຊື່ອຖືເປັນປ້າຍຊີ້ບອກ.
- Krea — ຄັງຮູບພາບນຽຣໃນເວລາທ່ຽງຄືນ
- Evergreen — ເຮືອນແກ້ວພະລັງງານແສງຕາເວັນເທິງເຈ້ຍລີນິນ
- Factory — ສະຖານີ "ຫ້ອງສົງຄາມ" ໃນເວລາທ່ຽງຄືນ. "ໂຮງງານ" ແມ່ນແຜງຄວບຄຸມສີດຳທີ່ມືດມົວບ່ອນທີ່ບັດສີຂາວອັນດຽວຕົກລົງຄືກັບສັນຍານທີ່ມີໄຟສາຍ - ວັດຖຸດຽວໃນຫ້ອງແມ່ນຕົວຜົນງານເອງ.