Updated 2 hours ago
Design System Release
Core tokens have been updated across all surfaces.
Secondary context and supporting details.
12 min read
·
By design team
คู่มือสไตล์
สีแบรนด์หลักและรอง คลิกที่สีเพื่อคัดลอกค่า HEX
การไล่สีแบบเส้นตรงที่ใช้กับพื้นผิวต่างๆ
from-primary-50
via-primary-0 via-60%
to-secondary-50
from-primary-50
to-white
from-secondary-50
to-white
from-primary-200
via-primary-50 via-60%
to-secondary-100
Primary Background
Gradient
สีที่ใช้สำหรับข้อความและไอคอน
text-fg-strong — Strong heading
text-fg — Default body text
text-fg-muted — Secondary / muted text
text-fg-subtle — Metadata / helper text
text-fg-disabled — Disabled text
text-fg-primary — Brand accent
text-fg-primary — Brand accent
text-fg-success
text-fg-warning
text-fg-danger
text-fg-info
text-fg-inverse-strong
text-fg-inverse
text-fg-inverse-muted
text-fg-inverse-subtle
text-fg-inverse-disabled
ตัวอย่างการประกอบข้อความในการ์ดเนื้อหา
Core tokens have been updated across all surfaces.
Secondary context and supporting details.
Core tokens have been updated across all surfaces.
Secondary context and supporting details.
สไตล์พื้นผิวและคอนเทนเนอร์ทั่วไป
bg-surface / shadow-card
bg-surface
from-primary-50 to-white
>bg-surface
bg-surface-subtle / shadow-card
bg-surface-subtle
from-primary-50 to-white
from-secondary-50 to-white (to-br)
สไตล์พื้นผิวและคอนเทนเนอร์ทั่วไป
bg-surface / shadow-card
bg-surface
from-primary-50 to-white
>bg-surface
bg-surface-subtle / shadow-card
bg-surface-subtle
from-primary-50 to-white
from-secondary-50 to-white (to-br)
คอนเทนเนอร์ที่วางบนพื้นหลังแบบไล่สี
bg-surface / shadow-card
bg-surface
from-primary-50 to-white
>bg-surface
bg-surface-subtle / shadow-card
bg-surface-subtle
from-primary-50 to-white
from-secondary-50 to-white (to-br)
Surface tokens with translucency and backdrop blur.
Elevated glass surface for primary content.
Lightweight glass surface with minimal emphasis.
Elevated muted surface for secondary content.
Muted surface for supporting information.
Elevated subtle surface for low-emphasis content.
Subtle surface for background groupings.
Frosted gradient surface with primary accents.
Frosted gradient surface with secondary accents.
สีสำหรับสถานะและการตอบกลับ
Success
bg-surface-success
Warning
bg-surface-warning
Danger
bg-surface-danger
Info
bg-surface-info
ความโค้งของขอบจากเหลี่ยมไปจนถึงกลม
ปุ่มแบบทึบ กระจก แคปซูล โปร่งใส และขนาดต่างๆ
ขนาดของหัวข้อและเนื้อหา
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
ระยะห่างมาตรฐานสำหรับเค้าโครงและคอมโพเนนต์
การ์ดเนื้อหาแบบต่างๆ ที่มีการใช้ระยะห่างและขนาดตัวอักษร
Oct 12, 10:00 AM - 11:00 AM
นักออกแบบ
john.doe@example.com
ทุกสิ่งที่คุณต้องการเพื่อจัดการทีมของคุณ
จัดการวิธีที่คุณรับการแจ้งเตือน
แจ้งเตือนผ่านอีเมล
รับการอัปเดตผ่านอีเมล
แจ้งเตือนแบบ Push
แจ้งเตือนบนอุปกรณ์มือถือของคุณ
ส่งคำเชิญเพื่อเข้าร่วมพื้นที่ทำงานของคุณ
แนวทางสำหรับเงา ระยะห่าง และสี
เงาที่เข้มและแคบเกินไปจะดูไม่เป็นธรรมชาติและหนักทึบ
เงาที่นุ่มนวล กระจายตัว และทอดลงด้านล่าง (เช่น เงาบนการ์ด) ให้ความรู้สึกที่ดูมีมิติมากขึ้น
ระยะห่างที่แน่นเกินไปหรือไม่สม่ำเสมอทำให้เนื้อหาอ่านยาก
คำอธิบายย่อยอยู่ติดกันเกินไป
การใช้ Padding ที่กว้างขวาง สม่ำเสมอ (เช่น p-6) และช่องว่างที่ชัดเจน (gap-4)
แบ่งสัดส่วนชัดเจน
ข้อความที่มีความเปรียบต่างต่ำบนพื้นหลังจะทำให้อ่านยาก
ตรวจสอบให้แน่ใจว่ามีความเปรียบต่างสูง (เช่น ข้อความสีเข้มบนพื้นหลังสีสว่าง)
Using the same font size/weight for titles and body creates a flat structure.
หัวข้อบทความ
This is the description of the article which looks exactly like the title.
Use font sizes and weights (e.g. bold vs normal) to separate content clearly.
หัวข้อบทความ
This is the description of the article which is visually distinct.
Using two primary buttons side-by-side confuses the user on what to do.
Use primary for the main action and ghost/secondary for secondary actions.
Adding padding inside a scroll wrapper cuts off items abruptly during scroll.
Apply padding inside the scrolling area (e.g. px-4) so items bleed to the edge.
Overusing intense colors (primary-900, secondary-900) makes the UI heavy and overwhelming.
Everything in this card screams for attention, tiring the user's eyes.
Use intense colors sparingly as accents or interactive elements on lighter surfaces.
The content is easy to read, with the primary color used only to guide action.