ภาพรวม
Ruda คือเครื่องมือติดตามเอกสารและเก็บลูกค้าเป้าหมายที่มี CRM ในตัว สำหรับทีมขายและการตลาดขององค์กร
- ผลิตภัณฑ์
- Ruda
- ผู้ให้บริการ
- Rexplore Inc.
- ระบบดีไซน์
- Vercel Geist
- ฟอนต์
- Geist Sans, Geist Mono
หน้าจอของ Ruda สร้างบน ระบบดีไซน์ Vercel Geist สี ขนาดตัวอักษร ความโค้งมุม และการเคลื่อนไหวเป็นไปตามต้นฉบับของ Geist และเมื่อสิ่งที่เราทำต่างจากต้นฉบับ ให้ยึดต้นฉบับเป็นหลัก
Geist Sans และ Geist Mono โดย Vercel ใช้สัญญาอนุญาต SIL Open Font License 1.1
โลโก้
โลโก้คือคำว่า RUDA ที่เรียงด้วยฟอนต์ Geist Sans ไม่มีสัญลักษณ์และไม่มีกรอบตัวอักษรย่อ
ข้อกำหนด
- ใช้ตัวพิมพ์ใหญ่ RUDA เสมอ ส่วนชื่อผลิตภัณฑ์ในประโยคให้เขียนว่า Ruda
- น้ำหนัก 600 (SemiBold) ห้ามหนากว่านี้
- ระยะห่างตัวอักษรคงที่ 0.64px ในทุกขนาด สัดส่วนจึงเล็กลงเมื่อโลโก้ใหญ่ขึ้น
- ขนาดเล็กสุด 12px
- พื้นที่ว่าง: เว้นทุกด้านอย่างน้อยเท่าความสูงตัวพิมพ์ใหญ่หนึ่งตัว (0.71 × ขนาดตัวอักษร)
- สี: #171717 บนพื้นสว่าง และสีขาวบนพื้นเข้ม ห้ามใช้สีอื่น
- โปรแกรมอ่านหน้าจอจะอ่านชื่อว่า Ruda ไม่สะกดทีละตัว ในข้อความแทนรูปภาพ คำบรรยาย และเอกสาร ให้เขียนว่า Ruda
- โลโก้อ่านจากซ้ายไปขวาเสมอ แม้ในหน้าภาษาอาหรับ และไม่มีการแปลหรือถอดเป็นอักษรอื่น
ขนาด
| ขนาด | ระยะห่างตัวอักษร | สัดส่วน | ตัวอย่าง |
|---|---|---|---|
| 12px | 0.64px | 0.053em | Ruda |
| 14px | 0.64px | 0.046em | Ruda |
| 16px | 0.64px | 0.040em | Ruda |
| 24px | 0.64px | 0.027em | Ruda |
| 32px | 0.64px | 0.020em | Ruda |
สิ่งที่ห้ามทำ
ไม่ถูกต้องตัวพิมพ์เล็ก
ไม่ถูกต้องตัวพิมพ์ผสม
ไม่ถูกต้องเปลี่ยนระยะห่างตัวอักษร
ไม่ถูกต้องตัวเอียง
ไม่ถูกต้องเส้นขอบ
ไม่ถูกต้องเงา
ไม่ถูกต้องไล่สี
ไม่ถูกต้องสีนอกแบรนด์
ไม่ถูกต้องกรอบตัวอักษรย่อหรือสัญลักษณ์
สี
สีกลางมาก่อน สีดำคือสีของแบรนด์ ส่วนสีน้ำเงินใช้กับลิงก์และสถานะเท่านั้น ค่าคอนทราสต์คำนวณจากค่าโทเค็นแต่ละตัวเทียบกับสีขาวและสีดำ
AA หมายถึง 4.5:1 ขึ้นไป เพียงพอสำหรับเนื้อความ ส่วน AA ตัวอักษรใหญ่หมายถึง 3:1 ขึ้นไป ใช้ได้กับตัวอักษรขนาดใหญ่และองค์ประกอบของหน้าจอเท่านั้น
| โทเค็น | HEX | บนสีขาว (#ffffff) | บนสีดำ (#000000) | |
|---|---|---|---|---|
| แบรนด์ | ||||
| primaryสีหลัก: ปุ่ม โลโก้ ข้อความหลัก | #171717 | 17.93:1AA | 1.17:1ต่ำกว่า AA | |
| primary (dark)พื้นสีหลักในโหมดมืด | #2e2e2e | 13.58:1AA | 1.55:1ต่ำกว่า AA | |
| cta (dark)ปุ่มหลักในโหมดมืด | #ededed | 1.17:1ต่ำกว่า AA | 17.94:1AA | |
| น้ำเงิน | ||||
| linkข้อความลิงก์ | #0068d6 | 5.31:1AA | 3.95:1AA ตัวอักษรใหญ่ | |
| link-darkข้อความลิงก์ในโหมดมืด | #52a8ff | 2.50:1ต่ำกว่า AA | 8.40:1AA | |
| toggle-on · toast-success · infoสวิตช์เปิด การแจ้งเตือนสำเร็จ พื้นข้อมูล | #0070f3 | 4.55:1AA | 4.61:1AA | |
| เบต้า | ||||
| badge-pinkป้ายเบต้า ตัวอักษรสีขาว | #bd2864 | 5.75:1AA | 3.65:1AA ตัวอักษรใหญ่ | |
| badge-pink-darkป้ายเบต้าในโหมดมืด | #b31a57 | 6.56:1AA | 3.20:1AA ตัวอักษรใหญ่ | |
| ปิดใช้งาน | ||||
| disabled-bgพื้นที่ปิดใช้งาน | #f2f2f2 | 1.12:1ต่ำกว่า AA | 18.76:1AA | |
| disabled-fgข้อความที่ปิดใช้งาน | #8f8f8f | 3.23:1AA ตัวอักษรใหญ่ | 6.49:1AA | |
| เทา | ||||
| gray-50พื้นหลัง | #f2f2f2 | 1.12:1ต่ำกว่า AA | 18.76:1AA | |
| gray-100พื้นหลังเมื่อชี้ | #ebebeb | 1.19:1ต่ำกว่า AA | 17.62:1AA | |
| gray-200พื้นหลังเมื่อกด | #e6e6e6 | 1.25:1ต่ำกว่า AA | 16.83:1AA | |
| gray-300เส้นขอบ | #ebebeb | 1.19:1ต่ำกว่า AA | 17.62:1AA | |
| gray-800ข้อความรอง | #4d4d4d | 8.45:1AA | 2.48:1ต่ำกว่า AA | |
| gray-900ข้อความหลัก | #171717 | 17.93:1AA | 1.17:1ต่ำกว่า AA | |
| gray-500 (dark)ข้อความรองในโหมดมืด | #a0a0a0 | 2.61:1ต่ำกว่า AA | 8.03:1AA | |
| สถานะ | ||||
| successจุดและป้ายแสดงความสำเร็จ | #45a557 | 3.10:1AA ตัวอักษรใหญ่ | 6.77:1AA | |
| warningคำเตือน | #f5a623 | 2.03:1ต่ำกว่า AA | 10.36:1AA | |
| errorข้อผิดพลาดและการลบ | #e5484d | 3.91:1AA ตัวอักษรใหญ่ | 5.37:1AA | |
ตัวควบคุมที่ปิดใช้งานได้รับการยกเว้นจากเกณฑ์คอนทราสต์ขั้นต่ำ (WCAG 1.4.3) และต้องมี disabled หรือ aria-disabled เสมอ #8f8f8f / #f2f2f2 = 2.89:1
ตัวอักษร
ข้อความทั้งหมดบนหน้าจอและงานการตลาดใช้ Geist Sans ส่วน Geist Mono ใช้กับโค้ดและค่าอย่าง HEX
Geist Sans Aa Bb 0123
Geist Mono Aa Bb 0123
หัวข้อ
| โทเค็น | ขนาด | ความสูงบรรทัด | น้ำหนัก | ระยะห่างตัวอักษร |
|---|---|---|---|---|
| text-heading-56 | 56px | 56px | 600 | -3.36px |
| text-heading-48 | 48px | 56px | 600 | -2.88px |
| text-heading-40 | 40px | 48px | 600 | -2.4px |
| text-heading-32 | 32px | 40px | 600 | -1.28px |
| text-heading-24 | 24px | 32px | 600 | -0.96px |
| text-heading-20 | 20px | 26px | 600 | -0.4px |
| text-heading-16 | 16px | 24px | 600 | -0.32px |
| text-heading-14 | 14px | 20px | 600 | -0.28px |
เนื้อความ
| โทเค็น | ขนาด | ความสูงบรรทัด |
|---|---|---|
| text-2xs | 12px | 16px |
| text-xs | 13px | 18px |
| text-sm | 14px | 20px |
| text-base | 16px | 24px |
| text-xl | 20px | 28px |
| text-2xl | 24px | 32px |
| text-3xl | 32px | 40px |
น้ำหนัก
น้ำหนัก: เนื้อความ 400 ปุ่ม 500 การเน้น 550 หัวข้อและโลโก้ 600 ไม่ใช้ 700 ขึ้นไป และการตรวจตอนบิลด์จะปฏิเสธ
ระบบตัวอักษรอื่น
- ภาษาเกาหลี ญี่ปุ่น และจีน ใช้ฟอนต์ระบบของแต่ละภาษาต่อจาก Geist (เกาหลี: Pretendard) หัวข้อตั้งแต่ 24px ขึ้นไปบีบระยะ -0.02em และ 20px ลงมาเป็น 0
- หัวข้อภาษาไทยและอาหรับคงระยะห่างตัวอักษรไว้ที่ 0 เพื่อไม่ให้วรรณยุกต์และการเชื่อมตัวอักษรเสียรูป หัวข้อภาษาไทยขนาด 48px และ 56px ใช้ความสูงบรรทัด 1.2
- หน้าภาษาอาหรับเรียงจากขวาไปซ้าย ส่วนโลโก้ ค่า HEX และโค้ดยังคงเรียงจากซ้ายไปขวา
รูปทรงและระยะห่าง
ความโค้งมุม
- 6pxตัวควบคุมและช่องกรอก
- 8pxการ์ด ป๊อปโอเวอร์ เมนู
- 12pxหน้าต่างโมดัล
เงา
การ์ดใช้เส้น 1px แทนเงา และตารางไม่มีเงาเลย เงาใช้กับชั้นที่ลอยอยู่เท่านั้น:
- ป๊อปโอเวอร์และเมนู0 8px 24px rgba(0,0,0,.12)
- หน้าต่างโมดัล0 16px 48px rgba(0,0,0,.16)
ระยะห่าง
ระยะห่างเพิ่มทีละ 4px
การเคลื่อนไหว
- การตอบสนองเปลี่ยนเพียงสี ความทึบ หรือเงา ไม่มีสิ่งใดขยายหรือเลื่อนเมื่อกดหรือชี้
- การเปลี่ยนผ่านใช้เวลา 150 ถึง 200ms ด้วยเส้นโค้งชะลอของ Geist
- ป๊อปโอเวอร์และโมดัลปรากฏแบบค่อยๆ เฟด และไม่เบลอพื้นหลัง
- เมื่อเปิดการลดการเคลื่อนไหว ทุกการเคลื่อนที่จะเปลี่ยนเป็นการเฟดธรรมดา
cubic-bezier(0, 0, 0.2, 1)
ติดต่อ
หากมีคำถามเรื่องการใช้ชื่อหรือโลโก้ Ruda ส่งอีเมลมาที่ help@rexplore.xyz