Vercel
พิมพ์เทอร์มินัลลงบนกระดาษสีขาว
ระบบการออกแบบ Vercel เป็นการฝึกฝนการใช้สีโมโนโครมอย่างมีระเบียบวินัย: พื้นหลังสีขาวเกือบทั้งหมด (#fafafa), ตัวอักษรสีดำ, ขอบบาง และไม่มีสีตกแต่งใดๆ เลย ภาษาภาพนี้ชวนให้นึกถึงเทอร์มินัลของนักพัฒนาที่แสดงผลในรูปแบบสิ่งพิมพ์—แบบอักษร Geist Sans แทบจะอ่านไม่ออกในขนาด "heroic" ด้วยน้ำหนัก 400-450 และระยะห่างระหว่างตัวอักษร -0.06em ในขณะที่ Geist Mono ใช้กับป้ายกำกับ ข้อมูลเมตา และตัวอย่างโค้ดในขนาดตัวพิมพ์ใหญ่ 11-13 พิกเซล ปุ่มมีรัศมี 6 พิกเซล หรือเป็นรูปสี่เหลี่ยมผืนผ้าสีดำสนิทบนพื้นขาวหรือขาวบนพื้นดำ ระบบนี้อาศัยความแตกต่างของสีและลำดับชั้นของแบบอักษรมากกว่าสี โดยใช้สัญลักษณ์สามเหลี่ยม (▲) และโลโก้แบบสองบรรทัดเป็นองค์ประกอบการสร้างแบรนด์เพียงอย่างเดียว พื้นผิวต่างๆ ถูกวางซ้อนกันในลำดับ #fafafa → #ebebeb → #171717 สร้างความลึกผ่านการเปลี่ยนแปลงค่าโทนสีมากกว่าเงาหรือสี แต่ละองค์ประกอบถูกสร้างขึ้นบนตารางขนาด 4 พิกเซลที่มีความหนาแน่นต่ำ ส่งผลให้ได้อินเทอร์เฟซที่ชวนให้นึกถึงสมุดบันทึกของวิศวกร ซึ่งมีความแม่นยำ ใช้งานได้จริง และไม่กลัวพื้นที่ว่าง
คอนเทนเนอร์มีความกว้าง 1280 พิกเซล จัดวางอยู่ตรงกลาง และมีระยะห่างแนวนอนที่เหมาะสม (24-48 พิกเซล) บล็อกหลักใช้การจัดวางแบบสามโซนที่ไม่สมมาตร: หัวข้อขนาดใหญ่ทางด้านซ้าย สัญลักษณ์แบรนด์อยู่ตรงกลาง และบล็อก "คิ้ว" ทางด้านขวา ด้านล่างบล็อกหลัก เนื้อหาจะจัดเรียงเป็นแถบสลับกัน: แถบเต็มความกว้างที่มีโลโก้ของลูกค้า ตามด้วยส่วน "ผู้สร้างเอเจนต์" สองคอลัมน์ โดยมีหัวข้ออยู่ทางด้านซ้ายและเค้าโครงผลิตภัณฑ์อยู่ทางด้านขวา ตามด้วยตารางการ์ดสามใบที่มีคุณสมบัติ ส่วนต่างๆ ถูกคั่นด้วยช่องว่างแนวตั้งขนาด 96-128 พิกเซล โดยไม่มีตัวแบ่งหรือการชดเชยพื้นหลัง การนำทางเป็นแผงคงที่ขนาด 64 พิกเซลเดียวที่มีพื้นหลังเบลอ ตารางการ์ดใช้เค้าโครงสองหรือสามคอลัมน์อย่างสม่ำเสมอ โดยมีช่องว่าง 16-24 พิกเซล ความหนาแน่นโดยรวมกระชับ - ข้อความอ่านง่าย มีพื้นที่ว่างเพียงพอ แต่ขนาดตัวอักษรและขนาดส่วนประกอบทำให้หน้าเว็บไม่ดูโปร่งโล่งเกินไป
ภาพที่ใช้มีจำนวนน้อยและเน้นการใช้งานเป็นหลัก องค์ประกอบภาพหลักคือรูปสามเหลี่ยมสีดำ (▲) ซึ่งเป็นสัญลักษณ์แบรนด์รูปทรงเรขาคณิตที่ปรากฏเป็นเงาลอยอยู่เหนือภาพในขนาดตัวพิมพ์ใหญ่ โลโก้ของลูกค้าบนแถบแสดงแนวคิดใช้คำที่เป็นตัวหนังสือจริงของแต่ละแบรนด์ในโทนสีเทา แบบจำลองผลิตภัณฑ์ (อินเทอร์เฟซแชทของ Notion, เอาต์พุตเทอร์มินัล CLI, บัตรประจำตัวประชาชน) ถูกฝังไว้เป็นภาพหน้าจอในโหมดสว่างภายในกรอบการ์ด ไม่มีรูปถ่าย ภาพประกอบ หรือองค์ประกอบ 3 มิติ ระบบนี้เป็นเพียงตัวอักษรและรูปทรงเรขาคณิตบนกระดาษสีขาวเท่านั้น
จานสี
เป็นกลาง
- Obsidian
#171717— หัวข้อหลัก เส้นขอบการนำทาง การเติมสีปุ่มสีเข้ม และเครื่องหมายรายการ ล้วนมีสีดำเกือบทั้งหมด เพื่อหลีกเลี่ยงความแข็งกระด้างและความอิ่มตัวของสีที่ฉูดฉาด - Paper White
#fafafa— พื้นหลังของหน้าเว็บ พื้นผิวของการ์ด แสงสว่างที่ส่องไปยังปุ่มต่างๆ เหล่านี้คือพื้นหลังมาตรฐานที่ทุกสิ่งทุกอย่างตั้งอยู่ - Pure White
#ffffff— พื้นผิวการ์ดนูน, แผ่นแทรก, ช่องป้อนข้อมูล - Hairline
#ebebeb— ขอบขนาด 1 พิกเซลบนปุ่ม ลิงก์ และการ์ดจะมองเห็นได้เมื่อซูมเข้าในระดับสูง แต่จะมองไม่เห็นเมื่อซูมออกในระดับต่ำ - Ash
#c9c9c9— ข้อความถูกปิดใช้งาน ป้ายกำกับถูกปิดเสียง ลายน้ำชื่อแบรนด์ในโลโก้ของลูกค้า - Smoke
#a8a8a8— ข้อความเสริม, ข้อความตัวอย่าง, การเติมสีไอคอนแบบเรียบง่าย
การจัดพิมพ์
จาก 11 เป็น 64 พิกเซล · 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 — สมุดโน้ตที่เต็มไปด้วยสติ๊กเกอร์บนกระดาษสีครีม สะท้อนบรรยากาศของบริษัทฟินเทคที่โดดเด่นและสุดโต่ง ซึ่งแสดงออกถึงความวุ่นวายอย่างภาคภูมิใจ
- Sprout Social — หน่ออ่อนสีเขียวบนพื้นหินชนวนสีดำ จุดเด่นสดใสเพียงจุดเดียวบนผืนผ้าใบสีเดียวที่เรียบง่าย ซึ่งใช้สีเฉพาะในส่วนที่แสดงถึงการกระทำเท่านั้น โดยมีตัวอักษรเรขาคณิตที่ดูมั่นใจทำหน้าที่เป็นเหมือนป้ายบอกทาง
- Krea — แกลเลอรีนัวร์ตอนเที่ยงคืน
- Evergreen — เรือนกระจกพลังงานแสงอาทิตย์บนกระดาษลินิน
- Factory — เครื่องเทอร์มินัลใน "ห้องบัญชาการ" ตอนเที่ยงคืน "โรงงาน" คือแผงควบคุมสีดำสนิทที่มีการ์ดสีขาวใบเดียววางลงราวกับคำสั่งที่ส่องด้วยไฟฉาย สิ่งเดียวที่มีอยู่ในห้องนั้นคืองานนั่นเอง