Cursor
ห้องทำงานเขียนบนกระดาษหนังที่อบอุ่น สว่างไสวด้วยแสงจากถ่านที่กำลังคุอยู่
Cursor ใช้รูปแบบตัวอักษรที่อบอุ่นและเหมือนกระดาษปาร์ชเมนต์: พื้นหลังสีครีม ตัวอักษรสีดำเข้ม และเน้นสีส้มสดใสเพียงจุดเดียวที่ใช้สำหรับเปิดใช้งานลิงก์และการเลือก แทนที่จะใช้เติมสีให้กับปุ่ม หัวข้อต่างๆ ใช้แบบอักษร CursorGothic ที่ความหนา 400 โดยมีระยะห่างระหว่างตัวอักษรลดลงเรื่อยๆ เมื่อขนาดตัวอักษรใหญ่ขึ้น—ความน่าเชื่อถือเกิดขึ้นจากการควบคุมและการใช้ตัวอักษรที่บางมากกว่าความหนา พื้นผิวเรียบและเหมือนกระดาษ มีขอบบางๆ และเงาสีเทาอ่อนๆ ที่อบอุ่น มุมยังคงคมชัดด้วยความหนา 4 พิกเซลตลอดทั้งข้อความ EB Garamond ถูกใช้เฉพาะสำหรับหัวข้อย่อยและข้อความทั่วไป ในขณะที่ berkeleyMono ใช้สำหรับโค้ด แท็ก และเมตาเดตา ทำให้ระบบมีบุคลิกทางด้านการพิมพ์ที่ให้ความรู้สึกเหมือนนิตยสารวรรณกรรมมากกว่าแดชบอร์ด SaaS
ความกว้างสูงสุด: 1300 พิกเซล จัดกึ่งกลาง ระยะขอบ 24 พิกเซล แถบนำทางด้านบน: ส่วนหัวโปร่งใสสูง 52 พิกเซล พร้อมโลโก้และเครื่องหมายข้อความทางด้านซ้าย ลิงก์นำทาง 4 ลิงก์จัดกึ่งกลาง กลุ่ม "เข้าสู่ระบบ / ติดต่อ / ดาวน์โหลด" จัดชิดขวา ส่วนหัวหลัก: ส่วนหัวจัดชิดซ้าย + บล็อกคำกระตุ้นการตัดสินใจสองบล็อกพร้อมข้อความที่ลากจากด้านบนซ้าย จากนั้นเป็นภาพจำลองผลิตภัณฑ์แบบเต็มความกว้างที่ครอบคลุมความกว้างทั้งหมดของหน้า แถบความน่าเชื่อถือ: แถวแนวนอนหนึ่งแถวประกอบด้วยโลโก้ 8 ชิ้นในแนวเดียวตามความกว้างของส่วน ส่วนแสดงคุณสมบัติจะสลับข้อความทางด้านซ้ายและภาพหน้าจอทางด้านขวาในรูปแบบสองคอลัมน์ โดยแต่ละคอลัมน์มีสัดส่วน 50/50 และมีจังหวะแนวตั้ง 64-96 พิกเซลระหว่างส่วนต่างๆ ภาพหน้าจอคุณสมบัติทั้งหมดเป็นภาพจำลองหน้าต่างที่มีสไตล์ macOS เหมือนกัน ส่วนท้าย: ตารางลิงก์สี่คอลัมน์พร้อมเครื่องหมายแบรนด์ทางด้านซ้าย ส่วนต่างๆ ถูกคั่นด้วยพื้นที่ว่างที่กว้างขวางแทนที่จะใช้ตัวแบ่ง - พื้นหลังสีครีมเองเป็นตัวแบ่ง
ภาพหน้าจอผลิตภัณฑ์เป็นจุดเด่น: ภาพจำลองหน้าต่าง macOS ขนาดใหญ่ที่แสดงการทำงานของ Cursor IDE: แท็บไฟล์ มุมมองเปรียบเทียบ แผนงานของเอเจนต์ แผงเทอร์มินัล และการผสานรวมกับ Slack/แชท ภาพจำลองหน้าต่างแต่ละภาพถูกล้อมกรอบด้วยการ์ดสี #f2f1 ที่มีความคมชัดนุ่มนวลและอบอุ่น ภาพถ่ายทิวทัศน์ที่ดูนุ่มนวล (ภูเขา/เส้นขอบฟ้าทะเลทราย) ขยายออกไปนอกส่วนหลัก เพิ่มความอบอุ่นโดยไม่แย่งความโดดเด่นจาก UI โลโก้ของลูกค้า ( Stripe, OpenAI, Linear, Datadog, NVIDIA, Figma, Ramp, Adobe) แสดงเป็นตัวอักษรขาวดำภายในไทล์ Linen รูปทรงแคปซูล ไม่มีภาพถ่ายบุคคล ภาพประกอบ หรือองค์ประกอบกราฟิกตกแต่งแบบนามธรรมใดๆ น้ำหนักภาพทั้งหมดมุ่งเน้นไปที่ UI และแบรนด์ของผลิตภัณฑ์ ไอคอนเป็นสัญลักษณ์เส้นเดียวบางๆ ที่เติมด้วยสี #7a7974 Ash ไม่ใช่สีอื่นๆ
จานสี
เป็นกลาง
- Ink
#26251e— ข้อความหลัก พื้นหลังปุ่มการทำงานหลัก ข้อความนำทาง - สีโทนอบอุ่นเกือบดำ ไม่ใช่สี #000 บริสุทธิ์ - Parchment
#f7f7f4— พื้นหลังของหน้ากระดาษ ซึ่งเป็นผืนผ้าใบหลัก เป็นสีครีมโทนอบอุ่นที่ช่วยลดความแตกต่างของแสงเงา และสร้างความรู้สึกเหมือนการพิมพ์ด้วยหมึกจริงมากกว่าการพิมพ์ดิจิทัล - Bone
#f2f1ed— พื้นผิวกระดาษแข็งและภาชนะนูนที่มีสีเข้มกว่าผืนผ้าใบหนึ่งเฉด ทำให้เกิดเอฟเฟ็กต์ "กระดาษซ้อนกระดาษ" ที่ซ้อนกันเป็นชั้นๆ โดยไม่มีขอบเขต - Linen
#e6e5e0— สีพื้นกลางอ่อนสำหรับปุ่มบนพื้นผิวสีเข้ม - Stone
#cdcdc9— เส้นขอบบางๆ เส้นแบ่ง ช่องว่างเล็กๆ – เส้นขนาด 1 พิกเซลในโทนสีอบอุ่น - Mist
#a1a19f— ข้อความเสริมระดับที่สาม คำบรรยายภาพ - อยู่ระหว่างข้อความที่ถูกปิดเสียงและข้อความรอง
การจัดพิมพ์
จาก 12 เป็น 72 พิกเซล · 6 ขั้นตอน
- CursorGothic — ทดแทน: Inter · โครงร่าง 400, 500 · แบบอักษรหลักสำหรับส่วนติดต่อผู้ใช้ หัวข้อ การนำทาง เนื้อหาหลัก และการออกแบบผลิตภัณฑ์ หัวข้อที่มีความหนา 400 พอยต์และระยะห่างระหว่างตัวอักษรที่ค่อยๆ ลดลง (-0.005em ที่ 22px → -0.03em ที่ 72px) เป็นคุณลักษณะที่โดดเด่นของแบบอักษรนี้: หัวข้อจะไม่เป็นตัวหนา ฟังก์ชันแบบอักษร ss08, ss09 และ tnum จะเปิดใช้งานตัวเลือกสไตล์และตัวเลขในตาราง
- EB Garamond — ทดแทน: Iowan Old Style · โครงร่าง 400, 500 · CursorGothic เป็นแบบอักษร serif สำหรับงานบรรณาธิการ เหมาะสำหรับหัวข้อย่อย เนื้อหาหลัก และข้อมูลในตาราง ช่วยเพิ่มกลิ่นอายวรรณกรรมให้กับส่วนติดต่อผู้ใช้
- berkeleyMono — ทดแทน: ui-monospace · โครงร่าง 400, 500 · แบบอักษร Monospace - สำหรับบล็อกโค้ด, ตัวอย่างคำสั่งบรรทัด, เมตาเดตา, เส้นทางไฟล์ และป้ายกำกับสำหรับนักพัฒนา - ภาษาทางเทคนิค
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | หนาแน่น |
| ขั้นตอนพื้นฐาน | 8px |
| รัศมีปุ่ม | 4px |
| รัศมีการ์ด | 4px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 64-96px |
| ความกว้างของหน้า | 1300px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Cursor และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Amplemarket — สถานที่ทำงานที่อาบไปด้วยแสงแดดและโปรยปรายด้วยกระดาษสีสันสดใส
- Getharvest — โต๊ะทำงานในยามเย็นแสงสีทอง – พื้นหลังสีครีมอบอุ่น โปสการ์ดสีขาวแขวนอยู่บนพื้นหลัง และเปลวไฟสีส้มสดใสเพียงดวงเดียว
- Drive Capital — โปสเตอร์การเดินทางย้อนยุคบนกระดาษสีอบอุ่น
- Wealthsimple — โกดังบุผ้าแคชเมียร์พร้อมไฟส่องสว่างแบบแกลเลอรี่
- Huddle — บัตรสินค้าคงคลังสีพาสเทลบนกระดาษสีครีม
- Fuser — ภาพถ่ายโพลารอยด์ที่กระจัดกระจายอยู่บนผนังห้องทำงานของดีไซเนอร์
- Campsite — โต๊ะทำงานของบรรณาธิการที่สว่างไสวด้วยแสงแดด - กระดาษสีครีมโทนอบอุ่นพร้อมตราประทับสีส้มหนึ่งดวง
- Redis Agency — ห้องทำงานบรรณาธิการ ซึ่งเปิดให้บริการหลังเลิกงาน เป็นสถานที่มืดสนิท ที่ซึ่งงานสร้างแบรนด์ทั้งหมดทำโดยใช้แบบอักษรมีเชิงและหัวไชเท้าสีแดงเพียงหัวเดียว
- AI Product Generation — สตูดิโอถ่ายภาพเชิงบรรณาธิการบนกระดาษสีขาว - ชื่อเรื่องเป็นหน้าปก สีส้มใช้สำหรับเน้นจุดเด่นของบทความ
- Getanchor — โทนสีดินเผาอบอุ่นบนพื้นหลังสีครีมซีดจางจากแสงแดด
- Flatfile — สมุดบันทึกข้อมูลเงียบๆ บนกระดาษปาร์ชเมนต์อุ่นๆ
- Inthememory — ภาพวาดทางสถาปัตยกรรมบนหินอ่อนสีขาว พร้อมแสงไฟอบอุ่นเพียงดวงเดียว ห้องทำงานบรรณาธิการที่เงียบสงบ หมึกสีเทอร์ควอยซ์เข้มและปุ่มควบคุมรูปทรงแคปซูลลอยอยู่เหนือพื้นผิวสีขาวสะอาดตา มีเพียงสีส้มแต้มเป็นจุดๆ เท่านั้นที่ตัดกับสีขาว