ライト
ダーク
グラフィックアセット
- カラーグラデーション: 主にデジタルディスプレイやスクリーンでの表示に使用してください。
- カラーソリッド: 主に物理メディアでのカラー印刷に使用してください。
- モノクロームブラック: 主に明るい背景での物理メディアへの印刷に使用してください。
- モノクロームホワイト: 主に暗い背景での物理メディアへの印刷に使用してください。
Isologo
Default
Isologo / Base / Color / Gradient / Clear
DownloadLegacy
Isologo / Base / Color / Solid / Clear
Download
Isologo / Base / Monochrome / Black / Clear
Download
Isologo / Base / Monochrome / White / Clear
DownloadIsologo (Full)
Isologo / Full / Color / Gradient / Clear
Download
Isologo / Full / Color / Solid / Clear
Download
Isologo / Full / Monochrome / Black / Clear
Download
Isologo / Full / Monochrome / White / Clear
DownloadImagotype
Default
Imagotype / Base / Color / Gradient / Dark
Download
Imagotype / Base / Color / Gradient / Light
Download
Imagotype / Base / Color / Gradient / Clear
DownloadLegacy
Imagotype / Base / Color / Solid / Dark
Download
Imagotype / Base / Color / Solid / Light
Download
Imagotype / Base / Color / Solid / Clear
Download
Imagotype / Base / Monochrome / Black / Light
Download
Imagotype / Base / Monochrome / Black / Clear
Download
Imagotype / Base / Monochrome / White / Dark
Download
Imagotype / Base / Monochrome / White / Clear
DownloadImagotype (Full)
Imagotype / Full / Color / Gradient / Dark
Download
Imagotype / Full / Color / Gradient / Light
Download
Imagotype / Full / Color / Gradient / Clear
Download
Imagotype / Full / Color / Solid / Dark
Download
Imagotype / Full / Color / Solid / Light
Download
Imagotype / Full / Color / Solid / Clear
Download
Imagotype / Full / Monochrome / Black / Light
Download
Imagotype / Full / Monochrome / Black / Clear
Download
Imagotype / Full / Monochrome / White / Dark
Download
Imagotype / Full / Monochrome / White / Clear
DownloadIsotype
Isotype / Base / Color / Solid / Clear
Download
Isotype / Base / Monochrome / Black / Clear
Download
Isotype / Base / Monochrome / White / Clear
DownloadLogotype
Logotype / Base / Color / Gradient / Clear
Download
Logotype / Base / Color / Solid / Clear
Download
Logotype / Base / Monochrome / Black / Clear
Download
Logotype / Base / Monochrome / White / Clear
DownloadLogotype (Full)
Logotype / Full / Color / Gradient / Clear
Download
Logotype / Full / Color / Solid / Clear
Download
Logotype / Full / Monochrome / Black / Clear
Download
Logotype / Full / Monochrome / White / Clear
DownloadHero Animation
Animated / Light
Download
Animated / Dark
DownloadFirst Frame / Light
DownloadFirst Frame / Dark
DownloadBands & Leaning Plates
カラーパレット
Color Codes (Hex)
Blue / Light#00b0f0
Blue / Dark#0070c0
Orange / Light#ffaa00
Gray / Lighter#dbdbdb
Gray / Light#565658
Gray / Medium#474747
Gray / Dark#343436
Gray / Darker#242424
プロダクトカラー
- 6つのプロダクトには、それぞれ基本色となるアクセントカラーがあり、ひとつのルールで基本色からさらに4色を導いて、数字、アイコン、カードがライトテーマでもダークテーマでも読みやすくなるようにしています。
- プロダクトカラーはプロダクトを示すためだけの色で、ロゴ、帯、ストライプ、ブランドグラデーションには上のカラーパレットを使います。
Shades & Rules
淡色基本色を白の上に10%で重ねた色で、明るい背景でプロダクトのカードを塗り、枠には30%で重ねた色を使います。
明色基本色をOKLCHの明度で0.10以上明るくした色で、暗い背景の数字、アイコン、文字に4.6:1以上のコントラストで使います。
基本色プロダクトのアクセントカラーで、バーや罫線を塗り、その上の文字は白とダークグレーのうち読みやすい方にします。
濃色基本色をOKLCHの明度で0.10以上暗くした色で、白地や淡色の上の数字、アイコン、文字に4.6:1以上のコントラストで使います。
暗色基本色を#171717の上に16%で重ねた色で、暗い背景でプロダクトのカードを塗り、枠には40%で重ねた色を使います。
Product Color Codes (Hex)
01ブランドシアン
Coarobo ViewportフィジカルAI可視化
- 淡色#e6f7fe
- 明色#72ceff
- 基本色#00b0f0
- 濃色#0276a2
- 暗色#132f3a
02ミントグリーン
Coarobo Sightline没入型XR遠隔操作
- 淡色#e8f9f3
- 明色#4fdfa3
- 基本色#1dbe84
- 濃色#017f55
- 暗色#183228
03アメジストパープル
Coarobo Heartbeatいのちある対話アバター
- 淡色#f4edf8
- 明色#b272e1
- 基本色#8e4fbb
- 濃色#70309b
- 暗色#2a2031
04ブランドブルー
Coarobo Drydockロボットシステム統合
- 淡色#e6f1f9
- 明色#3792e5
- 基本色#0070c0
- 濃色#015391
- 暗色#132532
05鳥居の朱色
Coarobo Gatewayクラウド連携基盤
- 淡色#fbebe7
- 明色#fa5d39
- 基本色#d63911
- 濃色#a82601
- 暗色#361c16
06ブランドアンバー
Coarobo LaunchpadR&Dコンサルティング
- 淡色#fff7e6
- 明色#ffd7a5
- 基本色#ffaa00
- 濃色#996401
- 暗色#3c2f13
プロダクトアイコン
- コアロボと6つのプロダクトには、ウェブサイトと同じアイソメトリックのスタイルで描いたアプリアイコンがあります。アイソタイプのシェブロンがプロダクトを象徴するオブジェクトの両側に立ち、プロダクトの色のタイルに載っています。
- どのアイコンにも、明るい背景用のライトと暗い背景用のダークの2つの外観があり、表示サイズに合わせて描き分けた3つのカットがあります。
アプリアイコン
- ライト
ダーク
- ライト
ダーク
- ライト
ダーク
- ライト
ダーク
- ライト
ダーク
- ライト
ダーク
カットとルール
メイン51264 px以上細部まで描いた完全版で、アプリストア、ホーム画面、スライド、ヒーローに使います。
スモール3232〜64 px線を太く、オブジェクトを大きくした版で、メニュー、リスト、カードに使います。
タイニー1616〜32 pxオブジェクトだけを大きく描いた版で、ブラウザのタブやフッターに使います。
- ファイルはそのまま使い、アイコンを描き直したり、色や縦横比を変えたり、切り抜いたり、効果を加えたりしないでください。
- 表示サイズが範囲に入るカットを選び、カットを最小サイズより小さく表示したり、小さいカットを拡大して大きなアイコンにしたりしないでください。
- タイルの周囲には一辺の8分の1以上の余白を取り、文字やほかのマークを重ねないでください。
- 明るい背景にはライト、暗い背景にはダークを使ってください。