ระบบดีไซน์เครื่องมือนักพัฒนา
ระบบดีไซน์ที่ดึงจากเว็บไซต์เครื่องมือนักพัฒนาและโครงสร้างพื้นฐาน เช่น โฮสติ้ง ฐานข้อมูล API, IDE และผลิตภัณฑ์ DevOps หลายเว็บไซต์เน้นพื้นผิวสีเข้ม การเน้นด้วยฟอนต์ monospace และโค้ดบล็อกที่ออกแบบเป็นคอมโพเนนต์หลัก พร้อมตัวอักษรที่กระชับและดูเป็นเทคนิค
ตัวอย่าง DESIGN.md 3 รายการ ในหมวดหมู่นี้ จาก Neon, Railway และ Supabase ดึงจากหน้าสาธารณะของแต่ละเว็บไซต์ ไม่ใช่แนวทางแบรนด์อย่างเป็นทางการ เพิ่งรู้จักรูปแบบนี้ใช่ไหม อ่านว่า DESIGN.md คืออะไร
Neon
Design system ของ Neon เป็นแบรนด์สำหรับนักพัฒนาที่ออกแบบแบบ dark-first โดยใช้พื้นหลังเกือบดำ (#000000, #18191b) เป็นฐาน พร้อมสีหลักเขียวนีออนสดอย่าง #00e599 และสีเขียวกลาง #34d59a เป็นสีเสริม ระบบตัวอักษรจับคู่ Inter สำหรับ UI และเนื้อหา กับ GeistMono สำหรับโค้ดและข้อมูล ทั้งสองแบบใช้ letter-spacing ติดลบเล็กน้อย ระยะห่างยึดตามกริด 4px ส่วนมุมโค้ง (border radius) ใช้ค่าเดียวกันทั้งระบบคือ 4px ซึ่งค่อนข้างเรียบ การสร้างระดับความลอยตัวอาศัยความคมของเส้นขอบมากกว่าเงา โดยใช้ drop-shadow แบบ ambient เพียงชั้นเดียวและใช้อย่างประหยัด ส่วน hero ใช้พื้นหลังการแสดงภาพข้อมูลแบบเคลื่อนไหวเต็มความกว้าง ซึ่งตอกย้ำอัตลักษณ์ของแบรนด์ด้านฐานข้อมูลและโครงสร้างพื้นฐาน
Railway
Design system ของ Railway เป็น UI สำหรับแพลตฟอร์มนักพัฒนาที่ออกแบบให้ใช้โหมดมืดเป็นหลัก โดยยึดพื้นผิวสีน้ำเงินเข้มเกือบดำ (#13111c, #0b0b0f) ข้อความสีขาวนวลที่คมชัด (#f7f7f8) และสีเน้นสีม่วงที่โดดเด่น (#853bce / #553f83) ส่วนฮีโร่ใช้ฟอนต์ IBM Plex Serif เพื่อให้ดูเป็นงานเชิงบรรณาธิการ ขณะที่ Inter ใช้กับข้อความ UI ทั้งหมด และ JetBrains Mono / SF Mono ใช้กับส่วนโค้ด การยกระดับองค์ประกอบทำผ่านขอบเรืองแสงสีขาวแบบ inset (rgba(255,255,255,0.2) 1.5px inset) แทนเงาตก ทำให้ UI มีบุคลิกแบบแผงกระจก ระบบระยะห่างอิงหน่วย 4px โดยจังหวะหลัก 8/12/16/24/32 ส่วนมุมโค้งค่อนข้างแคบ โดยใช้ 4px เป็นหลัก และใช้ 8px กับ 16px เฉพาะการ์ดและกล่องฮีโร่
Supabase
Supabase ใช้ระบบดีไซน์แบบ dark-first ที่วางอยู่บนพื้นหลังสีดำเกือบสนิทลึก (oklch ~0.19) และมีสีเขียวสดใสเป็นสีเน้นของแบรนด์ (#3ecf8e / #3fcf8e) โครงหน้าจัดเป็นกริดการ์ดฟีเจอร์ที่ตอบสนองต่อขนาดจอ โดยใช้ Manrope สำหรับหัวข้อหลัก และ Inter สำหรับเนื้อหาและส่วนติดต่อผู้ใช้ ส่วนที่เป็นโค้ดและแบบอักษรขนาดเท่ากันทั้งหมดใช้ Source Code Pro ระบบสีสร้างจาก custom properties ของ oklch และตั้งชื่อตามหน้าที่ความหมาย การ์ดมีมุมโค้ง 12px พร้อมกรอบเส้นบางๆ ปุ่มมีมุมโค้ง 6–8px และความหนาแน่นของเนื้อหาอยู่ในระดับปานกลาง โดยอิงระบบระยะห่างฐาน 8px
ไม่เจอเว็บไซต์ที่ต้องการใช่ไหม
วาง URL เพื่อดึง DESIGN.md จากเว็บไซต์ใดก็ได้ ได้ทั้งสี ตัวอักษร ระยะห่าง และโทเค็น พร้อมใช้กับเวิร์กโฟลว์ AI ของคุณ