Tổng quan
Ruda là công cụ theo dõi tài liệu và thu thập khách hàng tiềm năng, tích hợp sẵn CRM, dành cho đội bán hàng và marketing doanh nghiệp.
- Sản phẩm
- Ruda
- Đơn vị vận hành
- Rexplore Inc.
- Hệ thống thiết kế
- Vercel Geist
- Phông chữ
- Geist Sans, Geist Mono
Giao diện Ruda được xây dựng trên hệ thống thiết kế Vercel Geist. Màu sắc, thang cỡ chữ, bo góc và chuyển động theo đúng bản gốc Geist; khi cách chúng tôi triển khai khác với bản gốc, bản gốc được ưu tiên.
Geist Sans và Geist Mono của Vercel, cấp phép theo SIL Open Font License 1.1.
Logo
Logo là chữ RUDA sắp bằng Geist Sans. Không có biểu tượng và không có khung chữ cái đầu.
Quy định
- Luôn viết hoa: RUDA. Trong câu văn, tên sản phẩm được viết là Ruda.
- Độ đậm 600 (SemiBold). Không đậm hơn.
- Khoảng cách chữ cố định 0.64px ở mọi cỡ, nên tỷ lệ nhỏ dần khi logo lớn lên.
- Cỡ nhỏ nhất 12px.
- Vùng trống: chừa ít nhất một chiều cao chữ hoa (0.71 × cỡ chữ) ở mọi phía.
- Màu: #171717 trên nền sáng, trắng trên nền tối. Không dùng màu khác.
- Trình đọc màn hình đọc tên là Ruda, không đánh vần từng chữ. Trong văn bản thay thế, chú thích và tài liệu, hãy viết Ruda.
- Logo luôn đọc từ trái sang phải, kể cả trên trang tiếng Ả Rập, và không bao giờ được dịch hay chuyển tự.
Kích thước
| Cỡ | Khoảng cách chữ | Tỷ lệ | Mẫu |
|---|---|---|---|
| 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 |
Không được làm
SaiChữ thường
SaiChữ hoa thường lẫn lộn
SaiĐổi khoảng cách chữ
SaiChữ nghiêng
SaiViền chữ
SaiĐổ bóng
SaiChuyển màu
SaiMàu ngoài thương hiệu
SaiKhung chữ cái đầu hoặc biểu tượng
Màu sắc
Ưu tiên màu trung tính. Đen là màu thương hiệu, xanh dương chỉ dành cho liên kết và trạng thái. Độ tương phản được tính cho từng token so với nền trắng và nền đen.
AA nghĩa là từ 4,5:1 trở lên, đủ cho chữ nội dung. AA chữ lớn nghĩa là từ 3:1 trở lên, chỉ dùng cho chữ cỡ lớn và thành phần giao diện.
| Token | HEX | Trên nền trắng (#ffffff) | Trên nền đen (#000000) | |
|---|---|---|---|---|
| Thương hiệu | ||||
| primaryMàu chính: nút, logo, chữ chính | #171717 | 17.93:1AA | 1.17:1Dưới AA | |
| primary (dark)Nền màu chính ở chế độ tối | #2e2e2e | 13.58:1AA | 1.55:1Dưới AA | |
| cta (dark)Nút chính ở chế độ tối | #ededed | 1.17:1Dưới AA | 17.94:1AA | |
| Xanh dương | ||||
| linkChữ liên kết | #0068d6 | 5.31:1AA | 3.95:1AA chữ lớn | |
| link-darkChữ liên kết ở chế độ tối | #52a8ff | 2.50:1Dưới AA | 8.40:1AA | |
| toggle-on · toast-success · infoCông tắc bật, thông báo thành công, nền thông tin | #0070f3 | 4.55:1AA | 4.61:1AA | |
| Beta | ||||
| badge-pinkNhãn Beta, chữ trắng | #bd2864 | 5.75:1AA | 3.65:1AA chữ lớn | |
| badge-pink-darkNhãn Beta ở chế độ tối | #b31a57 | 6.56:1AA | 3.20:1AA chữ lớn | |
| Vô hiệu | ||||
| disabled-bgNền vô hiệu | #f2f2f2 | 1.12:1Dưới AA | 18.76:1AA | |
| disabled-fgChữ vô hiệu | #8f8f8f | 3.23:1AA chữ lớn | 6.49:1AA | |
| Xám | ||||
| gray-50Nền | #f2f2f2 | 1.12:1Dưới AA | 18.76:1AA | |
| gray-100Nền khi di chuột | #ebebeb | 1.19:1Dưới AA | 17.62:1AA | |
| gray-200Nền khi nhấn | #e6e6e6 | 1.25:1Dưới AA | 16.83:1AA | |
| gray-300Đường viền | #ebebeb | 1.19:1Dưới AA | 17.62:1AA | |
| gray-800Chữ phụ | #4d4d4d | 8.45:1AA | 2.48:1Dưới AA | |
| gray-900Chữ chính | #171717 | 17.93:1AA | 1.17:1Dưới AA | |
| gray-500 (dark)Chữ phụ ở chế độ tối | #a0a0a0 | 2.61:1Dưới AA | 8.03:1AA | |
| Trạng thái | ||||
| successChấm và nhãn thành công | #45a557 | 3.10:1AA chữ lớn | 6.77:1AA | |
| warningCảnh báo | #f5a623 | 2.03:1Dưới AA | 10.36:1AA | |
| errorLỗi và thao tác xóa | #e5484d | 3.91:1AA chữ lớn | 5.37:1AA | |
Điều khiển bị vô hiệu được miễn yêu cầu tương phản tối thiểu (WCAG 1.4.3) và luôn mang disabled hoặc aria-disabled. #8f8f8f / #f2f2f2 = 2.89:1
Kiểu chữ
Mọi chữ trên giao diện và tài liệu tiếp thị đều dùng Geist Sans. Geist Mono dành cho mã và các giá trị như HEX.
Geist Sans Aa Bb 0123
Geist Mono Aa Bb 0123
Tiêu đề
| Token | Cỡ | Chiều cao dòng | Độ đậm | Khoảng cách chữ |
|---|---|---|---|---|
| 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 |
Nội dung
| Token | Cỡ | Chiều cao dòng |
|---|---|---|
| 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 |
Độ đậm
Độ đậm: 400 cho nội dung, 500 cho nút, 550 để nhấn mạnh, 600 cho tiêu đề và logo. Không dùng 700 trở lên, và bước kiểm tra khi build sẽ chặn lại.
Hệ chữ khác
- Tiếng Hàn, Nhật và Trung dùng phông hệ thống của từng ngôn ngữ sau Geist (tiếng Hàn: Pretendard). Tiêu đề từ 24px trở lên thu khoảng cách -0,02em, từ 20px trở xuống giữ 0.
- Tiêu đề tiếng Thái và tiếng Ả Rập giữ khoảng cách chữ bằng 0 để dấu thanh và nét nối không bị vỡ. Tiêu đề tiếng Thái cỡ 48px và 56px dùng chiều cao dòng 1,2.
- Trang tiếng Ả Rập chạy từ phải sang trái. Logo, giá trị HEX và mã vẫn giữ từ trái sang phải.
Hình khối và khoảng cách
Bo góc
- 6pxĐiều khiển và ô nhập
- 8pxThẻ, popover, menu
- 12pxCửa sổ modal
Đổ bóng
Thẻ dùng đường 1px thay cho bóng, bảng không bao giờ đổ bóng. Bóng chỉ dành cho các lớp nổi:
- Popover và menu0 8px 24px rgba(0,0,0,.12)
- Cửa sổ modal0 16px 48px rgba(0,0,0,.16)
Khoảng cách
Khoảng cách tăng theo bội số của 4px.
Chuyển động
- Phản hồi chỉ đổi màu, độ mờ hoặc bóng. Không có gì phóng to hay dịch chuyển khi nhấn hoặc di chuột.
- Chuyển tiếp kéo dài 150 đến 200ms theo đường cong giảm tốc của Geist.
- Popover và modal hiện ra bằng hiệu ứng mờ dần. Nền không bao giờ bị làm mờ.
- Khi bật giảm chuyển động, mọi chuyển động trở thành hiệu ứng mờ dần đơn giản.
cubic-bezier(0, 0, 0.2, 1)
Liên hệ
Mọi câu hỏi về việc dùng tên hoặc logo Ruda, vui lòng gửi email tới help@rexplore.xyz.