概要
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 と書きます。
- ウェイトは 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 以上で、大きな文字と UI 要素にのみ使います。
| トークン | HEX | 白地 (#ffffff) | 黒地 (#000000) | |
|---|---|---|---|---|
| ブランド | ||||
| primaryメイン: ボタン、ワードマーク、本文 | #171717 | 17.93:1AA | 1.17:1AA 未満 | |
| primary (dark)ダークモードのメインの塗り | #2e2e2e | 13.58:1AA | 1.55:1AA 未満 | |
| cta (dark)ダークモードの主ボタン | #ededed | 1.17:1AA 未満 | 17.94:1AA | |
| 青 | ||||
| linkリンクの文字 | #0068d6 | 5.31:1AA | 3.95:1AA 大きな文字 | |
| link-darkダークモードのリンクの文字 | #52a8ff | 2.50:1AA 未満 | 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:1AA 未満 | 18.76:1AA | |
| disabled-fg無効の文字 | #8f8f8f | 3.23:1AA 大きな文字 | 6.49:1AA | |
| グレー | ||||
| gray-50背景 | #f2f2f2 | 1.12:1AA 未満 | 18.76:1AA | |
| gray-100ホバー時の背景 | #ebebeb | 1.19:1AA 未満 | 17.62:1AA | |
| gray-200押下時の背景 | #e6e6e6 | 1.25:1AA 未満 | 16.83:1AA | |
| gray-300枠線 | #ebebeb | 1.19:1AA 未満 | 17.62:1AA | |
| gray-800補助テキスト | #4d4d4d | 8.45:1AA | 2.48:1AA 未満 | |
| gray-900本文 | #171717 | 17.93:1AA | 1.17:1AA 未満 | |
| gray-500 (dark)ダークモードの補助テキスト | #a0a0a0 | 2.61:1AA 未満 | 8.03:1AA | |
| 状態 | ||||
| success成功のドットとバッジ | #45a557 | 3.10:1AA 大きな文字 | 6.77:1AA | |
| warning警告 | #f5a623 | 2.03:1AA 未満 | 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 の後に各言語のシステム書体を使います(日本語はヒラギノ角ゴシックなど)。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 の倍数だけを使います。
モーション
- フィードバックで変えるのは色、不透明度、影だけです。押してもホバーしても大きさや位置は変わりません。
- トランジションは Geist の減速カーブで 150〜200ms です。
- ポップオーバーとモーダルはクロスフェードで表示します。背景はぼかしません。
- 視差効果を減らす設定がオンのときは、動きをシンプルなフェードに置き換えます。
cubic-bezier(0, 0, 0.2, 1)
お問い合わせ
Ruda の名称やワードマークの使用については help@rexplore.xyz までご連絡ください。