Panoramica
Ruda è uno strumento di tracciamento dei documenti e acquisizione di lead, con CRM integrato, per i team vendite e marketing aziendali.
- Prodotto
- Ruda
- Pubblicato da
- Rexplore Inc.
- Design system
- Vercel Geist
- Caratteri
- Geist Sans, Geist Mono
L'interfaccia di Ruda è costruita sul design system Vercel Geist. Colori, scala tipografica, raggi e animazioni seguono l'originale Geist; quando la nostra implementazione e l'originale non coincidono, vale l'originale.
Geist Sans e Geist Mono di Vercel, con licenza SIL Open Font License 1.1.
Logo
Il logo è il logotipo RUDA, composto in Geist Sans. Non ha simboli né riquadro con l'iniziale.
Regole
- Sempre in maiuscolo: RUDA. Nel testo corrente il prodotto si scrive Ruda.
- Peso 600 (SemiBold). Mai più pesante.
- La spaziatura tra le lettere è fissa a 0.64px a ogni dimensione, quindi il rapporto si riduce man mano che il logotipo cresce.
- Dimensione minima 12px.
- Area di rispetto: lasciare libera su ogni lato almeno un'altezza delle maiuscole (0.71 × corpo).
- Colore: #171717 su fondi chiari, bianco su fondi scuri. Nessun altro colore.
- Gli screen reader leggono il nome come Ruda, non lettera per lettera. Nei testi alternativi, nelle didascalie e nei documenti scrivete Ruda.
- Il logotipo si legge sempre da sinistra a destra, anche nelle pagine in arabo, e non viene mai tradotto né traslitterato.
Dimensioni
| Dimensione | Spaziatura | Rapporto | Esempio |
|---|---|---|---|
| 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 |
Da evitare
ErratoMinuscolo
ErratoMaiuscole e minuscole
ErratoSpaziatura modificata
ErratoCorsivo
ErratoContorno
ErratoOmbra
ErratoSfumatura
ErratoColore fuori brand
ErratoRiquadro con l'iniziale o simbolo
Colore
Prima il neutro. Il nero è il colore del brand, il blu è riservato a link e stati. Il contrasto è calcolato per ogni token su bianco e su nero.
AA significa almeno 4,5:1, sufficiente per il testo corrente. AA testo grande significa almeno 3:1, solo per testo grande ed elementi dell'interfaccia.
| Token | HEX | Su bianco (#ffffff) | Su nero (#000000) | |
|---|---|---|---|---|
| Brand | ||||
| primaryPrimario: pulsanti, logotipo, testo principale | #171717 | 17.93:1AA | 1.17:1Sotto AA | |
| primary (dark)Riempimenti primari in modalità scura | #2e2e2e | 13.58:1AA | 1.55:1Sotto AA | |
| cta (dark)Pulsanti primari in modalità scura | #ededed | 1.17:1Sotto AA | 17.94:1AA | |
| Blu | ||||
| linkTesto dei link | #0068d6 | 5.31:1AA | 3.95:1AA testo grande | |
| link-darkTesto dei link in modalità scura | #52a8ff | 2.50:1Sotto AA | 8.40:1AA | |
| toggle-on · toast-success · infoInterruttore attivo, notifica di successo, riempimento informativo | #0070f3 | 4.55:1AA | 4.61:1AA | |
| Beta | ||||
| badge-pinkBadge Beta, testo bianco | #bd2864 | 5.75:1AA | 3.65:1AA testo grande | |
| badge-pink-darkBadge Beta in modalità scura | #b31a57 | 6.56:1AA | 3.20:1AA testo grande | |
| Disattivato | ||||
| disabled-bgRiempimento disattivato | #f2f2f2 | 1.12:1Sotto AA | 18.76:1AA | |
| disabled-fgTesto disattivato | #8f8f8f | 3.23:1AA testo grande | 6.49:1AA | |
| Grigio | ||||
| gray-50Sfondo | #f2f2f2 | 1.12:1Sotto AA | 18.76:1AA | |
| gray-100Sfondo al passaggio | #ebebeb | 1.19:1Sotto AA | 17.62:1AA | |
| gray-200Sfondo attivo | #e6e6e6 | 1.25:1Sotto AA | 16.83:1AA | |
| gray-300Bordo | #ebebeb | 1.19:1Sotto AA | 17.62:1AA | |
| gray-800Testo secondario | #4d4d4d | 8.45:1AA | 2.48:1Sotto AA | |
| gray-900Testo principale | #171717 | 17.93:1AA | 1.17:1Sotto AA | |
| gray-500 (dark)Testo secondario in modalità scura | #a0a0a0 | 2.61:1Sotto AA | 8.03:1AA | |
| Stato | ||||
| successPunto e badge di successo | #45a557 | 3.10:1AA testo grande | 6.77:1AA | |
| warningAvviso | #f5a623 | 2.03:1Sotto AA | 10.36:1AA | |
| errorErrori e azioni distruttive | #e5484d | 3.91:1AA testo grande | 5.37:1AA | |
I controlli disattivati sono esenti dal contrasto minimo (WCAG 1.4.3) e riportano sempre disabled o aria-disabled. #8f8f8f / #f2f2f2 = 2.89:1
Tipografia
Geist Sans compone ogni testo dell'interfaccia e del marketing. Geist Mono serve per il codice e per valori come gli HEX.
Geist Sans Aa Bb 0123
Geist Mono Aa Bb 0123
Titoli
| Token | Dimensione | Interlinea | Peso | Spaziatura |
|---|---|---|---|---|
| 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 |
Testo
| Token | Dimensione | Interlinea |
|---|---|---|
| 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 |
Peso
Pesi: 400 per il testo, 500 per i pulsanti, 550 per l'enfasi, 600 per titoli e logotipo. 700 e oltre non si usano, e un controllo in fase di build li blocca.
Altri sistemi di scrittura
- Coreano, giapponese e cinese usano, dopo Geist, il carattere di sistema della rispettiva lingua (coreano: Pretendard). I titoli da 24px in su si stringono di -0,02em, quelli fino a 20px restano a 0.
- I titoli in thailandese e arabo mantengono la spaziatura a 0 per non rompere i segni tonali e le legature. I titoli thailandesi da 48px e 56px hanno interlinea 1,2.
- Le pagine in arabo scorrono da destra a sinistra. Logotipo, valori HEX e codice restano da sinistra a destra.
Forme e spazi
Raggio
- 6pxControlli e campi
- 8pxSchede, popover, menu
- 12pxFinestre modali
Ombre
Le schede usano una linea da 1px invece dell'ombra e le tabelle non ne proiettano mai. Le ombre sono riservate ai livelli sospesi:
- Popover e menu0 8px 24px rgba(0,0,0,.12)
- Finestre modali0 16px 48px rgba(0,0,0,.16)
Spaziatura
La spaziatura procede per multipli di 4px.
Animazione
- Il feedback cambia solo colore, opacità od ombra. Nulla si ingrandisce o si sposta quando si preme o si passa sopra.
- Le transizioni durano da 150 a 200ms con la curva di decelerazione Geist.
- Popover e finestre modali appaiono in dissolvenza. Gli sfondi non vengono mai sfocati.
- Con la riduzione del movimento attiva, ogni spostamento diventa una semplice dissolvenza.
cubic-bezier(0, 0, 0.2, 1)
Contatti
Per domande sull'uso del nome o del logotipo Ruda, scrivete a help@rexplore.xyz.