Przegląd
Ruda to narzędzie do śledzenia dokumentów i pozyskiwania leadów z wbudowanym CRM dla firmowych zespołów sprzedaży i marketingu.
- Produkt
- Ruda
- Wydawca
- Rexplore Inc.
- System projektowy
- Vercel Geist
- Kroje pisma
- Geist Sans, Geist Mono
Interfejs Ruda powstał na bazie systemu Vercel Geist. Kolory, skala typograficzna, zaokrąglenia i ruch są zgodne z oryginałem Geist, a gdy nasza implementacja różni się od oryginału, obowiązuje oryginał.
Geist Sans i Geist Mono od Vercel, na licencji SIL Open Font License 1.1.
Logo
Logo to logotyp RUDA złożony krojem Geist Sans. Nie ma sygnetu ani ramki z inicjałem.
Zasady
- Zawsze wielkimi literami: RUDA. W tekście ciągłym nazwę produktu zapisujemy jako Ruda.
- Grubość 600 (SemiBold). Nigdy grubiej.
- Odstęp między literami jest stały i wynosi 0.64px w każdym rozmiarze, więc im większy logotyp, tym mniejsza proporcja.
- Minimalny rozmiar: 12px.
- Pole ochronne: z każdej strony zostaw co najmniej jedną wysokość wersalika (0.71 × stopień pisma).
- Kolor: #171717 na jasnym tle, biały na ciemnym tle. Żadnych innych kolorów.
- Czytniki ekranu odczytują nazwę jako Ruda, a nie litera po literze. W tekstach alternatywnych, podpisach i dokumentach pisz Ruda.
- Logotyp zawsze czyta się od lewej do prawej, także na stronach po arabsku, i nigdy się go nie tłumaczy ani nie transliteruje.
Rozmiary
| Rozmiar | Odstęp liter | Proporcja | Przykład |
|---|---|---|---|
| 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 |
Czego nie robić
NiepoprawnieMałe litery
NiepoprawnieMieszane litery
NiepoprawnieZmieniony odstęp liter
NiepoprawnieKursywa
NiepoprawnieKontur
NiepoprawnieCień
NiepoprawnieGradient
NiepoprawnieKolor spoza marki
NiepoprawnieRamka z inicjałem lub sygnet
Kolor
Najpierw neutralność. Czerń jest kolorem marki, a niebieski zarezerwowano dla linków i stanów. Kontrast obliczono dla każdego tokena względem bieli i czerni.
AA oznacza co najmniej 4,5:1, co wystarcza dla tekstu ciągłego. AA duży tekst oznacza co najmniej 3:1, tylko dla dużego tekstu i elementów interfejsu.
| Token | HEX | Na bieli (#ffffff) | Na czerni (#000000) | |
|---|---|---|---|---|
| Marka | ||||
| primaryGłówny: przyciski, logotyp, tekst główny | #171717 | 17.93:1AA | 1.17:1Poniżej AA | |
| primary (dark)Główne wypełnienia w trybie ciemnym | #2e2e2e | 13.58:1AA | 1.55:1Poniżej AA | |
| cta (dark)Główne przyciski w trybie ciemnym | #ededed | 1.17:1Poniżej AA | 17.94:1AA | |
| Niebieski | ||||
| linkTekst linków | #0068d6 | 5.31:1AA | 3.95:1AA duży tekst | |
| link-darkTekst linków w trybie ciemnym | #52a8ff | 2.50:1Poniżej AA | 8.40:1AA | |
| toggle-on · toast-success · infoWłączony przełącznik, komunikat o sukcesie, wypełnienie informacyjne | #0070f3 | 4.55:1AA | 4.61:1AA | |
| Beta | ||||
| badge-pinkPlakietka Beta z białym tekstem | #bd2864 | 5.75:1AA | 3.65:1AA duży tekst | |
| badge-pink-darkPlakietka Beta w trybie ciemnym | #b31a57 | 6.56:1AA | 3.20:1AA duży tekst | |
| Wyłączone | ||||
| disabled-bgWypełnienie wyłączone | #f2f2f2 | 1.12:1Poniżej AA | 18.76:1AA | |
| disabled-fgTekst wyłączony | #8f8f8f | 3.23:1AA duży tekst | 6.49:1AA | |
| Szarość | ||||
| gray-50Tło | #f2f2f2 | 1.12:1Poniżej AA | 18.76:1AA | |
| gray-100Tło po najechaniu | #ebebeb | 1.19:1Poniżej AA | 17.62:1AA | |
| gray-200Tło aktywne | #e6e6e6 | 1.25:1Poniżej AA | 16.83:1AA | |
| gray-300Obramowanie | #ebebeb | 1.19:1Poniżej AA | 17.62:1AA | |
| gray-800Tekst drugorzędny | #4d4d4d | 8.45:1AA | 2.48:1Poniżej AA | |
| gray-900Tekst główny | #171717 | 17.93:1AA | 1.17:1Poniżej AA | |
| gray-500 (dark)Tekst drugorzędny w trybie ciemnym | #a0a0a0 | 2.61:1Poniżej AA | 8.03:1AA | |
| Stany | ||||
| successKropka i plakietka sukcesu | #45a557 | 3.10:1AA duży tekst | 6.77:1AA | |
| warningOstrzeżenie | #f5a623 | 2.03:1Poniżej AA | 10.36:1AA | |
| errorBłędy i działania nieodwracalne | #e5484d | 3.91:1AA duży tekst | 5.37:1AA | |
Wyłączone kontrolki są zwolnione z minimalnego kontrastu (WCAG 1.4.3) i zawsze mają atrybut disabled lub aria-disabled. #8f8f8f / #f2f2f2 = 2.89:1
Typografia
Geist Sans składa każdy tekst interfejsu i materiałów marketingowych. Geist Mono służy do kodu i wartości takich jak HEX.
Geist Sans Aa Bb 0123
Geist Mono Aa Bb 0123
Nagłówki
| Token | Rozmiar | Interlinia | Grubość | Odstęp liter |
|---|---|---|---|---|
| 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 | Rozmiar | Interlinia |
|---|---|---|
| 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 |
Grubość
Grubości: 400 dla tekstu, 500 dla przycisków, 550 dla wyróżnień, 600 dla nagłówków i logotypu. 700 i więcej nie są używane, a kontrola przy buildzie je odrzuca.
Inne pisma
- Koreański, japoński i chiński po Geist korzystają z systemowego kroju danego języka (koreański: Pretendard). Nagłówki od 24px mają odstęp -0,02em, do 20px pozostają przy 0.
- Nagłówki tajskie i arabskie mają odstęp liter 0, aby nie rozbijać znaków tonalnych ani połączeń. Tajskie nagłówki 48px i 56px mają interlinię 1,2.
- Strony po arabsku biegną od prawej do lewej. Logotyp, wartości HEX i kod pozostają od lewej do prawej.
Kształt i odstępy
Zaokrąglenie
- 6pxKontrolki i pola
- 8pxKarty, popovery, menu
- 12pxOkna modalne
Cień
Karty oddziela linia 1px zamiast cienia, a tabele nigdy nie rzucają cienia. Cienie mają tylko warstwy pływające:
- Popovery i menu0 8px 24px rgba(0,0,0,.12)
- Okna modalne0 16px 48px rgba(0,0,0,.16)
Odstępy
Odstępy rosną o wielokrotności 4px.
Ruch
- Informacja zwrotna zmienia tylko kolor, krycie lub cień. Po kliknięciu czy najechaniu nic się nie powiększa ani nie przesuwa.
- Przejścia trwają od 150 do 200ms i używają krzywej wyhamowania Geist.
- Popovery i okna modalne pojawiają się przez przenikanie. Tło nigdy nie jest rozmywane.
- Przy włączonym ograniczeniu ruchu każde przesunięcie staje się zwykłym przenikaniem.
cubic-bezier(0, 0, 0.2, 1)
Kontakt
Pytania o używanie nazwy lub logotypu Ruda prosimy kierować na adres help@rexplore.xyz.