Overzicht
Ruda is een tool voor documenttracking en leadgeneratie met een ingebouwde CRM voor zakelijke sales- en marketingteams.
- Product
- Ruda
- Uitgegeven door
- Rexplore Inc.
- Designsysteem
- Vercel Geist
- Lettertypen
- Geist Sans, Geist Mono
De interface van Ruda is gebouwd op het Vercel Geist designsysteem. Kleur, typeschaal, afronding en beweging volgen het Geist-origineel. Wijkt onze uitvoering af van het origineel, dan geldt het origineel.
Geist Sans en Geist Mono van Vercel, gelicentieerd onder de SIL Open Font License 1.1.
Logo
Het logo is het woordmerk RUDA, gezet in Geist Sans. Er is geen symbool en geen kader met initiaal.
Regels
- Altijd in hoofdletters: RUDA. In lopende tekst schrijf je de productnaam als Ruda.
- Gewicht 600 (SemiBold). Nooit zwaarder.
- De letterafstand staat op elke grootte vast op 0.64px, dus de verhouding wordt kleiner naarmate het woordmerk groeit.
- Minimale grootte 12px.
- Vrije ruimte: houd aan elke kant minstens één kapitaalhoogte (0.71 × lettergrootte) vrij.
- Kleur: #171717 op lichte vlakken, wit op donkere vlakken. Geen andere kleuren.
- Schermlezers spreken de naam uit als Ruda, niet letter voor letter. Schrijf Ruda in alt-teksten, bijschriften en documenten.
- Het woordmerk leest altijd van links naar rechts, ook op Arabische pagina's, en wordt nooit vertaald of getranslitereerd.
Groottes
| Grootte | Letterafstand | Verhouding | Voorbeeld |
|---|---|---|---|
| 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 |
Niet doen
OnjuistKleine letters
OnjuistGemengde letters
OnjuistGewijzigde letterafstand
OnjuistCursief
OnjuistOmlijning
OnjuistSchaduw
OnjuistVerloop
OnjuistKleur buiten het merk
OnjuistKader met initiaal of symbool
Kleur
Neutraal eerst. Zwart is de merkkleur en blauw is voorbehouden aan links en statussen. Het contrast is per token berekend tegen wit en zwart.
AA betekent 4,5:1 of meer, genoeg voor lopende tekst. AA groot betekent 3:1 of meer, alleen voor grote tekst en interface-elementen.
| Token | HEX | Op wit (#ffffff) | Op zwart (#000000) | |
|---|---|---|---|---|
| Merk | ||||
| primaryPrimair: knoppen, woordmerk, hoofdtekst | #171717 | 17.93:1AA | 1.17:1Onder AA | |
| primary (dark)Primaire vlakken in donkere modus | #2e2e2e | 13.58:1AA | 1.55:1Onder AA | |
| cta (dark)Primaire knoppen in donkere modus | #ededed | 1.17:1Onder AA | 17.94:1AA | |
| Blauw | ||||
| linkLinktekst | #0068d6 | 5.31:1AA | 3.95:1AA groot | |
| link-darkLinktekst in donkere modus | #52a8ff | 2.50:1Onder AA | 8.40:1AA | |
| toggle-on · toast-success · infoSchakelaar aan, succesmelding, infovlak | #0070f3 | 4.55:1AA | 4.61:1AA | |
| Bèta | ||||
| badge-pinkBèta-badge met witte tekst | #bd2864 | 5.75:1AA | 3.65:1AA groot | |
| badge-pink-darkBèta-badge in donkere modus | #b31a57 | 6.56:1AA | 3.20:1AA groot | |
| Uitgeschakeld | ||||
| disabled-bgUitgeschakeld vlak | #f2f2f2 | 1.12:1Onder AA | 18.76:1AA | |
| disabled-fgUitgeschakelde tekst | #8f8f8f | 3.23:1AA groot | 6.49:1AA | |
| Grijs | ||||
| gray-50Achtergrond | #f2f2f2 | 1.12:1Onder AA | 18.76:1AA | |
| gray-100Achtergrond bij hover | #ebebeb | 1.19:1Onder AA | 17.62:1AA | |
| gray-200Actieve achtergrond | #e6e6e6 | 1.25:1Onder AA | 16.83:1AA | |
| gray-300Rand | #ebebeb | 1.19:1Onder AA | 17.62:1AA | |
| gray-800Secundaire tekst | #4d4d4d | 8.45:1AA | 2.48:1Onder AA | |
| gray-900Hoofdtekst | #171717 | 17.93:1AA | 1.17:1Onder AA | |
| gray-500 (dark)Secundaire tekst in donkere modus | #a0a0a0 | 2.61:1Onder AA | 8.03:1AA | |
| Status | ||||
| successSuccesbolletje en badge | #45a557 | 3.10:1AA groot | 6.77:1AA | |
| warningWaarschuwing | #f5a623 | 2.03:1Onder AA | 10.36:1AA | |
| errorFouten en destructieve acties | #e5484d | 3.91:1AA groot | 5.37:1AA | |
Uitgeschakelde bedieningselementen zijn vrijgesteld van het minimumcontrast (WCAG 1.4.3) en dragen altijd disabled of aria-disabled. #8f8f8f / #f2f2f2 = 2.89:1
Typografie
Geist Sans zet alle tekst in de interface en de marketing. Geist Mono is voor code en waarden zoals HEX.
Geist Sans Aa Bb 0123
Geist Mono Aa Bb 0123
Koppen
| Token | Grootte | Regelhoogte | Gewicht | Letterafstand |
|---|---|---|---|---|
| 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 |
Tekst
| Token | Grootte | Regelhoogte |
|---|---|---|
| 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 |
Gewicht
Gewichten: 400 voor tekst, 500 voor knoppen, 550 voor nadruk, 600 voor koppen en het woordmerk. 700 en zwaarder worden niet gebruikt, en een buildcontrole weigert ze.
Andere schriften
- Koreaans, Japans en Chinees vallen na Geist terug op het systeemlettertype van de eigen taal (Koreaans: Pretendard). Koppen vanaf 24px krijgen -0,02em, koppen tot 20px blijven op 0.
- Thaise en Arabische koppen houden de letterafstand op 0, zodat toontekens en verbindingen heel blijven. Thaise koppen van 48px en 56px hebben regelhoogte 1,2.
- Arabische pagina's lopen van rechts naar links. Het woordmerk, HEX-waarden en code blijven van links naar rechts.
Vorm en ruimte
Afronding
- 6pxBedieningselementen en invoervelden
- 8pxKaarten, popovers, menu's
- 12pxDialoogvensters
Schaduw
Kaarten gebruiken een lijn van 1px in plaats van een schaduw, en tabellen werpen er nooit een. Schaduwen zijn er alleen voor zwevende lagen:
- Popovers en menu's0 8px 24px rgba(0,0,0,.12)
- Dialoogvensters0 16px 48px rgba(0,0,0,.16)
Afstand
Afstanden gaan in veelvouden van 4px.
Beweging
- Feedback verandert alleen kleur, dekking of schaduw. Niets wordt groter of verschuift bij klikken of hoveren.
- Overgangen duren 150 tot 200ms op de Geist-vertragingscurve.
- Popovers en dialoogvensters verschijnen met een overvloeiing. Achtergronden worden nooit vervaagd.
- Staat beperkte beweging aan, dan wordt elke beweging een eenvoudige overvloeiing.
cubic-bezier(0, 0, 0.2, 1)
Contact
Vragen over het gebruik van de naam of het woordmerk Ruda? Mail naar help@rexplore.xyz.