概览
Ruda 是一款面向企业销售与营销团队的文档追踪与线索获取工具，内置 CRM。
- 产品
- Ruda
- 运营方
- Rexplore Inc.
- 设计系统
- Vercel Geist
- 字体
- Geist Sans, Geist Mono
Ruda 的界面基于 Vercel Geist 设计系统 构建。色彩、字号体系、圆角和动效均遵循 Geist 原版；当我们的实现与原版不一致时，以原版为准。
Vercel 出品的 Geist Sans 与 Geist Mono，采用 SIL Open Font License 1.1 授权。
标志
标志是用 Geist Sans 排出的字标 RUDA，没有图形符号，也没有首字母方框。
Ruda
Ruda
规范
- 始终使用大写 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 |
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 | |
| Beta | ||||
| badge-pinkBeta 徽标，白色文字 | #bd2864 | 5.75:1AA | 3.65:1AA 大字 | |
| badge-pink-dark深色模式下的 Beta 徽标 | #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 及以上，构建检查会直接拦截。
Aa400Aa500Aa550Aa600
其他文字
- 中文、日文、韩文在 Geist 之后使用各自的系统字体(简体中文为苹方或微软雅黑)。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 的倍数。
4812162432
动效
- 反馈只改变颜色、不透明度或阴影。按下或悬停时不会缩放或移动。
- 过渡时长 150 至 200ms，使用 Geist 减速曲线。
- 弹出层和对话框以淡入淡出切换，背景不做模糊。
- 开启减弱动态效果后，所有移动都改为简单的淡入淡出。
cubic-bezier(0, 0, 0.2, 1)
联系我们
关于使用 Ruda 名称或字标的问题，请发送邮件至 help@rexplore.xyz。