ตัวอย่าง DESIGN.md
ไฟล์ DESIGN.md จริงที่ดึงจากเว็บไซต์สาธารณะ แต่ละไฟล์เก็บสี ตัวอักษร ระยะห่าง และคอมโพเนนต์ของเว็บไซต์ไว้ในรูปแบบที่เอเจนต์เขียนโค้ด AI อ่านได้ เปิดการ์ดเพื่อดูตัวอย่าง แล้วคัดลอกไปไว้ใน repo ของคุณ
ดึงจากหน้าสาธารณะของแต่ละเว็บไซต์ ไม่ใช่แนวทางแบรนด์อย่างเป็นทางการ เพิ่งรู้จักรูปแบบนี้ใช่ไหม อ่านว่า DESIGN.md คืออะไร
Airbnb
Airbnb ใช้ระบบการออกแบบที่ตั้งอยู่บนฟอนต์แบบ variable ตัวเดียวที่เป็นกรรมสิทธิ์ (Airbnb Cereal VF) และชุดสีกลางเกือบเป็นขาวดำ โดยมีสีถ่านเข้ม (#222222) และสีเทาอ่อนเป็นหลัก ส่วนสีชมพูปะการัง "Rausch" (#ff385c) ซึ่งเป็นเอกลักษณ์ของแบรนด์ ถูกสงวนไว้เฉพาะสำหรับปุ่มเรียกร้องการกระทำหลัก (CTA) และโลโก้เท่านั้น เลย์เอาต์เป็นกริดการ์ดภาพที่ปรับตามขนาดหน้าจอ มีสัดส่วนพื้นที่ภาพต่อข้อความที่กว้างขวาง การ์ดมีมุมโค้งมน 20px ที่นุ่มนวล และระบบเงาแบบหลายชั้นที่ช่วยสร้างความลึกอย่างละมุน โดยไม่มีความตัดกันที่แข็งกระด้าง แถบค้นหาเป็นกล่องรูปแคปซูลที่เด่นชัด ทำหน้าที่รวมการกระทำหลักของผู้ใช้เข้าด้วยกัน
Anthropic
Design system ของ Anthropic เป็นอัตลักษณ์ที่เรียบง่ายและเน้นงานตัวอักษรเป็นหลัก โดยอาศัยฟอนต์ที่ออกแบบเองสองแบบคือ Anthropic Serif และ Anthropic Sans วางบนพื้นหลังสีงาช้างอุ่น (#faf9f5) โทนสีถูกจำกัดอย่างตั้งใจ ใช้สีดำเกือบสนิท (#141413) บนพื้นขาวนวลอุ่น และใช้โทนหินสีเทาอ่อนที่ลดความเข้มลงสำหรับข้อความรองและเส้นขอบ ตัวอักษรดิสเพลย์ขนาดใหญ่แบบ serif ทำหน้าที่เป็นหลักของน้ำเสียงแบบบทความ ขณะที่ส่วนแผงสีเข้ม (พื้นหลังสีดำเกือบสนิทพร้อมข้อความสีงาช้าง) สร้างความตัดกันที่โดดเด่น โดยรวมแล้วสไตล์นี้สื่อถึงความจริงจังทางปัญญาและพันธกิจที่ให้ความปลอดภัยเป็นอันดับแรก ผ่านพื้นที่ว่างที่เพียงพอ ความต่างของตัวอักษรที่สูง และการไม่มีลวดลายตกแต่งใดๆ
Apple
Design tokens ที่ดึงมาจากการวิเคราะห์ความถี่ของ CSSOM โดยไม่ผ่านการตีความของ LLM
Dribbble
ระบบการออกแบบของ Dribbble สร้างจากโทนกรมท่าเข้มเกือบดำ #0d0c22 คู่กับพื้นผิวสีขาวที่คมชัด และมีสีเน้นสีชมพูร้อน #ea4c89 ซึ่งเป็นเอกลักษณ์ใช้อย่างประหยัดเพื่อเน้นเนื้อหาเชิงบรรณาธิการและจุดเด่นของส่วนที่โต้ตอบได้ ระบบตัวอักษรทั้งหมดใช้ฟอนต์ Mona Sans เพียงตระกูลเดียวในทุกน้ำหนัก โดยสร้างลำดับชั้นจากน้ำหนักและขนาดเท่านั้น ภาษาเชิงรูปทรงกำหนดด้วยปุ่มทรงแคปซูล (border-radius: 1e+07px) และการ์ตมุมโค้ง (รัศมี 12px) เลย์เอาต์โปร่งโล่งบนกริดพื้นฐาน 8px และความลึกของชั้นถูกสื่อผ่านเงาเบา ๆ มากกว่าการซ้อนทับชั้นที่หนักหน่วง
Duolingo - The world’s most popular way to learn
Design tokens ที่สกัดจากการวิเคราะห์ความถี่ของ CSSOM โดยไม่ผ่านการตีความของ LLM
Figma
Figma ใช้ระบบสีขาวดำแบบโมโนโครมที่เรียบจัด โดยมีฟอนต์ตัวแปรเฉพาะของตัวเองคือ figmaSans เป็นหลัก การออกแบบขับเคลื่อนด้วยงานตัวอักษรเป็นสำคัญ หัวข้อขนาดใหญ่ที่ 88px/56px ใช้ letter-spacing ติดลบแบบแน่น ตัดกับเนื้อหาเนื้อความที่ใช้น้ำหนักบาง 330 ปุ่มเรียกร้องให้กระทำ (CTA) ใช้รูปทรงแคปซูลโค้งเต็ม (border-radius: 9999px) พื้นดำทึบพร้อมตัวอักษรสีขาว โครงหน้าอิงตารางกริดกว้างสูงสุด 1440px มีระยะเว้นแนวตั้งของแต่ละส่วนที่ 80px และพื้นผิวหลักเป็นสีขาวสะอาด ความลึกมีน้อยมาก เงาเป็นชั้นจางๆ ที่คำนวณจาก oklch โทนลาเวนเดอร์/ม่วงที่ใช้เป็นสีเน้น #cb9fd2 ปรากฏในแบนเนอร์ส่วนท้ายของเว็บไซต์ โดยรวมบุคลิกของงานดูมั่นใจ มีความประณีตทางการจัดตัวอักษร และให้ความสำคัญกับแบรนด์เป็นอันดับแรก
Harvey
Design system ของ Harvey สร้างขึ้นจากอัตลักษณ์ตัวอักษรสองแบบที่ออกแบบเฉพาะ ได้แก่ HarveySerifFont สำหรับความน่าเชื่อถือเชิงบรรณาธิการ และ HarveySansFont สำหรับความชัดเจนเชิงใช้งาน ตัดกับแถบนำทางสีดำอมน้ำตาลอุ่น (#0f0e0d) และพื้นผิวเนื้อหาสีงาช้างอ่อน (#fafaf9) ชุดสีถูกออกแบบให้เป็นโทนเดียวโดยเจตนา ใช้สเกลสีเทาอุ่นที่ไล่ระดับจาก gray-50 ถึง gray-950 โดยไม่มีสีเน้น เพื่อสื่อถึงความไว้วางใจและความยับยั้งชั่งใจที่เหมาะกับงานกฎหมายที่มีความเสี่ยงสูง ระดับความลอยตัวของชั้นต่าง ๆ ถูกแสดงด้วยความต่างของพื้นผิว ไม่ใช้เงา หัวข้อหลักของ hero ใช้ตัวอักษรเซริฟขนาดใหญ่ 72px เพื่อสร้างความน่าเชื่อถือทางตัวอักษรในทันที ส่วนเนื้อความและองค์ประกอบ UI ใช้ตัวอักษรซานส์แบบกำหนดเอง ระยะห่างยึดตามกริด 8px พื้นฐาน พร้อมโทเคนขนาดที่มีชื่อ ได้แก่ xs, sm, md, xl และ 2xl
IKEA
IKEA ใช้ระบบออกแบบแบบแบนและกล้าหาญบนหน้าแรกระดับโลก โดยมีสีเหลือง IKEA (#ffdb00) เป็นพื้นผิวหลักสำหรับการดำเนินการ และใช้สีน้ำเงิน IKEA (#0058a3) เป็นจุดเน้นของโลโก้แบรนด์ ระบบตัวอักษรทั้งหมดสร้างจากแบบอักษรเฉพาะเพียงหนึ่งแบบคือ Noto IKEA ซึ่งใช้น้ำหนัก 400 และ 700 ตามสเกลที่กำหนดอย่างชัดเจน ตั้งแต่ข้อความเนื้อหาขนาด 14px ไปจนถึงหัวข้อแสดงผลขนาด 51px การยกระดับองค์ประกอบอาศัยความต่างของสีและโครงสร้างเลย์เอาต์เท่านั้น ไม่ใช้เงา เลย์เอาต์ใช้คอนเทนเนอร์ความกว้างสูงสุด 90rem และช่องว่างกริดบนเดสก์ท็อป 1.5rem พร้อมโทเคนรัศมีมุม 8px ที่ใช้อย่างสม่ำเสมอกับองค์ประกอบที่โต้ตอบได้ พื้นหลังสีขาวนวล (#fffefb) ช่วยให้ดูอบอุ่นเมื่อตัดกับข้อความสี #111111 ที่เข้มจัด ทำให้การอ่านมีคอนทราสต์สูงและเข้าถึงได้ง่าย
Klarna
Klarna ใช้โทนสีหลักเป็นน้ำเงินเข้มอมม่วงที่ดูหรูหรา (#0b051d) ควบคู่กับสีเน้นสดใส โดยมีชมพูประจำแบรนด์ (#ffa8cd) เป็นสีหลัก ระบบนี้ใช้ฟอนต์เฉพาะของ Klarna ร่วมกับฟอนต์ของระบบปฏิบัติการ เน้นมุมโค้งมน โดยค่า 32px เป็นค่าที่พบบ่อยที่สุด และคงความคมชัดสูงเพื่อการเข้าถึงที่ดี การออกแบบให้ความรู้สึกทั้งมืออาชีพและเป็นมิตร ผ่านระยะห่างที่โปร่ง และลำดับชั้นของตัวอักษรที่ชัดเจน
Linear
Design ของ Linear เป็นระบบที่เน้นโหมดมืดเป็นหลัก เป็นอินเทอร์เฟซผลิตภัณฑ์ที่มีความหนาแน่นของข้อมูลสูง ออกแบบมาสำหรับทีมวิศวกร ชุดสีพื้นผิวอิงกับสีดำเกือบสนิท (#08090a, #0f1011) พร้อมเฉดสีเทาเข้มที่ซ้อนกันเป็นชั้นเพื่อแยกแถบข้าง การ์ด และแผงต่าง ๆ การจัดตัวอักษรใช้ Inter Variable เพียงอย่างเดียว โดยปรับระยะห่างตัวอักษรให้แคบลงอย่างแม่นยำในขนาดตัวอักษรใหญ่ และใช้ Berkeley Mono สำหรับโค้ดแบบอินไลน์ ภาษาของการขอบมุมถูกกำหนดให้เล็กโดยตั้งใจ ส่วนใหญ่อยู่ที่ 2–6px ขณะที่รูปทรงแคปซูลสงวนไว้สำหรับป้ายกำกับและชิปสถานะ การยกระดับของวัตถุแสดงผ่านเส้นขอบ inset 1px ที่แผ่วเบาและเงาตกกระทบความทึบต่ำ มากกว่าการซ้อนชั้นที่โดดเด่น สีปุ่มเรียกให้ดำเนินการหลักคือสีคราม #5e6ad2 ซึ่งเป็นเอกลักษณ์ของ Linear ใช้กับปุ่ม Sign Up และลิงก์สำคัญ
Magentix Studio
Magentix Studio สวมใส่สไตล์เอดิทอเรียลและหอศิลป์ให้กับสตูดิโอผลิตภัณฑ์ที่เน้น AI เป็นหลัก
Neon
Design system ของ Neon เป็นแบรนด์สำหรับนักพัฒนาที่ออกแบบแบบ dark-first โดยใช้พื้นหลังเกือบดำ (#000000, #18191b) เป็นฐาน พร้อมสีหลักเขียวนีออนสดอย่าง #00e599 และสีเขียวกลาง #34d59a เป็นสีเสริม ระบบตัวอักษรจับคู่ Inter สำหรับ UI และเนื้อหา กับ GeistMono สำหรับโค้ดและข้อมูล ทั้งสองแบบใช้ letter-spacing ติดลบเล็กน้อย ระยะห่างยึดตามกริด 4px ส่วนมุมโค้ง (border radius) ใช้ค่าเดียวกันทั้งระบบคือ 4px ซึ่งค่อนข้างเรียบ การสร้างระดับความลอยตัวอาศัยความคมของเส้นขอบมากกว่าเงา โดยใช้ drop-shadow แบบ ambient เพียงชั้นเดียวและใช้อย่างประหยัด ส่วน hero ใช้พื้นหลังการแสดงภาพข้อมูลแบบเคลื่อนไหวเต็มความกว้าง ซึ่งตอกย้ำอัตลักษณ์ของแบรนด์ด้านฐานข้อมูลและโครงสร้างพื้นฐาน
Notion
Notion หน้าแรกของหน้าการตลาดใช้ส่วนฮีโร่สีน้ำเงินเข้มโทนลึก (#02093a) คู่กับเนื้อหาส่วนอื่นพื้นสว่าง (#f6f5f4) โดยใช้ฟอนต์เฉพาะ NotionInter กับข้อความทุกระดับ ดีไซน์ใช้กริดสิบสองคอลัมน์ที่มีร่อง 28px และระบบมุมโค้งสองแบบ คือ 8px สำหรับการ์ด และ 9999px สำหรับปุ่มทรงแคปซูล สำหรับองค์ประกอบลอยตัวใช้ระบบเงาหลายชั้นที่เข้มขึ้นตามลำดับ ปุ่มเรียกการกระทำและจุดเน้นสำคัญใช้สีน้ำเงินของแบรนด์ (#2537b1) ส่วนลำดับความสำคัญของข้อความและพื้นผิวทั้งหมดจัดโครงสร้างด้วยชุดสีเทาตามความหมาย ตั้งแต่ gray-200 ถึง gray-900
Paperclip
Paperclip คือแพลตฟอร์มจัดการ AI agent ที่มีดีไซน์แบบ dark-canvas ที่โดดเด่น โดยมีพื้นหลังสีดำเกือบสนิท (#0a0a0a) และข้อความหลักสีขาว (#ffffff) เป็นจุดยึดหลัก ส่วน hero โดดเด่นด้วยภาพประกอบไล่สีหลายโทนที่เรียงซ้อนกันเป็นรูปแคปซูลทรงเม็ดยา ได้แก่ สีม่วงแดง ม่วง เขียวมรกต ส้ม และเหลือง ซึ่งสร้างอัตลักษณ์ที่มีสีสันและพลังงานสูงบนพื้นมืด ด้านการใช้ตัวอักษรผสมผสาน Inter Tight ที่เป็นหัวข้อตัวหนาแบบอัดแคบพร้อมระยะห่างตัวอักษรติดลบ เข้ากับ Inter สำหรับเนื้อหาและ UI และ JetBrains Mono สำหรับโค้ดและสถานะ ปุ่ม CTA หลักเป็นปุ่มทรงแคปซูลสีขาวบนพื้นมืด และระบบสถานะสีเขียว (#22c55e) ใช้แสดงสถานะของ agent และงานตลอดทั้งผลิตภัณฑ์ ส่วนการนำทางเรียบง่ายและแบนราบ มีเส้นขอบด้านล่างบาง ๆ
PayPal
หน้าแรก PayPal ภาษาดัตช์ใช้การออกแบบที่กล้าหาญและเน้นผู้บริโภค โดยมีส่วน hero สีฟ้าท้องฟ้าสดใส (#60cdff) เป็นจุดศูนย์กลาง พร้อมจอแสดงผลสีดำหนักมาก (PayPal Pro w900) เมนูนำทางเป็นสีขาวพร้อมข้อความสีดำและปุ่ม CTA ที่แตกต่างกันสองประเภท - "Inloggen" แบบเค้าร่าง และ "Rekening openen" แบบเติมสีดำ แบนเนอร์ประกาศสีกรมท่าเข้มนั่งอยู่ที่ด้านบน ภาษาโดยรวมมีความเปรียบต่างสูง ใช้ pill-radius อย่างหนัก และขับเคลื่อนด้วยตัวอักษรแบรนด์ ซึ่งฉายภาพความเชื่อถือได้และการเข้าถึงได้สำหรับผู้บริโภคด้านการเงินที่กว้าง
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 เฉพาะการ์ดและกล่องฮีโร่
Shopify
Shopify ใช้หน้าแรกการตลาดที่มีส่วนฮีโร่เป็นวิดีโอเต็มความกว้างอย่างโดดเด่น โดยมีพื้นหลังสีดำเกือบสนิท (#02090a) ที่ตัดกับแถบนำทางสีขาวด้านบนอย่างชัดเจน สีเน้นหลักของแบรนด์คือสีเขียวมิ้นต์สด (#36f4a4) ซึ่งใช้อย่างประหยัดสำหรับจุดเด่นและสถานะการโต้ตอบ ตัวอักษรแบ่งเป็นสองแบบ คือ NeueHaasGrotesk สำหรับหัวข้อตัวใหญ่และหัวข้อแบบบรรณาธิการ และ Inter-Variable สำหรับเนื้อหาส่วนการใช้งาน ปุ่มเรียกให้ดำเนินการใช้รูปทรงแคปซูลโค้งมนเต็มที่ (border-radius: 9999px) ภาพรวมของระบบดีไซน์นี้มั่นใจ มีคอนทราสต์สูง และมุ่งสร้างแรงบันดาลใจ ออกแบบมาเพื่อเปลี่ยนผู้เข้าชมให้เป็นผู้ขาย
Snapchat
Snapchat บนเว็บใช้ธีมสว่างที่มีคอนทราสต์สูง โดยมีสีเหลือง #FFFC00 ซึ่งเป็นสีแบรนด์อันเป็นเอกลักษณ์เป็นหลัก ร่วมกับพื้นผิวหลักสีดำเกือบสนิท #121314 และพื้นหลังหน้าเว็บสีขาวที่สะอาดตา การออกแบบจับคู่ฟอนต์ Avenir Next (หลัก) กับ Graphik (รอง) เพื่อสร้างลำดับชั้นทางตัวอักษรที่เป็นมิตรแต่มีโครงสร้างชัดเจน องค์ประกอบโต้ตอบ เช่น ปุ่ม พิลล์ และแท็ก ใช้มุมโค้งเต็มที่ (100px) ส่วนช่องกรอกข้อมูลใช้มุมโค้งเล็กน้อยที่ 5px เมนูนำทางเป็นพิลล์ลอยพร้อมเงาฟุ้งอ่อน และเนื้อหาแสดงผลผ่านการ์ดสื่อขนาดใหญ่ที่มีข้อความสีขาวซ้อนทับ ทำให้เกิดเลย์เอาต์ที่ดื่มด่ำและเน้นการแสดงตัวอย่างแอป ความหนาแน่นโดยรวมอยู่ในระดับปานกลาง มีระยะห่างที่กว้างขวางและลำดับชั้นภาพที่ชัดเจน ซึ่งเชื่อมโยงแนวทางของงานการตลาดกับแนวทางของ UI ผลิตภัณฑ์เข้าด้วยกัน
Stripe
Stripe ใช้ระบบออกแบบที่ควบคุมอย่างเข้มงวด (HDS — Stripe Design System) ซึ่งสร้างขึ้นจากฟอนต์แบบ variable "sohne-var" ที่ใช้น้ำหนักบาง (300–400) และชุดสีแบรนด์ตั้งแต่กรมท่าเข้มไปจนถึงม่วงคราม โดยมี #533afd (Stripe Indigo) เป็นสีหลัก พร้อมส่วน hero ที่เป็นพื้นหลังไล่เฉดสเปกตรัมเต็มพื้นที่ซึ่งเป็นเอกลักษณ์ของแบรนด์ คอมโพเนนต์ใช้มุมโค้งน้อย (4–6px) เงาแบนหรือเงาน้อยที่สุด และจัดวางตามกริดระยะห่างฐาน 8px โดยรวมให้น้ำเสียงที่น่าเชื่อถือแต่เข้าถึงง่าย สื่อถึงโครงสร้างพื้นฐานทางการเงินผ่านงานตัวอักษรที่มั่นใจและการใช้สีอย่างประหยัด
Supabase
Supabase ใช้ระบบดีไซน์แบบ dark-first ที่วางอยู่บนพื้นหลังสีดำเกือบสนิทลึก (oklch ~0.19) และมีสีเขียวสดใสเป็นสีเน้นของแบรนด์ (#3ecf8e / #3fcf8e) โครงหน้าจัดเป็นกริดการ์ดฟีเจอร์ที่ตอบสนองต่อขนาดจอ โดยใช้ Manrope สำหรับหัวข้อหลัก และ Inter สำหรับเนื้อหาและส่วนติดต่อผู้ใช้ ส่วนที่เป็นโค้ดและแบบอักษรขนาดเท่ากันทั้งหมดใช้ Source Code Pro ระบบสีสร้างจาก custom properties ของ oklch และตั้งชื่อตามหน้าที่ความหมาย การ์ดมีมุมโค้ง 12px พร้อมกรอบเส้นบางๆ ปุ่มมีมุมโค้ง 6–8px และความหนาแน่นของเนื้อหาอยู่ในระดับปานกลาง โดยอิงระบบระยะห่างฐาน 8px
The Onion
The Onion ระบบการออกแบบเป็นหนังสือพิมพ์เสียดสีฉบับดิจิทัล โดดเด่นด้วยพาดหัวตัวอักษรกอธิคแบบบีบอัดหนาสีดำ และสีเน้นของแบรนด์สีเขียวเข้ม #006b3a ที่ใช้กับป้ายชื่อหมวดหมู่ ป้ายกระแสนิยม และปุ่มเรียกการกระทำ ทั้งหมดวางบนพื้นหลังสีขาวและเทาอ่อนที่ดูเรียบง่าย การจัดวางอาศัยตัวอักษรเป็นเครื่องมือหลัก โดยแบบอักษร Adobe Fonts กลุ่มกอธิคบีบอัดและกึ่งบีบอัด เช่น tablet-gothic และ rocky-condensed ครองส่วนพาดหัว ส่วนเนื้อหาหลักใช้ utopia-std-caption รูปแบบโดยรวมมีข้อมูลหนาแน่น ใช้กริดการ์ดที่ชิดกัน เส้นคั่นบทความที่เป็นเส้นล่าง และมุมโค้งแทบไม่มีในองค์ประกอบโครงสร้าง การยกระดับเงามีน้อยมาก ใช้เงาบางๆ เฉพาะกับส่วนที่ซ้อนทับเท่านั้น
Uber
Uber มีภาษาการออกแบบที่ผสานความเรียบง่ายแบบมินิมอลเข้ากับภาพประกอบสีสันสดใส ทำให้แพลตฟอร์มการเดินทางดูเข้าถึงง่ายแต่ยังคงความเป็นมืออาชีพ พื้นฐานสีดำและขาวที่ชัดเจนช่วยให้อ่านง่ายและเข้าใจได้ชัดเจน ขณะที่ภาพประกอบหลักที่มีสีสันเพิ่มความอบอุ่นและการเชื่อมโยงกับผู้ใช้ ด้านการจัดวางตัวอักษรใช้ตระกูลฟอนต์ที่กำหนดเองอย่าง UberMove เพื่อให้แบรนด์สม่ำเสมอ พร้อมระยะห่างที่กว้างขวางซึ่งช่วยให้อินเทอร์เฟซโปร่งและหายใจได้ทั่วทั้งหน้า
WIRED
WIRED เป็นระบบการออกแบบแบบโมโนโครมที่มีคอนทราสต์สูงและขับเคลื่อนด้วยงานบรรณาธิการ สร้างขึ้นจากระบบตัวอักษรเฉพาะของตนเอง (Breve Text, WIRED Mono, WiredDisplay และ Apercu) พร้อมโทนสีที่แทบไม่มีสีสัน สีดำ (#000000) เป็นสีหลักด้วยจำนวน 2961 ครั้ง ใช้กับข้อความ เส้นขอบ ไอคอน และสถานะการโต้ตอบ ส่วนสีขาว (#ffffff) เป็นพื้นผิวหลัก สีเน้นถูกใช้อย่างประหยัด โดยมีเพียง #057dbc ที่ปรากฏเป็นสีน้ำเงินของแบรนด์สำหรับปุ่มเรียกให้สมัครสมาชิก โครงสร้างเลย์เอาต์ใช้กริดเรื่องราวหลายคอลัมน์ที่เป็นระเบียบ ระยะห่างฐาน 8px ที่กระชับ พื้นผิวแบนราบไม่มีเงาของกล่อง และมุมโค้งเล็กน้อย โดยทั่วไปอยู่ที่ 4px ตัวอักษรคือจุดเด่นหลัก เนื้อหาบทความใช้ Breve Text ขนาด 19px ป้ายชื่อส่วนใช้ WIRED Mono พิมพ์ตัวใหญ่พร้อมระยะห่างตัวอักษรกว้าง ส่วนหัวข้อขนาดใหญ่ใช้ WiredDisplay โดยรวมแล้วบุคลิกของงานดูน่าเชื่อถือ มีข้อมูลแน่น และให้ความสำคัญกับการอ่านเป็นลำดับเป็นอันดับแรก
xAI
xAI เป็นเว็บไซต์การตลาดที่ใช้พาเลตสีพื้นผิวโทนขาวนวลอุ่น โดยมี --color-ivory (#f9f8f6) และ --color-white (#ffffff) เป็นหลัก ส่วนสีตัวอักษรและสีพื้นหน้าหลักคือ #0a0a0a ซึ่งเกือบดำ ระบบตัวอักษรแบ่งเป็นสามส่วน ได้แก่ universalSansDisplay สำหรับหัวข้อขนาดใหญ่ (60–72px) ที่ระยะห่างตัวอักษรแคบติดลบ, universalSans สำหรับเนื้อหาและส่วนติดต่อผู้ใช้ และ GeistMono สำหรับโค้ดและบริบทเทอร์มินัล ภาษาของมุมโค้งครอบงำด้วยรูปทรงแคปซูล 9999px ในปุ่มเรียกการกระทำและแท็ก ส่วนการ์ดและช่องกรอกข้อมูลใช้ 12px และ 6px ตามลำดับ การยกระดับพื้นผิวมีน้อยมาก การ์ดใช้เงาซ้อนหลายชั้นที่นุ่มนวล ส่วนพื้นผิวอื่นส่วนใหญ่แบนราบ โดยรวมแล้วโทนเป็นแบบเทคนิคระดับพรีเมียม ใช้สีอย่างสงบ มีพื้นที่ว่างกว้างขวาง และสุนทรียภาพของโค้ดแบบโมโนสเปซที่เข้มชัดเพื่อสื่อถึงความน่าเชื่อถือในสายตานักพัฒนา
ไม่เจอเว็บไซต์ที่ต้องการใช่ไหม
วาง URL เพื่อดึง DESIGN.md จากเว็บไซต์ใดก็ได้ ได้ทั้งสี ตัวอักษร ระยะห่าง และโทเค็น พร้อมใช้กับเวิร์กโฟลว์ AI ของคุณ