ระบบดีไซน์ AI
ระบบดีไซน์ที่ดึงจากเว็บไซต์ผลิตภัณฑ์ AI โมเดล และงานวิจัย เช่น ผู้ช่วย AI ผู้ให้บริการโมเดล และเครื่องมือ AI บางเว็บไซต์ใช้ตัวอักษรแบบบทความที่ดูสงบคู่กับพาเลตต์สีกลางโทนอุ่น บางเว็บไซต์ใช้ลุคสีเข้มแบบเทคนิคเหมือนผลิตภัณฑ์สำหรับนักพัฒนา
ตัวอย่าง DESIGN.md 4 รายการ ในหมวดหมู่นี้ จาก Anthropic, Harvey, Paperclip และ xAI ดึงจากหน้าสาธารณะของแต่ละเว็บไซต์ ไม่ใช่แนวทางแบรนด์อย่างเป็นทางการ เพิ่งรู้จักรูปแบบนี้ใช่ไหม อ่านว่า DESIGN.md คืออะไร
Anthropic
Design system ของ Anthropic เป็นอัตลักษณ์ที่เรียบง่ายและเน้นงานตัวอักษรเป็นหลัก โดยอาศัยฟอนต์ที่ออกแบบเองสองแบบคือ Anthropic Serif และ Anthropic Sans วางบนพื้นหลังสีงาช้างอุ่น (#faf9f5) โทนสีถูกจำกัดอย่างตั้งใจ ใช้สีดำเกือบสนิท (#141413) บนพื้นขาวนวลอุ่น และใช้โทนหินสีเทาอ่อนที่ลดความเข้มลงสำหรับข้อความรองและเส้นขอบ ตัวอักษรดิสเพลย์ขนาดใหญ่แบบ serif ทำหน้าที่เป็นหลักของน้ำเสียงแบบบทความ ขณะที่ส่วนแผงสีเข้ม (พื้นหลังสีดำเกือบสนิทพร้อมข้อความสีงาช้าง) สร้างความตัดกันที่โดดเด่น โดยรวมแล้วสไตล์นี้สื่อถึงความจริงจังทางปัญญาและพันธกิจที่ให้ความปลอดภัยเป็นอันดับแรก ผ่านพื้นที่ว่างที่เพียงพอ ความต่างของตัวอักษรที่สูง และการไม่มีลวดลายตกแต่งใดๆ
Harvey
Design system ของ Harvey สร้างขึ้นจากอัตลักษณ์ตัวอักษรสองแบบที่ออกแบบเฉพาะ ได้แก่ HarveySerifFont สำหรับความน่าเชื่อถือเชิงบรรณาธิการ และ HarveySansFont สำหรับความชัดเจนเชิงใช้งาน ตัดกับแถบนำทางสีดำอมน้ำตาลอุ่น (#0f0e0d) และพื้นผิวเนื้อหาสีงาช้างอ่อน (#fafaf9) ชุดสีถูกออกแบบให้เป็นโทนเดียวโดยเจตนา ใช้สเกลสีเทาอุ่นที่ไล่ระดับจาก gray-50 ถึง gray-950 โดยไม่มีสีเน้น เพื่อสื่อถึงความไว้วางใจและความยับยั้งชั่งใจที่เหมาะกับงานกฎหมายที่มีความเสี่ยงสูง ระดับความลอยตัวของชั้นต่าง ๆ ถูกแสดงด้วยความต่างของพื้นผิว ไม่ใช้เงา หัวข้อหลักของ hero ใช้ตัวอักษรเซริฟขนาดใหญ่ 72px เพื่อสร้างความน่าเชื่อถือทางตัวอักษรในทันที ส่วนเนื้อความและองค์ประกอบ UI ใช้ตัวอักษรซานส์แบบกำหนดเอง ระยะห่างยึดตามกริด 8px พื้นฐาน พร้อมโทเคนขนาดที่มีชื่อ ได้แก่ xs, sm, md, xl และ 2xl
Paperclip
Paperclip คือแพลตฟอร์มจัดการ AI agent ที่มีดีไซน์แบบ dark-canvas ที่โดดเด่น โดยมีพื้นหลังสีดำเกือบสนิท (#0a0a0a) และข้อความหลักสีขาว (#ffffff) เป็นจุดยึดหลัก ส่วน hero โดดเด่นด้วยภาพประกอบไล่สีหลายโทนที่เรียงซ้อนกันเป็นรูปแคปซูลทรงเม็ดยา ได้แก่ สีม่วงแดง ม่วง เขียวมรกต ส้ม และเหลือง ซึ่งสร้างอัตลักษณ์ที่มีสีสันและพลังงานสูงบนพื้นมืด ด้านการใช้ตัวอักษรผสมผสาน Inter Tight ที่เป็นหัวข้อตัวหนาแบบอัดแคบพร้อมระยะห่างตัวอักษรติดลบ เข้ากับ Inter สำหรับเนื้อหาและ UI และ JetBrains Mono สำหรับโค้ดและสถานะ ปุ่ม CTA หลักเป็นปุ่มทรงแคปซูลสีขาวบนพื้นมืด และระบบสถานะสีเขียว (#22c55e) ใช้แสดงสถานะของ agent และงานตลอดทั้งผลิตภัณฑ์ ส่วนการนำทางเรียบง่ายและแบนราบ มีเส้นขอบด้านล่างบาง ๆ
xAI
xAI เป็นเว็บไซต์การตลาดที่ใช้พาเลตสีพื้นผิวโทนขาวนวลอุ่น โดยมี --color-ivory (#f9f8f6) และ --color-white (#ffffff) เป็นหลัก ส่วนสีตัวอักษรและสีพื้นหน้าหลักคือ #0a0a0a ซึ่งเกือบดำ ระบบตัวอักษรแบ่งเป็นสามส่วน ได้แก่ universalSansDisplay สำหรับหัวข้อขนาดใหญ่ (60–72px) ที่ระยะห่างตัวอักษรแคบติดลบ, universalSans สำหรับเนื้อหาและส่วนติดต่อผู้ใช้ และ GeistMono สำหรับโค้ดและบริบทเทอร์มินัล ภาษาของมุมโค้งครอบงำด้วยรูปทรงแคปซูล 9999px ในปุ่มเรียกการกระทำและแท็ก ส่วนการ์ดและช่องกรอกข้อมูลใช้ 12px และ 6px ตามลำดับ การยกระดับพื้นผิวมีน้อยมาก การ์ดใช้เงาซ้อนหลายชั้นที่นุ่มนวล ส่วนพื้นผิวอื่นส่วนใหญ่แบนราบ โดยรวมแล้วโทนเป็นแบบเทคนิคระดับพรีเมียม ใช้สีอย่างสงบ มีพื้นที่ว่างกว้างขวาง และสุนทรียภาพของโค้ดแบบโมโนสเปซที่เข้มชัดเพื่อสื่อถึงความน่าเชื่อถือในสายตานักพัฒนา
ไม่เจอเว็บไซต์ที่ต้องการใช่ไหม
วาง URL เพื่อดึง DESIGN.md จากเว็บไซต์ใดก็ได้ ได้ทั้งสี ตัวอักษร ระยะห่าง และโทเค็น พร้อมใช้กับเวิร์กโฟลว์ AI ของคุณ