Ringkasan
Ruda adalah alat pelacakan dokumen dan penjaringan prospek dengan CRM bawaan untuk tim penjualan dan pemasaran korporat.
- Produk
- Ruda
- Diterbitkan oleh
- Rexplore Inc.
- Sistem desain
- Vercel Geist
- Font
- Geist Sans, Geist Mono
Antarmuka Ruda dibangun di atas sistem desain Vercel Geist. Warna, skala ukuran teks, radius sudut, dan gerakan mengikuti versi asli Geist, dan bila implementasi kami berbeda dari aslinya, yang asli yang berlaku.
Geist Sans dan Geist Mono dari Vercel, berlisensi SIL Open Font License 1.1.
Logo
Logo adalah logo teks RUDA yang disusun dengan Geist Sans. Tidak ada simbol dan tidak ada kotak huruf awal.
Aturan
- Selalu huruf kapital: RUDA. Di dalam kalimat, nama produk ditulis Ruda.
- Ketebalan 600 (SemiBold). Tidak pernah lebih tebal.
- Jarak antarhuruf tetap 0.64px di semua ukuran, sehingga rasionya mengecil saat logo membesar.
- Ukuran minimum 12px.
- Ruang bebas: sisakan setidaknya satu tinggi huruf kapital (0.71 × ukuran font) di setiap sisi.
- Warna: #171717 di latar terang, putih di latar gelap. Tidak ada warna lain.
- Pembaca layar mengucapkan nama ini sebagai Ruda, bukan huruf per huruf. Di teks alternatif, keterangan gambar, dan dokumen, tulis Ruda.
- Logo selalu dibaca dari kiri ke kanan, juga di halaman berbahasa Arab, dan tidak pernah diterjemahkan atau ditransliterasi.
Ukuran
| Ukuran | Jarak antarhuruf | Rasio | 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 campuran
SalahJarak antarhuruf diubah
SalahMiring
SalahGaris tepi
SalahBayangan
SalahGradasi
SalahWarna di luar merek
SalahKotak huruf awal atau simbol
Warna
Netral lebih dulu. Hitam adalah warna merek, dan biru khusus untuk tautan dan status. Kontras dihitung untuk setiap token terhadap putih dan hitam.
AA berarti 4,5:1 atau lebih, cukup untuk teks isi. AA teks besar berarti 3:1 atau lebih, hanya untuk teks besar dan elemen antarmuka.
| Token | HEX | Di atas putih (#ffffff) | Di atas hitam (#000000) | |
|---|---|---|---|---|
| Merek | ||||
| primaryUtama: tombol, logo teks, teks utama | #171717 | 17.93:1AA | 1.17:1Di bawah AA | |
| primary (dark)Isian utama di mode gelap | #2e2e2e | 13.58:1AA | 1.55:1Di bawah AA | |
| cta (dark)Tombol utama di mode gelap | #ededed | 1.17:1Di bawah AA | 17.94:1AA | |
| Biru | ||||
| linkTeks tautan | #0068d6 | 5.31:1AA | 3.95:1AA teks besar | |
| link-darkTeks tautan di mode gelap | #52a8ff | 2.50:1Di bawah AA | 8.40:1AA | |
| toggle-on · toast-success · infoSakelar aktif, notifikasi berhasil, isian informasi | #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 di mode gelap | #b31a57 | 6.56:1AA | 3.20:1AA teks besar | |
| Nonaktif | ||||
| disabled-bgIsian nonaktif | #f2f2f2 | 1.12:1Di bawah AA | 18.76:1AA | |
| disabled-fgTeks nonaktif | #8f8f8f | 3.23:1AA teks besar | 6.49:1AA | |
| Abu-abu | ||||
| gray-50Latar | #f2f2f2 | 1.12:1Di bawah AA | 18.76:1AA | |
| gray-100Latar saat disorot | #ebebeb | 1.19:1Di bawah AA | 17.62:1AA | |
| gray-200Latar saat ditekan | #e6e6e6 | 1.25:1Di bawah AA | 16.83:1AA | |
| gray-300Garis tepi | #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 di mode gelap | #a0a0a0 | 2.61:1Di bawah AA | 8.03:1AA | |
| Status | ||||
| successTitik dan lencana berhasil | #45a557 | 3.10:1AA teks besar | 6.77:1AA | |
| warningPeringatan | #f5a623 | 2.03:1Di bawah AA | 10.36:1AA | |
| errorGalat dan tindakan menghapus | #e5484d | 3.91:1AA teks besar | 5.37:1AA | |
Kontrol nonaktif dikecualikan dari kontras minimum (WCAG 1.4.3) dan selalu membawa disabled atau aria-disabled. #8f8f8f / #f2f2f2 = 2.89:1
Tipografi
Semua teks antarmuka dan pemasaran memakai Geist Sans. Geist Mono untuk kode dan nilai seperti HEX.
Geist Sans Aa Bb 0123
Geist Mono Aa Bb 0123
Judul
| Token | Ukuran | Tinggi baris | Ketebalan | Jarak antarhuruf |
|---|---|---|---|---|
| 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 | Ukuran | 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 tombol, 550 untuk penekanan, 600 untuk judul dan logo teks. 700 ke atas tidak dipakai, dan pemeriksaan saat build menolaknya.
Aksara lain
- Bahasa Korea, Jepang, dan Tionghoa memakai font sistem masing-masing bahasa setelah Geist (Korea: Pretendard). Judul 24px ke atas dirapatkan -0,02em, 20px ke bawah tetap 0.
- Judul berbahasa Thai dan Arab menjaga jarak antarhuruf 0 agar tanda nada dan sambungan huruf tidak rusak. Judul Thai berukuran 48px dan 56px memakai tinggi baris 1,2.
- Halaman berbahasa Arab mengalir dari kanan ke kiri. Logo teks, nilai HEX, dan kode tetap dari kiri ke kanan.
Bentuk dan ruang
Radius sudut
- 6pxKontrol dan kolom isian
- 8pxKartu, popover, menu
- 12pxJendela modal
Bayangan
Kartu memakai garis 1px, bukan bayangan, dan tabel tidak pernah berbayang. Bayangan hanya untuk lapisan yang mengambang:
- Popover dan menu0 8px 24px rgba(0,0,0,.12)
- Jendela modal0 16px 48px rgba(0,0,0,.16)
Jarak
Jarak bertambah dalam kelipatan 4px.
Gerakan
- Umpan balik hanya mengubah warna, opasitas, atau bayangan. Tidak ada yang membesar atau bergeser saat ditekan atau disorot.
- Transisi berlangsung 150 sampai 200ms dengan kurva perlambatan Geist.
- Popover dan modal muncul dengan efek memudar. Latar tidak pernah diburamkan.
- Saat kurangi gerakan aktif, setiap gerakan berubah menjadi efek memudar sederhana.
cubic-bezier(0, 0, 0.2, 1)
Kontak
Untuk pertanyaan tentang penggunaan nama atau logo teks Ruda, kirim email ke help@rexplore.xyz.