# Style Guide

## **Style Guide**

&#x20;    Style Guide คือ องค์ประกอบพื้นฐานของการออกแบบในงานของเราทั้งหมด เช่น สี, รูปแบบตัวอักษร, โลโก้, รูปแบบรูปภาพที่ใช้ภายในงาน

### **🖍** Color

&#x20;    เบื้องต้นการทำ Design System สีเป็นองค์ประกอบที่ไม่พูดถึงไม่ได้ สำหรับสีเราอาจจะแบ่ง สีหลัก (Primary color), สีรอง (Secondary color) และกำหนดวิธีการใช้สีต่าง ๆ ไม่ว่าจะเป็นน้ำหนักการใช้สีให้หนึ่งหน้า หรือสีของปุ่ม และอื่น ๆ

#### ตัวอย่าง

![](https://lh3.googleusercontent.com/RdyXYqlNXGisb82BmyaSzD4yFVXaHCQlRpXJhGedRm-wYFWxeUeXl-4V1MTgUYXMe4Ew-HikwrmgcA31u-1o2viM2nmCzX5HAltwC2_AKAiOmPd7P3kON7bIWSF4n8JzQYHzb5x8)

### **🖍 Typography**

&#x20;    การกำหนดรูปแบบ และขนาดของตัวอักษรแต่ละส่วน ในการทำ Design System เราอาจจะกำหนด font ที่ใช้สำหรับหัวเรื่องคือ font อะไร ขนาดเท่าไหร่ เป็นต้น

#### **ตัวอย่าง**

![](https://lh3.googleusercontent.com/B3V2afy1COLY2TkK3PHMD3cdkg4FgtavmPdt52TzQvhArCFn7LX5dLag7oroNGm9FwrAcZ6E_t2LtS_uN5ELTyXnu5QaTzVc2fGrQN2IpE2cyWHmU0NQYcH0ZzsGLl5fyd08-Zka)

### **🖍 Grid**

&#x20;    การนำเรื่อง grid เข้ามาใช้ในงานจะช่วยให้เราทำงานเห็นเป็นภาพเดียวกันได้ง่ายขึ้น และช่วยในการตัดสินใจได้ง่ายขึ้นอีกด้วย

#### **ตัวอย่าง**

![](https://lh3.googleusercontent.com/ZY_hMSC9TGSAWokCkDXxuNJEic-KD52CoXg0alzv-RoRkNcdBI1Tx-MzwGFlmlVocsQxQnod0DOu8BYTdEc_TB5j3onYZDK75e79wF-J1YaUOj3YFtzhFKDpW2eQSTOJBVe6kl64)

### **🖍 Artwork & Icon**

&#x20;    การกำหนดขนาด และสีที่ใช้ภายในโลโก้

#### **ตัวอย่าง**

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me05uuZ2Kw6VszdHXnU%2F-Me4pPitcIy16HoUcqS3%2F-Me4sMGk9p1S-L5P3f_x%2F%E0%B8%A0%E0%B8%B2%E0%B8%9E%E0%B8%96%E0%B9%88%E0%B8%B2%E0%B8%A2%E0%B8%AB%E0%B8%99%E0%B9%89%E0%B8%B2%E0%B8%88%E0%B8%AD%202564-07-08%20%E0%B9%80%E0%B8%A7%E0%B8%A5%E0%B8%B2%2018.29.38.png?alt=media\&token=d4bbbb00-257f-412f-8c4b-5dd95fe62c00)

### **🖍 Button**

&#x20;    เป็นการออกแบบรูปแบบต่าง ๆ ของปุ่ม

#### ต้วอย่าง

![](https://lh4.googleusercontent.com/gf_RrtLTqUmCr5h2KDO1o-FrKENitpaCAGUW1-HxCXdgiSrOdxiDbcnOM84pqdZ2pxFTYLheQmle8YjdhVTEqoshmCb0dwAwO9YOJx17DO6fotV1Rh8Wdqec63RQzV1Yx385ckoG)
