ระบบดีไซน์ SaaS
ระบบดีไซน์ที่ดึงจากเว็บไซต์ซอฟต์แวร์และ SaaS เช่น แอปเพิ่มประสิทธิภาพการทำงาน เครื่องมือจัดการโปรเจกต์ CRM และผลิตภัณฑ์อื่น ๆ ที่ขายแบบบริการ ส่วนใหญ่ใช้พาเลตต์สีที่เรียบง่ายคู่กับสีเน้นหนึ่งสี และสเกลตัวอักษรที่ชัดเจน จึงเหมาะเป็นจุดเริ่มต้นสำหรับแดชบอร์ดหรือหน้าการตลาดของผลิตภัณฑ์
ตัวอย่าง DESIGN.md 3 รายการ ในหมวดหมู่นี้ จาก Figma, Linear และ Notion ดึงจากหน้าสาธารณะของแต่ละเว็บไซต์ ไม่ใช่แนวทางแบรนด์อย่างเป็นทางการ เพิ่งรู้จักรูปแบบนี้ใช่ไหม อ่านว่า DESIGN.md คืออะไร
Figma
Figma ใช้ระบบสีขาวดำแบบโมโนโครมที่เรียบจัด โดยมีฟอนต์ตัวแปรเฉพาะของตัวเองคือ figmaSans เป็นหลัก การออกแบบขับเคลื่อนด้วยงานตัวอักษรเป็นสำคัญ หัวข้อขนาดใหญ่ที่ 88px/56px ใช้ letter-spacing ติดลบแบบแน่น ตัดกับเนื้อหาเนื้อความที่ใช้น้ำหนักบาง 330 ปุ่มเรียกร้องให้กระทำ (CTA) ใช้รูปทรงแคปซูลโค้งเต็ม (border-radius: 9999px) พื้นดำทึบพร้อมตัวอักษรสีขาว โครงหน้าอิงตารางกริดกว้างสูงสุด 1440px มีระยะเว้นแนวตั้งของแต่ละส่วนที่ 80px และพื้นผิวหลักเป็นสีขาวสะอาด ความลึกมีน้อยมาก เงาเป็นชั้นจางๆ ที่คำนวณจาก oklch โทนลาเวนเดอร์/ม่วงที่ใช้เป็นสีเน้น #cb9fd2 ปรากฏในแบนเนอร์ส่วนท้ายของเว็บไซต์ โดยรวมบุคลิกของงานดูมั่นใจ มีความประณีตทางการจัดตัวอักษร และให้ความสำคัญกับแบรนด์เป็นอันดับแรก
Linear
Design ของ Linear เป็นระบบที่เน้นโหมดมืดเป็นหลัก เป็นอินเทอร์เฟซผลิตภัณฑ์ที่มีความหนาแน่นของข้อมูลสูง ออกแบบมาสำหรับทีมวิศวกร ชุดสีพื้นผิวอิงกับสีดำเกือบสนิท (#08090a, #0f1011) พร้อมเฉดสีเทาเข้มที่ซ้อนกันเป็นชั้นเพื่อแยกแถบข้าง การ์ด และแผงต่าง ๆ การจัดตัวอักษรใช้ Inter Variable เพียงอย่างเดียว โดยปรับระยะห่างตัวอักษรให้แคบลงอย่างแม่นยำในขนาดตัวอักษรใหญ่ และใช้ Berkeley Mono สำหรับโค้ดแบบอินไลน์ ภาษาของการขอบมุมถูกกำหนดให้เล็กโดยตั้งใจ ส่วนใหญ่อยู่ที่ 2–6px ขณะที่รูปทรงแคปซูลสงวนไว้สำหรับป้ายกำกับและชิปสถานะ การยกระดับของวัตถุแสดงผ่านเส้นขอบ inset 1px ที่แผ่วเบาและเงาตกกระทบความทึบต่ำ มากกว่าการซ้อนชั้นที่โดดเด่น สีปุ่มเรียกให้ดำเนินการหลักคือสีคราม #5e6ad2 ซึ่งเป็นเอกลักษณ์ของ Linear ใช้กับปุ่ม Sign Up และลิงก์สำคัญ
Notion
Notion หน้าแรกของหน้าการตลาดใช้ส่วนฮีโร่สีน้ำเงินเข้มโทนลึก (#02093a) คู่กับเนื้อหาส่วนอื่นพื้นสว่าง (#f6f5f4) โดยใช้ฟอนต์เฉพาะ NotionInter กับข้อความทุกระดับ ดีไซน์ใช้กริดสิบสองคอลัมน์ที่มีร่อง 28px และระบบมุมโค้งสองแบบ คือ 8px สำหรับการ์ด และ 9999px สำหรับปุ่มทรงแคปซูล สำหรับองค์ประกอบลอยตัวใช้ระบบเงาหลายชั้นที่เข้มขึ้นตามลำดับ ปุ่มเรียกการกระทำและจุดเน้นสำคัญใช้สีน้ำเงินของแบรนด์ (#2537b1) ส่วนลำดับความสำคัญของข้อความและพื้นผิวทั้งหมดจัดโครงสร้างด้วยชุดสีเทาตามความหมาย ตั้งแต่ gray-200 ถึง gray-900
ไม่เจอเว็บไซต์ที่ต้องการใช่ไหม
วาง URL เพื่อดึง DESIGN.md จากเว็บไซต์ใดก็ได้ ได้ทั้งสี ตัวอักษร ระยะห่าง และโทเค็น พร้อมใช้กับเวิร์กโฟลว์ AI ของคุณ