โทเคน
ค่าทุกตัวมาจากไฟล์เดียว tokens/tokens.mjs แล้วสร้างเป็น CSS และ JSON อัตโนมัติ ตารางด้านล่างแสดงแบรนด์ที่เลือกอยู่ สลับแบรนด์เพื่อเทียบ
สามชั้นของโทเคน
คอมโพเนนต์อ่านเฉพาะชั้น semantic และ component จึงเปลี่ยนแบรนด์ได้ด้วย data-brand ตัวเดียว
/* 1. primitive: ค่าดิบของแบรนด์ */
--p-lime: #cdf46e;
/* 2. semantic: ชื่อตามหน้าที่ ค่าสว่างและมืดในตัวเดียว */
--primary: light-dark(var(--p-lime), var(--p-lime-neon));
/* 3. component: ปุ่มควรรู้จักแค่ชั้นนี้ */
.ds-btn[data-variant="primary"] { background: var(--primary); }สีดิบของแบรนด์
ใช้ผ่าน semantic เท่านั้น ยกเว้นงานแบรนด์โดยตรง เช่น โปสเตอร์หรือภาพประกอบ
สีตามหน้าที่
คอลัมน์คอนทราสต์วัดสีตัวอักษรเทียบพื้นหลังหลัก bg ของธีมนั้น
| โทเคน | สว่าง | มืด | ใช้กับ |
|---|---|---|---|
--bg | paper | graphite | พื้นหลังของหน้า |
--bg-alt | paper-2 | graphite-2 | แถบสลับ แถบข้าง บล็อกโค้ด |
--surface | paper-white | graphite-2 | การ์ด ช่องกรอก เมนู |
--surface-raised | #ffffff | graphite-3 | ป๊อปโอเวอร์ หน้าต่าง toast |
--surface-sunken | paper-2 | #0a0b0a | หลุม ราง พื้นที่ยุบ |
--fg | ink 14.06 AAA | bone 16.09 AAA | ข้อความหลักและหัวข้อ |
--fg-2 | ink-2 7.57 AAA | bone-2 10.96 AAA | ข้อความรอง คำอธิบาย |
--muted | ash 5.32 AA | ash-dark 6.87 AA | คำบรรยาย placeholder เมตาดาทา |
--line | rgb(38 38 43 / 0.1) | rgb(236 236 230 / 0.13) | เส้นบางและเส้นคั่น |
--line-strong | rgb(38 38 43 / 0.5) | rgb(236 236 230 / 0.46) | ขอบช่องกรอก ปุ่ม outline (3:1 กับพื้น) |
--accent | lime | lime-neon | เครื่องหมายแบรนด์และพื้นสี ห้ามใช้เป็นข้อความบนพื้นสว่าง |
--on-accent | ink | graphite | ข้อความบนพื้น accent |
--accent-text | lime-ink 7.18 AAA | lime-neon 15.83 AAA | ข้อความและลิงก์สีแบรนด์ |
--accent-soft | lime-soft | #1d2312 | แถวที่เลือก ไฮไลต์อ่อน |
--primary | lime | lime-neon | พื้นปุ่มหลัก |
--on-primary | ink | graphite | ข้อความบนปุ่มหลัก |
--primary-hover | lime-deep | #cbff6b | ปุ่มหลักเมื่อชี้ |
--secondary | ink | bone | พื้นปุ่มรอง |
--on-secondary | paper | graphite | ข้อความบนปุ่มรอง |
--secondary-hover | #3a3a41 | #ffffff | ปุ่มรองเมื่อชี้ |
--focus | ink | bone | เส้นโฟกัส |
--focus-halo | lime | lime-neon | วงรอบเส้นโฟกัส |
--success | #3b7527 5.21 AA | #9be37a 12.41 AAA | ข้อความและไอคอนสำเร็จ |
--success-soft | #e3f1da | #17220f | พื้นสถานะสำเร็จ |
--warning | #8a5600 5.75 AA | #f2b84b 10.66 AAA | ข้อความและไอคอนเตือน |
--warning-soft | #fbefd6 | #2a2110 | พื้นสถานะเตือน |
--danger | #b8372b 5.42 AA | #ff8a6b 8.27 AAA | ข้อผิดพลาดและการกระทำที่ย้อนไม่ได้ |
--on-danger | #ffffff | graphite | ข้อความบนพื้น danger |
--danger-soft | #fbe4e1 | #2c1612 | พื้นสถานะผิดพลาด |
--info | #2b59c3 5.90 AA | #8fb0ff 8.92 AAA | ข้อความและไอคอนแจ้งข้อมูล |
--info-soft | #e3ebfb | #151c2e | พื้นสถานะแจ้งข้อมูล |
--overlay | rgb(38 38 43 / 0.42) | rgb(0 0 0 / 0.7) | ฉากหลังของหน้าต่างและแผง |
--tint-1 | tint-blue | #1a2028 | สีกระดาษ เย็น |
--tint-2 | tint-butter | #23211a | สีกระดาษ อุ่น |
--tint-3 | tint-sage | #1b2119 | สีกระดาษ สดชื่น |
--tint-4 | tint-coral | #261d19 | สีกระดาษ นุ่ม |
--tint-accent | tint-lime | #1d2312 | สีกระดาษ ของแบรนด์ |
--selection-bg | lime | lime-neon | พื้นข้อความที่เลือก |
--selection-fg | ink | graphite | ข้อความที่เลือก |
| โทเคน | สว่าง | มืด | ใช้กับ |
|---|---|---|---|
--bg | mist | night | พื้นหลังของหน้า |
--bg-alt | mist-2 | night-2 | แถบสลับ แถบข้าง บล็อกโค้ด |
--surface | #fdfdff | night-2 | การ์ด ช่องกรอก เมนู |
--surface-raised | #ffffff | night-3 | ป๊อปโอเวอร์ หน้าต่าง toast |
--surface-sunken | mist-2 | #0b0c1c | หลุม ราง พื้นที่ยุบ |
--fg | ink 15.46 AAA | haze 15.74 AAA | ข้อความหลักและหัวข้อ |
--fg-2 | ink-2 10.20 AAA | haze-2 11.09 AAA | ข้อความรอง คำอธิบาย |
--muted | ash 5.74 AA | ash-dark 7.43 AAA | คำบรรยาย placeholder เมตาดาทา |
--line | rgb(29 29 31 / 0.09) | rgb(236 236 248 / 0.12) | เส้นบางและเส้นคั่น |
--line-strong | rgb(75 78 109 / 0.68) | rgb(236 236 248 / 0.42) | ขอบช่องกรอก ปุ่ม outline (3:1 กับพื้น) |
--accent | peri | peri | เครื่องหมายแบรนด์และพื้นสี ห้ามใช้เป็นข้อความบนพื้นสว่าง |
--on-accent | #14153a | night | ข้อความบนพื้น accent |
--accent-text | peri-ink 6.01 AA | peri-light 9.80 AAA | ข้อความและลิงก์สีแบรนด์ |
--accent-soft | peri-soft | #262a5c | แถวที่เลือก ไฮไลต์อ่อน |
--primary | slate | peri | พื้นปุ่มหลัก |
--on-primary | #ffffff | night | ข้อความบนปุ่มหลัก |
--primary-hover | peri-ink | peri-light | ปุ่มหลักเมื่อชี้ |
--secondary | rgb(255 255 255 / 0.72) | rgb(255 255 255 / 0.08) | พื้นปุ่มรอง |
--on-secondary | ink | haze | ข้อความบนปุ่มรอง |
--secondary-hover | #ffffff | rgb(255 255 255 / 0.16) | ปุ่มรองเมื่อชี้ |
--focus | peri-ink | peri-light | เส้นโฟกัส |
--focus-halo | rgb(139 143 247 / 0.35) | rgb(139 143 247 / 0.4) | วงรอบเส้นโฟกัส |
--success | #1d7a46 4.91 AA | #6fd6a0 10.37 AAA | ข้อความและไอคอนสำเร็จ |
--success-soft | mint-soft | #13281f | พื้นสถานะสำเร็จ |
--warning | #8a5a00 5.44 AA | sun 12.79 AAA | ข้อความและไอคอนเตือน |
--warning-soft | sun-soft | #2a2412 | พื้นสถานะเตือน |
--danger | #b42318 6.04 AA | #ff8a80 8.08 AAA | ข้อผิดพลาดและการกระทำที่ย้อนไม่ได้ |
--on-danger | #ffffff | night | ข้อความบนพื้น danger |
--danger-soft | peach-soft | #2e1616 | พื้นสถานะผิดพลาด |
--info | peri-ink 6.01 AA | peri-light 9.80 AAA | ข้อความและไอคอนแจ้งข้อมูล |
--info-soft | peri-soft | #1f2250 | พื้นสถานะแจ้งข้อมูล |
--overlay | rgb(29 29 31 / 0.35) | rgb(5 6 18 / 0.72) | ฉากหลังของหน้าต่างและแผง |
--tint-1 | peri-soft | #1f2250 | สีกระดาษ เย็น |
--tint-2 | sun-soft | #2a2412 | สีกระดาษ อุ่น |
--tint-3 | mint-soft | #13281f | สีกระดาษ สดชื่น |
--tint-4 | peach-soft | #2e1c16 | สีกระดาษ นุ่ม |
--tint-accent | peri-soft | #262a5c | สีกระดาษ ของแบรนด์ |
--selection-bg | peri-soft | #2f3470 | พื้นข้อความที่เลือก |
--selection-fg | ink | haze | ข้อความที่เลือก |
คู่สีที่ต้องผ่าน
ตรวจทุกครั้งที่สร้างโทเคน ข้อความต้องได้ 4.5:1 เส้นขอบช่องกรอกและวงโฟกัสต้องได้ 3:1
| ตัวหน้า | พื้น | ขั้นต่ำ | สว่าง | มืด |
|---|---|---|---|---|
fg | bg | 4.5:1 | 14.06 AAA | 16.09 AAA |
fg-2 | bg | 4.5:1 | 7.57 AAA | 10.96 AAA |
muted | bg | 4.5:1 | 5.32 AA | 6.87 AA |
muted | surface | 4.5:1 | 5.60 AA | 6.30 AA |
muted | bg-alt | 4.5:1 | 4.96 AA | 6.30 AA |
accent-text | bg | 4.5:1 | 7.18 AAA | 15.83 AAA |
accent-text | accent-soft | 4.5:1 | 6.96 AA | 13.39 AAA |
on-primary | primary | 4.5:1 | 12.02 AAA | 15.83 AAA |
on-primary | primary-hover | 4.5:1 | 10.38 AAA | 16.40 AAA |
on-secondary | secondary | 4.5:1 | 14.06 AAA | 16.09 AAA |
on-accent | accent | 4.5:1 | 12.02 AAA | 15.83 AAA |
on-danger | danger | 4.5:1 | 5.80 AA | 8.27 AAA |
success | bg | 4.5:1 | 5.21 AA | 12.41 AAA |
warning | bg | 4.5:1 | 5.75 AA | 10.66 AAA |
danger | bg | 4.5:1 | 5.42 AA | 8.27 AAA |
info | bg | 4.5:1 | 5.90 AA | 8.92 AAA |
success | success-soft | 4.5:1 | 4.75 AA | 10.74 AAA |
warning | warning-soft | 4.5:1 | 5.40 AA | 8.87 AAA |
danger | danger-soft | 4.5:1 | 4.78 AA | 7.39 AAA |
info | info-soft | 4.5:1 | 5.28 AA | 7.94 AAA |
line-strong | bg | 3:1 | 3.03 3:1 | 4.13 3:1 |
line-strong | surface | 3:1 | 3.07 3:1 | 4.08 3:1 |
focus | bg | 3:1 | 14.06 AAA | 16.09 AAA |
fg | tint-1 | 4.5:1 | 12.46 AAA | 13.82 AAA |
fg | tint-2 | 4.5:1 | 13.28 AAA | 13.58 AAA |
| ตัวหน้า | พื้น | ขั้นต่ำ | สว่าง | มืด |
|---|---|---|---|---|
fg | bg | 4.5:1 | 15.46 AAA | 15.74 AAA |
fg-2 | bg | 4.5:1 | 10.20 AAA | 11.09 AAA |
muted | bg | 4.5:1 | 5.74 AA | 7.43 AAA |
muted | surface | 4.5:1 | 6.15 AA | 6.85 AA |
muted | bg-alt | 4.5:1 | 5.31 AA | 6.85 AA |
accent-text | bg | 4.5:1 | 6.01 AA | 9.80 AAA |
accent-text | accent-soft | 4.5:1 | 5.29 AA | 7.12 AAA |
on-primary | primary | 4.5:1 | 8.05 AAA | 6.47 AA |
on-primary | primary-hover | 4.5:1 | 6.55 AA | 9.80 AAA |
on-secondary | secondary | 4.5:1 | 16.44 AAA | 12.84 AAA |
on-accent | accent | 4.5:1 | 6.15 AA | 6.47 AA |
on-danger | danger | 4.5:1 | 6.57 AA | 8.08 AAA |
success | bg | 4.5:1 | 4.91 AA | 10.37 AAA |
warning | bg | 4.5:1 | 5.44 AA | 12.79 AAA |
danger | bg | 4.5:1 | 6.04 AA | 8.08 AAA |
info | bg | 4.5:1 | 6.01 AA | 9.80 AAA |
success | success-soft | 4.5:1 | 4.71 AA | 8.74 AAA |
warning | warning-soft | 4.5:1 | 5.28 AA | 10.71 AAA |
danger | danger-soft | 4.5:1 | 5.50 AA | 7.40 AAA |
info | info-soft | 4.5:1 | 5.29 AA | 7.95 AAA |
line-strong | bg | 3:1 | 3.40 3:1 | 3.66 3:1 |
line-strong | surface | 3:1 | 3.52 3:1 | 3.61 3:1 |
focus | bg | 3:1 | 6.01 AA | 9.80 AAA |
fg | tint-1 | 4.5:1 | 13.58 AAA | 12.77 AAA |
fg | tint-2 | 4.5:1 | 14.99 AAA | 13.18 AAA |
ตัวอักษร
ตัวอย่างใช้ฟอนต์และขนาดของแบรนด์ที่เลือกอยู่ ขนาดหัวข้อยืดหยุ่นตามความกว้างจอด้วย clamp()
display: Archivobody: Archivothai: Anuphanmono: Geist Mono
display: Inter Tightbody: Geistthai: Noto Sans Thaimono: Geist Mono
--text-displayเติบโตทีละองศา.ds-display--text-h1เรียนด้วยกัน เติบโตไปด้วยกัน.ds-h1--text-h2บทเรียนที่ออกแบบมาเพื่อคุณ.ds-h2--text-h3หัวข้อย่อยของการ์ดและส่วน.ds-h3--text-leadย่อหน้านำสั้นๆ ที่บอกว่าส่วนนี้เกี่ยวกับอะไร.ds-lead--text-bodyเนื้อหาหลักอ่านสบายด้วยระยะบรรทัด 1.6 รองรับสระบนและล่างของภาษาไทย.ds-body--text-smallคำอธิบายใต้ช่องกรอกและข้อความรอง.ds-small--text-meta.ds-metaระยะห่าง
ฐาน 4 px ใช้ร่วมกันทั้งสองแบรนด์
--space-14px
--space-28px
--space-312px
--space-416px
--space-524px
--space-632px
--space-748px
--space-864px
--space-996px
--space-10144px
มุมโค้ง
กฎของรูปทรง: ปุ่มและชิปเป็นแคปซูล การ์ดและสื่อ 28 px พื้นผิวเล็ก 14 ถึง 18 px ช่องกรอก 10 ถึง 14 px
--radius-xs
--radius-sm
--radius-md
--radius-lg
--radius-pill
เงา
ASWINOLOGY° ใช้เงาน้อยและนุ่ม Lurnelle ใช้เงาดินเหนียวที่มีแสงด้านในเพื่อให้พื้นผิวดูนูน
--shadow-sm
--shadow-md
--shadow-lg
โมชัน
ดูการเคลื่อนไหวจริงและตัวอย่าง GSAP ได้ที่หน้าโมชัน
| โทเคน | ค่า |
|---|---|
--ease-out | cubic-bezier(0.16, 1, 0.3, 1) |
--ease-in-out | cubic-bezier(0.76, 0, 0.24, 1) |
--ease-spring | cubic-bezier(0.34, 1.56, 0.64, 1) |
--dur-fast | 180ms |
--dur-base | 320ms |
--dur-slow | 700ms |
| โทเคน | ค่า |
|---|---|
--ease-out | cubic-bezier(0.16, 1, 0.3, 1) |
--ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) |
--ease-spring | cubic-bezier(0.34, 1.4, 0.64, 1) |
--dur-fast | 160ms |
--dur-base | 280ms |
--dur-slow | 600ms |
โทเคนระดับคอมโพเนนต์
ส่วนที่ทำให้แต่ละแบรนด์เป็นตัวเอง เทียบสองแบรนด์ในตารางเดียว
| โทเคน | ASWINOLOGY° | Lurnelle |
|---|---|---|
--btn-radius | var(--radius-pill) | var(--radius-pill) |
--btn-shadow | none | 0 8px 20px -12px light-dark(rgb(75 78 109 / 0.3), rgb(0 0 0 / 0.5)), inset 0 1px 0 light-dark(#ffffff, rgb(255 255 255 / 0.06)) |
--btn-primary-shadow | none | 0 14px 26px -12px light-dark(rgb(75 78 109 / 0.55), rgb(139 143 247 / 0.35)), inset 0 -4px 8px rgb(0 0 0 / 0.16), inset 0 3px 6px rgb(255 255 255 / 0.22) |
--btn-chip-bg | var(--fg) | transparent |
--btn-chip-fg | var(--bg) | currentColor |
--btn-chip-size | 32px | 20px |
--field-radius | var(--radius-sm) | var(--radius-md) |
--field-bg | var(--surface) | light-dark(rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.04)) |
--card-radius | var(--radius-lg) | var(--radius-lg) |
--card-bg | var(--surface) | light-dark(rgb(255 255 255 / 0.62), rgb(35 37 74 / 0.55)) |
--card-border | var(--line) | light-dark(rgb(255 255 255 / 0.9), rgb(236 236 248 / 0.1)) |
--card-shadow | none | var(--shadow-md) |
--card-blur | none | blur(18px) saturate(170%) |
--card-hover-shadow | var(--shadow-md) | var(--shadow-lg) |
--panel-radius | var(--radius-md) | var(--radius-md) |
--chip-radius | var(--radius-pill) | var(--radius-pill) |
--header-bg | light-dark(rgb(248 247 244 / 0.82), rgb(15 16 14 / 0.82)) | light-dark(rgb(255 255 255 / 0.66), rgb(24 26 51 / 0.66)) |
--header-radius | 0px | var(--radius-pill) |
--btn-outline-hover-bg | var(--fg) | var(--surface-raised) |
--btn-outline-hover-fg | var(--bg) | var(--accent-text) |
--btn-outline-hover-border | var(--fg) | var(--accent) |
--btn-ghost-hover-bg | var(--bg-alt) | var(--accent-soft) |
--btn-ghost-hover-fg | var(--fg) | var(--accent-text) |
--btn-secondary-border | transparent | light-dark(rgb(75 78 109 / 0.18), rgb(236 236 248 / 0.16)) |
--btn-secondary-blur | none | blur(12px) |
--switch-thumb-off | var(--muted) | var(--surface-raised) |
--switch-thumb-shadow | none | var(--shadow-sm), 0 2px 6px light-dark(rgb(75 78 109 / 0.25), rgb(0 0 0 / 0.5)) |
--chip-on-bg | var(--fg) | var(--accent-soft) |
--chip-on-fg | var(--bg) | var(--accent-text) |
--chip-on-border | var(--fg) | var(--accent) |
--progress-bar | var(--fg) | var(--primary) |
--tablist-bg | transparent | var(--surface-sunken) |
--tablist-pad | 0px | 4px |
--tablist-radius | 0px | var(--radius-pill) |
--tablist-border | var(--line) | transparent |
--tab-radius | 0px | var(--radius-pill) |
--tab-active-bg | transparent | var(--surface-raised) |
--tab-active-line | var(--fg) | transparent |
--tab-active-shadow | none | var(--shadow-sm), 0 4px 12px -6px light-dark(rgb(75 78 109 / 0.35), rgb(0 0 0 / 0.5)) |
--dialog-shadow | var(--shadow-lg) | var(--shadow-lg) |
--only-aswinology | contents | none |
--only-lurnelle | none | contents |
--mark-color | var(--accent) | var(--accent) |
z-index และ breakpoint
ใช้ชั้นตามระบบเท่านั้น ไม่ตั้ง z-index ลอยๆ
| z | ค่า |
|---|---|
--z-base | 1 |
--z-sticky | 20 |
--z-header | 40 |
--z-overlay | 60 |
--z-dialog | 70 |
--z-toast | 80 |
--z-tooltip | 90 |
| breakpoint | ค่า |
|---|---|
sm | 640px |
md | 768px |
lg | 1024px |
xl | 1280px |