Présentation
Ruda est un outil de suivi de documents et de capture de leads, doté d'un CRM intégré, pour les équipes commerciales et marketing des entreprises.
- Produit
- Ruda
- Éditeur
- Rexplore Inc.
- Système de design
- Vercel Geist
- Polices
- Geist Sans, Geist Mono
L'interface de Ruda repose sur le système de design Vercel Geist. Couleurs, échelle typographique, arrondis et animations suivent l'original Geist ; si notre mise en œuvre s'en écarte, c'est l'original qui fait foi.
Geist Sans et Geist Mono, de Vercel, sous licence SIL Open Font License 1.1.
Logo
Le logo est le logotype RUDA, composé en Geist Sans. Il n'a ni symbole ni cadre d'initiale.
Règles
- Toujours en capitales : RUDA. Dans le texte courant, le produit s'écrit Ruda.
- Graisse 600 (SemiBold). Jamais plus gras.
- L'interlettrage est fixé à 0.64px quelle que soit la taille : plus le logotype grandit, plus le rapport diminue.
- Taille minimale : 12px.
- Zone de protection : laissez au moins une hauteur de capitale (0.71 × corps) libre de chaque côté.
- Couleur : #171717 sur fond clair, blanc sur fond sombre. Aucune autre couleur.
- Les lecteurs d'écran annoncent le nom « Ruda », pas lettre par lettre. Dans les textes alternatifs, légendes et documents, écrivez Ruda.
- Le logotype se lit toujours de gauche à droite, y compris sur les pages en arabe, et n'est jamais traduit ni translittéré.
Tailles
| Taille | Interlettrage | Rapport | Exemple |
|---|---|---|---|
| 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 |
À éviter
IncorrectMinuscules
IncorrectCasse mixte
IncorrectInterlettrage modifié
IncorrectItalique
IncorrectContour
IncorrectOmbre
IncorrectDégradé
IncorrectCouleur hors charte
IncorrectCadre d'initiale ou symbole
Couleur
Le neutre d'abord. Le noir est la couleur de la marque, le bleu est réservé aux liens et aux états. Le contraste est calculé pour chaque jeton sur blanc et sur noir.
AA signifie 4,5:1 ou plus, suffisant pour le texte courant. AA grand texte signifie 3:1 ou plus, réservé aux grands textes et aux éléments d'interface.
| Jeton | HEX | Sur blanc (#ffffff) | Sur noir (#000000) | |
|---|---|---|---|---|
| Marque | ||||
| primaryPrincipale : boutons, logotype, texte principal | #171717 | 17.93:1AA | 1.17:1Sous AA | |
| primary (dark)Aplats principaux en mode sombre | #2e2e2e | 13.58:1AA | 1.55:1Sous AA | |
| cta (dark)Boutons principaux en mode sombre | #ededed | 1.17:1Sous AA | 17.94:1AA | |
| Bleu | ||||
| linkTexte des liens | #0068d6 | 5.31:1AA | 3.95:1AA grand texte | |
| link-darkTexte des liens en mode sombre | #52a8ff | 2.50:1Sous AA | 8.40:1AA | |
| toggle-on · toast-success · infoInterrupteur activé, notification de succès, aplat d'information | #0070f3 | 4.55:1AA | 4.61:1AA | |
| Bêta | ||||
| badge-pinkBadge Bêta, texte blanc | #bd2864 | 5.75:1AA | 3.65:1AA grand texte | |
| badge-pink-darkBadge Bêta en mode sombre | #b31a57 | 6.56:1AA | 3.20:1AA grand texte | |
| Désactivé | ||||
| disabled-bgAplat désactivé | #f2f2f2 | 1.12:1Sous AA | 18.76:1AA | |
| disabled-fgTexte désactivé | #8f8f8f | 3.23:1AA grand texte | 6.49:1AA | |
| Gris | ||||
| gray-50Arrière-plan | #f2f2f2 | 1.12:1Sous AA | 18.76:1AA | |
| gray-100Arrière-plan au survol | #ebebeb | 1.19:1Sous AA | 17.62:1AA | |
| gray-200Arrière-plan actif | #e6e6e6 | 1.25:1Sous AA | 16.83:1AA | |
| gray-300Bordure | #ebebeb | 1.19:1Sous AA | 17.62:1AA | |
| gray-800Texte secondaire | #4d4d4d | 8.45:1AA | 2.48:1Sous AA | |
| gray-900Texte principal | #171717 | 17.93:1AA | 1.17:1Sous AA | |
| gray-500 (dark)Texte secondaire en mode sombre | #a0a0a0 | 2.61:1Sous AA | 8.03:1AA | |
| États | ||||
| successPastille et badge de succès | #45a557 | 3.10:1AA grand texte | 6.77:1AA | |
| warningAvertissement | #f5a623 | 2.03:1Sous AA | 10.36:1AA | |
| errorErreurs et actions destructives | #e5484d | 3.91:1AA grand texte | 5.37:1AA | |
Les commandes désactivées sont exemptées du contraste minimal (WCAG 1.4.3) et portent toujours disabled ou aria-disabled. #8f8f8f / #f2f2f2 = 2.89:1
Typographie
Geist Sans compose tous les textes de l'interface et du marketing. Geist Mono sert au code et aux valeurs comme les HEX.
Geist Sans Aa Bb 0123
Geist Mono Aa Bb 0123
Titres
| Jeton | Taille | Interligne | Graisse | Interlettrage |
|---|---|---|---|---|
| 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 |
Texte
| Jeton | Taille | Interligne |
|---|---|---|
| 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 |
Graisse
Graisses : 400 pour le texte, 500 pour les boutons, 550 pour la mise en valeur, 600 pour les titres et le logotype. 700 et au-delà ne sont pas utilisés, et une vérification au build les refuse.
Autres écritures
- Le coréen, le japonais et le chinois utilisent, après Geist, la police système propre à chaque langue (coréen : Pretendard). Les titres de 24px et plus se resserrent de -0,02em, ceux de 20px et moins restent à 0.
- Les titres en thaï et en arabe gardent un interlettrage nul pour préserver les signes de ton et les liaisons. Les titres thaïs de 48px et 56px ont un interligne de 1,2.
- Les pages en arabe se lisent de droite à gauche. Le logotype, les valeurs HEX et le code restent de gauche à droite.
Formes et espacement
Arrondis
- 6pxCommandes et champs
- 8pxCartes, popovers, menus
- 12pxFenêtres modales
Ombres
Les cartes se délimitent par un filet de 1px plutôt que par une ombre, et les tableaux n'en portent jamais. Les ombres sont réservées aux calques flottants :
- Popovers et menus0 8px 24px rgba(0,0,0,.12)
- Fenêtres modales0 16px 48px rgba(0,0,0,.16)
Espacement
L'espacement suit des multiples de 4px.
Animation
- Le retour visuel ne change que la couleur, l'opacité ou l'ombre. Rien ne grossit ni ne se déplace au clic ou au survol.
- Les transitions durent de 150 à 200ms, sur la courbe de décélération Geist.
- Les popovers et fenêtres modales apparaissent en fondu. Les arrière-plans ne sont jamais floutés.
- Si la réduction des animations est activée, tout mouvement devient un simple fondu.
cubic-bezier(0, 0, 0.2, 1)
Contact
Pour toute question sur l'utilisation du nom ou du logotype Ruda, écrivez à help@rexplore.xyz.