Обзор
Ruda является инструментом для отслеживания документов и сбора лидов со встроенной CRM для корпоративных команд продаж и маркетинга.
- Продукт
- Ruda
- Издатель
- Rexplore Inc.
- Дизайн-система
- Vercel Geist
- Шрифты
- Geist Sans, Geist Mono
Интерфейс Ruda построен на дизайн-системе Vercel Geist. Цвета, шкала шрифтов, скругления и анимация следуют оригиналу Geist, а если наша реализация и оригинал расходятся, приоритет у оригинала.
Geist Sans и Geist Mono от Vercel, лицензия SIL Open Font License 1.1.
Логотип
Логотип представляет собой надпись RUDA, набранную шрифтом Geist Sans. Знака и рамки с инициалом нет.
Правила
- Всегда прописными: RUDA. В обычном тексте продукт пишется как Ruda.
- Начертание 600 (SemiBold). Не жирнее.
- Межбуквенный интервал зафиксирован на 0.64px при любом размере, поэтому с ростом логотипа доля интервала уменьшается.
- Минимальный размер 12px.
- Охранное поле: со всех сторон оставляйте не меньше высоты прописной буквы (0.71 × кегль).
- Цвет: #171717 на светлом фоне, белый на тёмном. Другие цвета не используются.
- Экранные дикторы произносят название как Ruda, а не по буквам. В альтернативном тексте, подписях и документах пишите Ruda.
- Логотип всегда читается слева направо, в том числе на арабских страницах, и никогда не переводится и не транслитерируется.
Размеры
| Размер | Интервал | Доля | Образец |
|---|---|---|---|
| 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 |
Так нельзя
НеверноСтрочные буквы
НеверноСмешанный регистр
НеверноИзменённый интервал
НеверноКурсив
НеверноКонтур
НеверноТень
НеверноГрадиент
НеверноЦвет не из палитры бренда
НеверноРамка с инициалом или знак
Цвет
Сначала нейтральные тона. Цвет бренда чёрный, а синий предназначен только для ссылок и состояний. Контраст рассчитан для каждого токена относительно белого и чёрного.
AA означает 4,5:1 и выше, этого достаточно для основного текста. AA крупный текст означает 3:1 и выше, только для крупного текста и элементов интерфейса.
| Токен | HEX | На белом (#ffffff) | На чёрном (#000000) | |
|---|---|---|---|---|
| Бренд | ||||
| primaryОсновной: кнопки, логотип, основной текст | #171717 | 17.93:1AA | 1.17:1Ниже AA | |
| primary (dark)Основные заливки в тёмной теме | #2e2e2e | 13.58:1AA | 1.55:1Ниже AA | |
| cta (dark)Основные кнопки в тёмной теме | #ededed | 1.17:1Ниже AA | 17.94:1AA | |
| Синий | ||||
| linkТекст ссылок | #0068d6 | 5.31:1AA | 3.95:1AA крупный текст | |
| link-darkТекст ссылок в тёмной теме | #52a8ff | 2.50:1Ниже AA | 8.40:1AA | |
| toggle-on · toast-success · infoВключённый переключатель, уведомление об успехе, информационная заливка | #0070f3 | 4.55:1AA | 4.61:1AA | |
| Бета | ||||
| badge-pinkЗначок «Бета», белый текст | #bd2864 | 5.75:1AA | 3.65:1AA крупный текст | |
| badge-pink-darkЗначок «Бета» в тёмной теме | #b31a57 | 6.56:1AA | 3.20:1AA крупный текст | |
| Неактивное | ||||
| disabled-bgНеактивная заливка | #f2f2f2 | 1.12:1Ниже AA | 18.76:1AA | |
| disabled-fgНеактивный текст | #8f8f8f | 3.23:1AA крупный текст | 6.49:1AA | |
| Серый | ||||
| gray-50Фон | #f2f2f2 | 1.12:1Ниже AA | 18.76:1AA | |
| gray-100Фон при наведении | #ebebeb | 1.19:1Ниже AA | 17.62:1AA | |
| gray-200Фон при нажатии | #e6e6e6 | 1.25:1Ниже AA | 16.83:1AA | |
| gray-300Граница | #ebebeb | 1.19:1Ниже AA | 17.62:1AA | |
| gray-800Второстепенный текст | #4d4d4d | 8.45:1AA | 2.48:1Ниже AA | |
| gray-900Основной текст | #171717 | 17.93:1AA | 1.17:1Ниже AA | |
| gray-500 (dark)Второстепенный текст в тёмной теме | #a0a0a0 | 2.61:1Ниже AA | 8.03:1AA | |
| Состояния | ||||
| successТочка и значок успеха | #45a557 | 3.10:1AA крупный текст | 6.77:1AA | |
| warningПредупреждение | #f5a623 | 2.03:1Ниже AA | 10.36:1AA | |
| errorОшибки и необратимые действия | #e5484d | 3.91:1AA крупный текст | 5.37:1AA | |
Неактивные элементы управления освобождены от минимального контраста (WCAG 1.4.3) и всегда имеют атрибут disabled или aria-disabled. #8f8f8f / #f2f2f2 = 2.89:1
Типографика
Geist Sans используется для всего текста в интерфейсе и маркетинге. Geist Mono нужен для кода и значений вроде HEX.
Geist Sans Aa Bb 0123
Geist Mono Aa Bb 0123
Заголовки
| Токен | Размер | Высота строки | Начертание | Интервал |
|---|---|---|---|---|
| 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-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 |
Начертание
Начертания: 400 для текста, 500 для кнопок, 550 для выделения, 600 для заголовков и логотипа. 700 и жирнее не используются, проверка при сборке их отклоняет.
Другие письменности
- Корейский, японский и китайский после Geist используют системный шрифт своего языка (корейский: Pretendard). Заголовки от 24px сужаются на -0,02em, до 20px остаются с интервалом 0.
- Тайские и арабские заголовки сохраняют интервал 0, чтобы не разрушать тоновые знаки и соединения букв. Тайские заголовки 48px и 56px имеют высоту строки 1,2.
- Арабские страницы идут справа налево. Логотип, значения HEX и код остаются слева направо.
Форма и отступы
Скругление
- 6pxЭлементы управления и поля
- 8pxКарточки, поповеры, меню
- 12pxМодальные окна
Тень
Карточки отделяются линией 1px вместо тени, у таблиц тени нет никогда. Тени есть только у всплывающих слоёв:
- Поповеры и меню0 8px 24px rgba(0,0,0,.12)
- Модальные окна0 16px 48px rgba(0,0,0,.16)
Отступы
Отступы кратны 4px.
Анимация
- Отклик меняет только цвет, прозрачность или тень. При нажатии и наведении ничего не увеличивается и не сдвигается.
- Переходы длятся от 150 до 200ms по кривой замедления Geist.
- Поповеры и модальные окна появляются плавным проявлением. Фон никогда не размывается.
- Если включено уменьшение движения, любое перемещение заменяется простым проявлением.
cubic-bezier(0, 0, 0.2, 1)
Контакты
Вопросы об использовании названия или логотипа Ruda присылайте на help@rexplore.xyz.