CodeRabbit
ブランドガイドライン
CodeRabbitを明確かつ一貫して表現するための公式ロゴ、カラー、実用的なガイドラインです。
01
CodeRabbitロゴ
原則としてCodeRabbitのフルロゴタイプを使用してください。すべてのアセットは形状と可読性を保ち、周囲に十分な余白を確保します。単体のマークは、フルロックアップを配置できない場合にのみ使用してください。
ロゴガイドライン
承認済みのロックアップは、向き、比率、全体の形状、周囲の余白を保ってください。ラビットを描き直したり、別の書体と組み合わせたりしないでください。
マークの周囲を詰めない
文字、画像、コンテナの端が干渉しないよう、ラビットマークの周囲に十分な余白を確保します。
回転、変形、再作成をしない
必ず提供されたロゴファイルを使用してください。ロックアップの回転や引き伸ばし、比率の変更、別の書体によるCodeRabbit名の再作成は禁止です。
02ブランドカラー
ブランドカラー
CR OrangeとMauveニュートラルを中心に使用します。CR MintとCR Cobaltは、すべてのカラーを同等に扱うのではなく、補助的なアクセントとして使用してください。
メインカラー
CR Orange
- HEX
- #FF570A
- RGB
- 255 / 87 / 10
- CMYK
- 11% / 84% / 96% / 0%
セカンダリー
CR Mint
- HEX
- #25E2A8
- RGB
- 37 / 226 / 168
- CMYK
- 67% / 0% / 61% / 0%
ターシャリー
CR Cobalt
- HEX
- #687FF5
- RGB
- 104 / 127 / 245
- CMYK
- 64% / 52% / 0% / 0%
03カラールール
カラールール
カラーの優先順位、コントラスト、ニュートラルカラー群を意図的に保ちます。以下はCodeRabbitのカラーシステムを弱める組み合わせです。
禁止事項
すべてのアクセントカラーを同じ比率で使わない
OrangeとMauveを中心にし、MintとCobaltは補助的に使用します。
禁止事項
アクセントカラー同士を重ねない
鮮やかなカラーの間にはニュートラルなサーフェスを挟みます。
禁止事項
ブランドカラーをグラデーションに混ぜない
カラーは意図的で独立したシグナルとして使用します。
禁止事項
補助色をメインにしない
MintとCobaltは小さく意味のあるアクセントに限定します。
禁止事項
1つのUIでニュートラルカラー群を混在させない
MauveベースまたはCreamベースのどちらかに統一します。
禁止事項
低コントラストの配色で文字を置かない
読みやすい前景色をニュートラルなサーフェス上で使用します。
04補助パレット
補助パレット
Mauve、Primary、Secondary、TertiaryはCarrot UIのコアパレットです。Creamはコンテンツマーケティングを支える補助パレットとして使用します。
Mauve
1
2
3
4
5
6
7
8
9
10
11
12
Primary
2
4
6
8
9
10
Secondary
1
3
5
7
9
11
Tertiary
1
3
5
7
9
11
Cream
1
2
3
4
5
6
05タイポグラフィ
タイポグラフィ
2つの書体に、それぞれ明確な役割を与えます。Geistはブランドコミュニケーション、Hackは技術的な情報に使用します。
プライマリー書体
Geist
見出しにはSemi-bold 600を使用します。本文、ナビゲーション、CTAなど、読むためのテキストにはRegular 400を使用します。
Semi-bold 600 / 見出し
確信を持ってコードをレビュー。
Regular 400 / 本文
明確な説明で、チームは何が変わったのか、なぜ変わったのかを理解できます。
© 2023 Vercel, in collaboration with basement.studio · SIL Open Font License 1.1
ユーティリティ書体
Hack
ラベルと数値にはBold 700を使用します。コード、データ、メタデータ、コンパクトな技術識別子にはRegular 400を使用します。
Bold 700 / ラベルと数値
ラベル · 数値 · トークン
Regular 400 / コードとデータ
--font-cui-mono: Hack;
Hack © 2018 Source Foundry Authors; Bitstream Vera Sans Mono © 2003 Bitstream, Inc. · MITおよびBitstream Veraライセンス
