Gambaran keseluruhan
Ruda ialah alat penjejakan dokumen dan pengumpulan prospek dengan CRM terbina dalam untuk pasukan jualan dan pemasaran korporat.
- Produk
- Ruda
- Diterbitkan oleh
- Rexplore Inc.
- Sistem reka bentuk
- Vercel Geist
- Fon
- Geist Sans, Geist Mono
Antara muka Ruda dibina di atas sistem reka bentuk Vercel Geist. Warna, skala saiz teks, jejari sudut dan gerakan mengikut versi asal Geist, dan jika pelaksanaan kami berbeza daripada yang asal, versi asal diguna pakai.
Geist Sans dan Geist Mono oleh Vercel, dilesenkan di bawah SIL Open Font License 1.1.
Logo
Logo ialah tanda kata RUDA yang ditulis dengan Geist Sans. Tiada simbol dan tiada kotak huruf awal.
Peraturan
- Sentiasa huruf besar: RUDA. Dalam ayat, nama produk ditulis Ruda.
- Ketebalan 600 (SemiBold). Tidak lebih tebal.
- Jarak huruf ditetapkan pada 0.64px untuk semua saiz, jadi nisbahnya mengecil apabila tanda kata membesar.
- Saiz minimum 12px.
- Ruang kosong: kosongkan sekurang-kurangnya satu ketinggian huruf besar (0.71 × saiz fon) pada setiap sisi.
- Warna: #171717 pada latar cerah, putih pada latar gelap. Tiada warna lain.
- Pembaca skrin menyebut nama ini sebagai Ruda, bukan huruf demi huruf. Dalam teks alternatif, kapsyen dan dokumen, tulis Ruda.
- Tanda kata sentiasa dibaca dari kiri ke kanan, termasuk pada halaman bahasa Arab, dan tidak pernah diterjemah atau ditransliterasi.
Saiz
| Saiz | Jarak huruf | Nisbah | Contoh |
|---|---|---|---|
| 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 |
Jangan
SalahHuruf kecil
SalahHuruf bercampur
SalahJarak huruf diubah
SalahCondong
SalahGaris luar
SalahBayang
SalahGradien
SalahWarna luar jenama
SalahKotak huruf awal atau simbol
Warna
Neutral dahulu. Hitam ialah warna jenama, dan biru dikhaskan untuk pautan dan keadaan. Kontras dikira bagi setiap token berbanding putih dan hitam.
AA bermaksud 4.5:1 atau lebih, cukup untuk teks isi. AA teks besar bermaksud 3:1 atau lebih, hanya untuk teks besar dan elemen antara muka.
| Token | HEX | Pada putih (#ffffff) | Pada hitam (#000000) | |
|---|---|---|---|---|
| Jenama | ||||
| primaryUtama: butang, tanda kata, teks utama | #171717 | 17.93:1AA | 1.17:1Di bawah AA | |
| primary (dark)Isian utama dalam mod gelap | #2e2e2e | 13.58:1AA | 1.55:1Di bawah AA | |
| cta (dark)Butang utama dalam mod gelap | #ededed | 1.17:1Di bawah AA | 17.94:1AA | |
| Biru | ||||
| linkTeks pautan | #0068d6 | 5.31:1AA | 3.95:1AA teks besar | |
| link-darkTeks pautan dalam mod gelap | #52a8ff | 2.50:1Di bawah AA | 8.40:1AA | |
| toggle-on · toast-success · infoSuis hidup, pemberitahuan berjaya, isian maklumat | #0070f3 | 4.55:1AA | 4.61:1AA | |
| Beta | ||||
| badge-pinkLencana Beta, teks putih | #bd2864 | 5.75:1AA | 3.65:1AA teks besar | |
| badge-pink-darkLencana Beta dalam mod gelap | #b31a57 | 6.56:1AA | 3.20:1AA teks besar | |
| Dinyahdayakan | ||||
| disabled-bgIsian dinyahdayakan | #f2f2f2 | 1.12:1Di bawah AA | 18.76:1AA | |
| disabled-fgTeks dinyahdayakan | #8f8f8f | 3.23:1AA teks besar | 6.49:1AA | |
| Kelabu | ||||
| gray-50Latar | #f2f2f2 | 1.12:1Di bawah AA | 18.76:1AA | |
| gray-100Latar semasa tuding | #ebebeb | 1.19:1Di bawah AA | 17.62:1AA | |
| gray-200Latar aktif | #e6e6e6 | 1.25:1Di bawah AA | 16.83:1AA | |
| gray-300Sempadan | #ebebeb | 1.19:1Di bawah AA | 17.62:1AA | |
| gray-800Teks sekunder | #4d4d4d | 8.45:1AA | 2.48:1Di bawah AA | |
| gray-900Teks utama | #171717 | 17.93:1AA | 1.17:1Di bawah AA | |
| gray-500 (dark)Teks sekunder dalam mod gelap | #a0a0a0 | 2.61:1Di bawah AA | 8.03:1AA | |
| Status | ||||
| successTitik dan lencana berjaya | #45a557 | 3.10:1AA teks besar | 6.77:1AA | |
| warningAmaran | #f5a623 | 2.03:1Di bawah AA | 10.36:1AA | |
| errorRalat dan tindakan memadam | #e5484d | 3.91:1AA teks besar | 5.37:1AA | |
Kawalan yang dinyahdayakan dikecualikan daripada kontras minimum (WCAG 1.4.3) dan sentiasa membawa disabled atau aria-disabled. #8f8f8f / #f2f2f2 = 2.89:1
Tipografi
Geist Sans digunakan untuk semua teks antara muka dan pemasaran. Geist Mono untuk kod dan nilai seperti HEX.
Geist Sans Aa Bb 0123
Geist Mono Aa Bb 0123
Tajuk
| Token | Saiz | Tinggi baris | Ketebalan | Jarak huruf |
|---|---|---|---|---|
| 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 |
Teks
| Token | Saiz | Tinggi baris |
|---|---|---|
| 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 |
Ketebalan
Ketebalan: 400 untuk teks, 500 untuk butang, 550 untuk penegasan, 600 untuk tajuk dan tanda kata. 700 ke atas tidak digunakan, dan semakan semasa build menolaknya.
Sistem tulisan lain
- Bahasa Korea, Jepun dan Cina menggunakan fon sistem bahasa masing-masing selepas Geist (Korea: Pretendard). Tajuk 24px ke atas dirapatkan -0.02em, 20px ke bawah kekal 0.
- Tajuk bahasa Thai dan Arab mengekalkan jarak huruf 0 supaya tanda nada dan sambungan huruf tidak rosak. Tajuk Thai bersaiz 48px dan 56px menggunakan tinggi baris 1.2.
- Halaman bahasa Arab mengalir dari kanan ke kiri. Tanda kata, nilai HEX dan kod kekal dari kiri ke kanan.
Bentuk dan ruang
Jejari sudut
- 6pxKawalan dan medan input
- 8pxKad, popover, menu
- 12pxTetingkap modal
Bayang
Kad menggunakan garis 1px, bukan bayang, dan jadual tidak pernah berbayang. Bayang hanya untuk lapisan terapung:
- Popover dan menu0 8px 24px rgba(0,0,0,.12)
- Tetingkap modal0 16px 48px rgba(0,0,0,.16)
Jarak
Jarak meningkat dalam gandaan 4px.
Gerakan
- Maklum balas hanya menukar warna, kelegapan atau bayang. Tiada apa yang membesar atau beralih apabila ditekan atau dituding.
- Peralihan mengambil masa 150 hingga 200ms pada lengkung nyahpecutan Geist.
- Popover dan modal muncul secara pudar silang. Latar tidak pernah dikaburkan.
- Apabila kurangkan gerakan dihidupkan, setiap gerakan menjadi pudar ringkas.
cubic-bezier(0, 0, 0.2, 1)
Hubungi
Untuk soalan tentang penggunaan nama atau tanda kata Ruda, e-mel help@rexplore.xyz.