Genel bakış
Ruda, kurumsal satış ve pazarlama ekipleri için yerleşik CRM içeren bir belge takibi ve müşteri adayı toplama aracıdır.
- Ürün
- Ruda
- Yayıncı
- Rexplore Inc.
- Tasarım sistemi
- Vercel Geist
- Yazı tipleri
- Geist Sans, Geist Mono
Ruda arayüzü Vercel Geist tasarım sistemi üzerine kuruludur. Renk, yazı ölçeği, köşe yuvarlaklığı ve hareket Geist'in aslını izler; uygulamamız ile asıl arasında fark olursa asıl geçerlidir.
Vercel'in Geist Sans ve Geist Mono yazı tipleri, SIL Open Font License 1.1 lisansıyla.
Logo
Logo, Geist Sans ile dizilmiş RUDA yazı logosudur. Sembol ya da baş harf kutusu yoktur.
Kurallar
- Her zaman büyük harfle: RUDA. Metin içinde ürün adı Ruda olarak yazılır.
- Kalınlık 600 (SemiBold). Asla daha kalın değil.
- Harf aralığı her boyutta 0.64px olarak sabittir; bu yüzden logo büyüdükçe oran küçülür.
- En küçük boyut 12px.
- Boşluk alanı: her kenarda en az bir büyük harf yüksekliği (0.71 × yazı boyutu) boş bırakın.
- Renk: açık zeminde #171717, koyu zeminde beyaz. Başka renk kullanılmaz.
- Ekran okuyucular adı harf harf değil, Ruda olarak okur. Alternatif metinlerde, açıklamalarda ve belgelerde Ruda yazın.
- Yazı logosu Arapça sayfalarda da dahil her zaman soldan sağa okunur; asla çevrilmez veya başka alfabeye aktarılmaz.
Boyutlar
| Boyut | Harf aralığı | Oran | Örnek |
|---|---|---|---|
| 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 |
Yapılmaması gerekenler
YanlışKüçük harf
YanlışKarışık harf
YanlışDeğiştirilmiş harf aralığı
Yanlışİtalik
YanlışDış çizgi
YanlışGölge
YanlışRenk geçişi
YanlışMarka dışı renk
YanlışBaş harf kutusu veya sembol
Renk
Önce nötr. Siyah marka rengidir, mavi yalnızca bağlantılar ve durumlar içindir. Kontrast her token için beyaza ve siyaha karşı hesaplanır.
AA, 4,5:1 veya üzeridir ve gövde metni için yeterlidir. AA büyük metin, 3:1 veya üzeridir ve yalnızca büyük metin ile arayüz öğeleri içindir.
| Token | HEX | Beyaz üstünde (#ffffff) | Siyah üstünde (#000000) | |
|---|---|---|---|---|
| Marka | ||||
| primaryAna renk: düğmeler, yazı logosu, ana metin | #171717 | 17.93:1AA | 1.17:1AA altında | |
| primary (dark)Koyu modda ana dolgular | #2e2e2e | 13.58:1AA | 1.55:1AA altında | |
| cta (dark)Koyu modda ana düğmeler | #ededed | 1.17:1AA altında | 17.94:1AA | |
| Mavi | ||||
| linkBağlantı metni | #0068d6 | 5.31:1AA | 3.95:1AA büyük metin | |
| link-darkKoyu modda bağlantı metni | #52a8ff | 2.50:1AA altında | 8.40:1AA | |
| toggle-on · toast-success · infoAçık anahtar, başarı bildirimi, bilgi dolgusu | #0070f3 | 4.55:1AA | 4.61:1AA | |
| Beta | ||||
| badge-pinkBeta rozeti, beyaz metinle | #bd2864 | 5.75:1AA | 3.65:1AA büyük metin | |
| badge-pink-darkKoyu modda Beta rozeti | #b31a57 | 6.56:1AA | 3.20:1AA büyük metin | |
| Devre dışı | ||||
| disabled-bgDevre dışı dolgu | #f2f2f2 | 1.12:1AA altında | 18.76:1AA | |
| disabled-fgDevre dışı metin | #8f8f8f | 3.23:1AA büyük metin | 6.49:1AA | |
| Gri | ||||
| gray-50Arka plan | #f2f2f2 | 1.12:1AA altında | 18.76:1AA | |
| gray-100Üzerine gelince arka plan | #ebebeb | 1.19:1AA altında | 17.62:1AA | |
| gray-200Etkin arka plan | #e6e6e6 | 1.25:1AA altında | 16.83:1AA | |
| gray-300Kenarlık | #ebebeb | 1.19:1AA altında | 17.62:1AA | |
| gray-800İkincil metin | #4d4d4d | 8.45:1AA | 2.48:1AA altında | |
| gray-900Ana metin | #171717 | 17.93:1AA | 1.17:1AA altında | |
| gray-500 (dark)Koyu modda ikincil metin | #a0a0a0 | 2.61:1AA altında | 8.03:1AA | |
| Durum | ||||
| successBaşarı noktası ve rozeti | #45a557 | 3.10:1AA büyük metin | 6.77:1AA | |
| warningUyarı | #f5a623 | 2.03:1AA altında | 10.36:1AA | |
| errorHatalar ve geri alınamayan işlemler | #e5484d | 3.91:1AA büyük metin | 5.37:1AA | |
Devre dışı denetimler en düşük kontrast şartından muaftır (WCAG 1.4.3) ve her zaman disabled veya aria-disabled taşır. #8f8f8f / #f2f2f2 = 2.89:1
Tipografi
Arayüzdeki ve pazarlamadaki tüm metinler Geist Sans ile dizilir. Geist Mono, kod ve HEX gibi değerler içindir.
Geist Sans Aa Bb 0123
Geist Mono Aa Bb 0123
Başlıklar
| Token | Boyut | Satır yüksekliği | Kalınlık | Harf aralığı |
|---|---|---|---|---|
| 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 |
Metin
| Token | Boyut | Satır yüksekliği |
|---|---|---|
| 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 |
Kalınlık
Kalınlıklar: metin için 400, düğmeler için 500, vurgu için 550, başlıklar ve yazı logosu için 600. 700 ve üzeri kullanılmaz; derleme denetimi bunları reddeder.
Diğer yazı sistemleri
- Korece, Japonca ve Çince, Geist'ten sonra kendi dillerinin sistem yazı tipine geçer (Korece: Pretendard). 24px ve üzeri başlıklarda harf aralığı -0,02em, 20px ve altında 0'dır.
- Tayca ve Arapça başlıklar, ton işaretleri ve harf bağlantıları bozulmasın diye harf aralığını 0'da tutar. 48px ve 56px Tayca başlıklar 1,2 satır yüksekliği kullanır.
- Arapça sayfalar sağdan sola akar. Yazı logosu, HEX değerleri ve kod soldan sağa kalır.
Biçim ve boşluk
Köşe yuvarlaklığı
- 6pxDenetimler ve giriş alanları
- 8pxKartlar, açılır pencereler, menüler
- 12pxModal pencereler
Gölge
Kartlar gölge yerine 1px çizgi kullanır, tablolar hiç gölge düşürmez. Gölgeler yalnızca yüzen katmanlar içindir:
- Açılır pencereler ve menüler0 8px 24px rgba(0,0,0,.12)
- Modal pencereler0 16px 48px rgba(0,0,0,.16)
Boşluk
Boşluklar 4px'in katlarıyla ilerler.
Hareket
- Geri bildirim yalnızca rengi, opaklığı veya gölgeyi değiştirir. Basıldığında ya da üzerine gelindiğinde hiçbir şey büyümez veya kaymaz.
- Geçişler Geist yavaşlama eğrisiyle 150 ile 200ms arasında sürer.
- Açılır pencereler ve modal pencereler yumuşak geçişle görünür. Arka planlar asla bulanıklaştırılmaz.
- Hareketi azalt ayarı açıkken tüm hareketler basit bir yumuşak geçişe dönüşür.
cubic-bezier(0, 0, 0.2, 1)
İletişim
Ruda adının veya yazı logosunun kullanımıyla ilgili sorularınız için help@rexplore.xyz adresine yazın.