ไปยังหน้า

ค้นหาหน้าของแอปแล้วเปิด

English

ระบบดีไซน์

โทเคนและคอมโพเนนต์ที่ทุกหน้าจอใช้ หน้าพื้นฐานวัดคอนทราสต์ของสีแต่ละคู่แบบสด การเปลี่ยนธีมจึงเห็นได้จากตัวเลขทันที

บทบาทของสี

แต่ละคู่วัดจากสีที่เบราว์เซอร์คำนวณได้จากโทเคน แสดงธีมสว่างและธีมมืดคู่กัน การเปลี่ยนธีมจึงเห็นได้จากตัวเลข ข้อความต้องมีคอนทราสต์อย่างน้อย 4.5:1 (WCAG AA) และ 7:1 คือระดับ AAA

คู่สีของข้อความ ทั้งสองธีมกำลังวัด…

ข้อความสีจางบนพื้นสีจางใช้เกณฑ์ 4.35:1 ตามที่เจ้าของโปรเจกต์ตัดสินใจไว้เมื่อ 4 พ.ย. 2569 แทน 4.5

หน้า
--background / --foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…
การ์ด
--card / --card-foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…
ป็อปโอเวอร์และเมนู
--popover / --popover-foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…
สีหลัก
--primary / --primary-foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…
สีรอง
--secondary / --secondary-foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…
สีจาง
--muted / --muted-foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…
สีเน้นและเมื่อชี้
--accent / --accent-foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…
ข้อความสีจางบนหน้า
--background / --muted-foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…
ลิงก์บนหน้า
--background / --primary
สว่าง
กำลังวัด…
มืด
กำลังวัด…
สีอันตรายบนหน้า
--background / --destructive
สว่าง
กำลังวัด…
มืด
กำลังวัด…
แถบด้านข้าง
--sidebar / --sidebar-foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…
แถบด้านข้าง หน้าปัจจุบัน
--sidebar-primary / --sidebar-primary-foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…
แถบด้านข้าง เมื่อชี้
--sidebar-accent / --sidebar-accent-foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…

เส้นและโฟกัส

แสดงเฉพาะสี เพราะเป็นเส้น ไม่ใช่ข้อความ

เส้นขอบ--border
สว่าง
มืด
ขอบช่องกรอก--input
สว่าง
มืด
วงโฟกัส--ring
สว่าง
มืด
เส้นขอบแถบด้านข้าง--sidebar-border
สว่าง
มืด

โทนสถานะ

ข้อความของป้ายสถานะบนสีโทน วางบนการ์ด ในธีมมืดสีโทนเป็นสีโปร่งแสงทับพื้นด้านล่าง จึงวัดหลังผสมสีแล้ว

รอดำเนินการ
--tone-pending / --tone-pending-foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…
กำลังดำเนินการ
--tone-active / --tone-active-foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…
รอตรวจ
--tone-review / --tone-review-foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…
สำเร็จ
--tone-success / --tone-success-foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…
วิกฤต
--tone-danger / --tone-danger-foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…
ม่วง
--tone-violet / --tone-violet-foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…
กลาง
--tone-neutral / --tone-neutral-foreground
สว่าง
กำลังวัด…
มืด
กำลังวัด…

ชุดสีแผนภูมิ

แต่ละสีวัดกับการ์ด ซึ่งต้องได้ 3:1 จึงแยกออกจากกันได้ สีที่ต่ำกว่านั้นคือเหตุผลที่แผนภูมิทุกอันมีมุมมองตารางด้วย

ตามหมวด เรียงลำดับตายตัว

ช่อง 1--chart-1
สว่าง
กำลังวัด…
มืด
กำลังวัด…
ช่อง 2--chart-2
สว่าง
กำลังวัด…
มืด
กำลังวัด…
ช่อง 3--chart-3
สว่าง
กำลังวัด…
มืด
กำลังวัด…
ช่อง 4--chart-4
สว่าง
กำลังวัด…
มืด
กำลังวัด…
ช่อง 5--chart-5
สว่าง
กำลังวัด…
มืด
กำลังวัด…

ตามลำดับ สำหรับสิ่งที่เรียงเป็นขั้น เช่น ขั้นของดีล

ขั้น 1--chart-step-1
สว่าง
กำลังวัด…
มืด
กำลังวัด…
ขั้น 2--chart-step-2
สว่าง
กำลังวัด…
มืด
กำลังวัด…
ขั้น 3--chart-step-3
สว่าง
กำลังวัด…
มืด
กำลังวัด…
ขั้น 4--chart-step-4
สว่าง
กำลังวัด…
มืด
กำลังวัด…

ขนาดตัวอักษร

สเกลของ Tailwind อ่านค่าจากหน้าจริง: ขนาดและความสูงบรรทัด แต่ละแถวแสดงทั้งภาษาอังกฤษและภาษาไทย ซึ่งสระและวรรณยุกต์บนและล่างต้องใช้ความสูงบรรทัด

  • text-3xlกำลังวัด…ตัวเลขขนาดใหญ่
    อังกฤษ

    Siam Paper confirmed order SO-2026-0148

    ไทย

    ฝ่ายจัดซื้อยืนยันใบสั่งขาย SO-2026-0148 แล้ว

  • text-2xlกำลังวัด…ชื่อหน้า ตัวเลขสำคัญ
    อังกฤษ

    Siam Paper confirmed order SO-2026-0148

    ไทย

    ฝ่ายจัดซื้อยืนยันใบสั่งขาย SO-2026-0148 แล้ว

  • text-xlกำลังวัด…ตัวเลขในหน้ารายละเอียด
    อังกฤษ

    Siam Paper confirmed order SO-2026-0148

    ไทย

    ฝ่ายจัดซื้อยืนยันใบสั่งขาย SO-2026-0148 แล้ว

  • text-lgกำลังวัด…หัวข้อของส่วน
    อังกฤษ

    Siam Paper confirmed order SO-2026-0148

    ไทย

    ฝ่ายจัดซื้อยืนยันใบสั่งขาย SO-2026-0148 แล้ว

  • text-baseกำลังวัด…ข้อความทั่วไป ชื่อการ์ด
    อังกฤษ

    Siam Paper confirmed order SO-2026-0148

    ไทย

    ฝ่ายจัดซื้อยืนยันใบสั่งขาย SO-2026-0148 แล้ว

  • text-smกำลังวัด…ตาราง ฟอร์ม การ์ด และเมนู: ขนาดหลักของระบบ
    อังกฤษ

    Siam Paper confirmed order SO-2026-0148

    ไทย

    ฝ่ายจัดซื้อยืนยันใบสั่งขาย SO-2026-0148 แล้ว

  • text-xsกำลังวัด…ป้าย คำบรรยาย คำแนะนำ
    อังกฤษ

    Siam Paper confirmed order SO-2026-0148

    ไทย

    ฝ่ายจัดซื้อยืนยันใบสั่งขาย SO-2026-0148 แล้ว

ข้อความต่อเนื่อง

Kun Kode, Former Dev จำหน่ายเครื่องใช้สำนักงานและบรรจุภัณฑ์ให้บริษัททั่วประเทศไทย ย่อหน้านี้ยาวเท่าข้อความที่อ่านกันจริง เพื่อให้ดูระยะห่างและความยาวของบรรทัดได้ทั้งอักษรไทยและอักษรละติน

ตัวเลขและวันที่

จำนวนเงิน
฿1,284,500.00
เปอร์เซ็นต์
+12.4%
วันที่
28 ต.ค. 2569
วันและเวลา
28 ต.ค. 2569 09:30

ระยะห่าง

ระยะของ Tailwind ทีละ 4 px ระยะห่างบอกว่าสองสิ่งเกี่ยวข้องกันมากแค่ไหน

gap-1.5
กำลังวัด…
ภายในคอมโพเนนต์: ไอคอนกับคำ
gap-2
กำลังวัด…
สิ่งที่เกี่ยวข้องกัน: ปุ่มที่วางเรียงกัน
gap-4
กำลังวัด…
ส่วนย่อยในหัวข้อ การ์ดในกริด ระยะภายในการ์ด
gap-6
กำลังวัด…
ระหว่างบล็อกของหน้า

ความโค้งของมุม

ใช้ --radius ค่าเดียว ขั้นอื่นคิดจากค่านี้ เปลี่ยนค่าเดียวมุมทุกจุดจึงเปลี่ยนตามกัน

  • rounded-smกำลังวัด…ปุ่มคีย์บอร์ด ทูลทิป
  • rounded-mdกำลังวัด…รายการในเมนู โครงร่างระหว่างโหลด
  • rounded-lgกำลังวัด…ปุ่ม ช่องกรอก เมนู การแจ้งเตือน
  • rounded-xlกำลังวัด…การ์ดและกล่องโต้ตอบ
  • rounded-4xlกำลังวัด…ป้าย
  • rounded-fullรูปประจำตัว

เงาและระดับชั้น

ค่าเริ่มต้นเป็นแบบเรียบ: การ์ดใช้เส้นขอบบาง ไม่ใช้เงา เงาใช้กับสิ่งที่ลอยอยู่เหนือหน้า

  • ring-1การ์ด: เส้นขอบบาง
  • shadow-smหน้าแบบฝัง แถบด้านข้างแบบลอย
  • shadow-mdเมนู รายการตัวเลือก
  • shadow-lgแผงด้านข้าง เมนูย่อย
  • shadow-xlทูลทิปของแผนภูมิ
← KunKode