Überblick
Ruda ist ein Tool für Dokument-Tracking und Lead-Erfassung mit integriertem CRM für Vertriebs- und Marketingteams in Unternehmen.
- Produkt
- Ruda
- Herausgeber
- Rexplore Inc.
- Designsystem
- Vercel Geist
- Schriften
- Geist Sans, Geist Mono
Die Oberfläche von Ruda basiert auf dem Vercel Geist Designsystem. Farben, Schriftgrößen, Eckenradien und Bewegung folgen dem Geist-Original. Weichen unsere Umsetzung und das Original voneinander ab, gilt das Original.
Geist Sans und Geist Mono von Vercel, lizenziert unter der SIL Open Font License 1.1.
Logo
Das Logo ist die Wortmarke RUDA, gesetzt in Geist Sans. Es gibt kein Symbol und keinen Initialenrahmen.
Regeln
- Immer in Großbuchstaben: RUDA. Im Fließtext heißt das Produkt Ruda.
- Schriftstärke 600 (SemiBold). Nie fetter.
- Die Laufweite ist in jeder Größe auf 0.64px festgelegt. Mit wachsender Größe wird das Verhältnis daher kleiner.
- Mindestgröße 12px.
- Schutzraum: auf allen Seiten mindestens eine Versalhöhe (0.71 × Schriftgröße) frei lassen.
- Farbe: #171717 auf hellem Grund, Weiß auf dunklem Grund. Keine anderen Farben.
- Screenreader lesen den Namen als Ruda vor, nicht Buchstabe für Buchstabe. In Alternativtexten, Bildunterschriften und Dokumenten schreiben Sie Ruda.
- Die Wortmarke läuft immer von links nach rechts, auch auf arabischen Seiten, und wird nie übersetzt oder transliteriert.
Größen
| Größe | Laufweite | Verhältnis | Muster |
|---|---|---|---|
| 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 |
Nicht erlaubt
FalschKleinbuchstaben
FalschGemischte Schreibung
FalschGeänderte Laufweite
FalschKursiv
FalschKontur
FalschSchatten
FalschVerlauf
FalschFremde Farbe
FalschInitialenrahmen oder Symbol
Farbe
Neutral zuerst. Schwarz ist die Markenfarbe, Blau ist Links und Zuständen vorbehalten. Der Kontrast wird für jedes Token gegen Weiß und Schwarz berechnet.
AA bedeutet mindestens 4,5:1 und reicht für Fließtext. AA groß bedeutet mindestens 3:1, nur für große Schrift und Bedienelemente.
| Token | HEX | Auf Weiß (#ffffff) | Auf Schwarz (#000000) | |
|---|---|---|---|---|
| Marke | ||||
| primaryPrimär: Buttons, Wortmarke, Haupttext | #171717 | 17.93:1AA | 1.17:1Unter AA | |
| primary (dark)Primäre Flächen im Dunkelmodus | #2e2e2e | 13.58:1AA | 1.55:1Unter AA | |
| cta (dark)Primäre Buttons im Dunkelmodus | #ededed | 1.17:1Unter AA | 17.94:1AA | |
| Blau | ||||
| linkLinktext | #0068d6 | 5.31:1AA | 3.95:1AA groß | |
| link-darkLinktext im Dunkelmodus | #52a8ff | 2.50:1Unter AA | 8.40:1AA | |
| toggle-on · toast-success · infoSchalter an, Erfolgsmeldung, Infofläche | #0070f3 | 4.55:1AA | 4.61:1AA | |
| Beta | ||||
| badge-pinkBeta-Badge mit weißer Schrift | #bd2864 | 5.75:1AA | 3.65:1AA groß | |
| badge-pink-darkBeta-Badge im Dunkelmodus | #b31a57 | 6.56:1AA | 3.20:1AA groß | |
| Deaktiviert | ||||
| disabled-bgDeaktivierte Fläche | #f2f2f2 | 1.12:1Unter AA | 18.76:1AA | |
| disabled-fgDeaktivierter Text | #8f8f8f | 3.23:1AA groß | 6.49:1AA | |
| Grau | ||||
| gray-50Hintergrund | #f2f2f2 | 1.12:1Unter AA | 18.76:1AA | |
| gray-100Hover-Hintergrund | #ebebeb | 1.19:1Unter AA | 17.62:1AA | |
| gray-200Aktiver Hintergrund | #e6e6e6 | 1.25:1Unter AA | 16.83:1AA | |
| gray-300Rahmen | #ebebeb | 1.19:1Unter AA | 17.62:1AA | |
| gray-800Sekundärtext | #4d4d4d | 8.45:1AA | 2.48:1Unter AA | |
| gray-900Haupttext | #171717 | 17.93:1AA | 1.17:1Unter AA | |
| gray-500 (dark)Sekundärtext im Dunkelmodus | #a0a0a0 | 2.61:1Unter AA | 8.03:1AA | |
| Status | ||||
| successErfolgspunkt und Badge | #45a557 | 3.10:1AA groß | 6.77:1AA | |
| warningWarnung | #f5a623 | 2.03:1Unter AA | 10.36:1AA | |
| errorFehler und Löschaktionen | #e5484d | 3.91:1AA groß | 5.37:1AA | |
Deaktivierte Bedienelemente sind vom Mindestkontrast ausgenommen (WCAG 1.4.3) und tragen immer disabled oder aria-disabled. #8f8f8f / #f2f2f2 = 2.89:1
Typografie
Geist Sans setzt jeden Text in Oberfläche und Marketing. Geist Mono ist für Code und Werte wie HEX.
Geist Sans Aa Bb 0123
Geist Mono Aa Bb 0123
Überschriften
| Token | Größe | Zeilenhöhe | Stärke | Laufweite |
|---|---|---|---|---|
| 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 |
Text
| Token | Größe | Zeilenhöhe |
|---|---|---|
| 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 |
Stärke
Schriftstärken: 400 für Fließtext, 500 für Buttons, 550 für Hervorhebungen, 600 für Überschriften und die Wortmarke. 700 und mehr werden nicht verwendet, eine Build-Prüfung weist sie ab.
Andere Schriftsysteme
- Koreanisch, Japanisch und Chinesisch greifen nach Geist auf die jeweilige Systemschrift zurück (Koreanisch: Pretendard). Überschriften ab 24px laufen mit -0,02em, bis 20px mit 0.
- Thailändische und arabische Überschriften behalten die Laufweite 0, damit Tonzeichen und Verbindungen erhalten bleiben. Thailändische Überschriften mit 48px und 56px haben die Zeilenhöhe 1,2.
- Arabische Seiten laufen von rechts nach links. Wortmarke, HEX-Werte und Code bleiben links nach rechts.
Form und Abstand
Eckenradius
- 6pxBedienelemente und Eingabefelder
- 8pxKarten, Popover, Menüs
- 12pxDialoge
Schatten
Karten trennen sich mit einer 1px-Linie statt mit Schatten, Tabellen werfen nie einen. Schatten gibt es nur für schwebende Ebenen:
- Popover und Menüs0 8px 24px rgba(0,0,0,.12)
- Dialoge0 16px 48px rgba(0,0,0,.16)
Abstände
Abstände folgen Vielfachen von 4px.
Bewegung
- Rückmeldung ändert nur Farbe, Deckkraft oder Schatten. Beim Drücken oder Überfahren wird nichts größer, kleiner oder verschoben.
- Übergänge dauern 150 bis 200ms und nutzen die Geist-Abbremskurve.
- Popover und Dialoge werden überblendet. Hintergründe werden nie weichgezeichnet.
- Ist reduzierte Bewegung aktiviert, wird jede Bewegung zu einer einfachen Überblendung.
cubic-bezier(0, 0, 0.2, 1)
Kontakt
Fragen zur Verwendung des Namens oder der Wortmarke Ruda richten Sie bitte an help@rexplore.xyz.