メディアキット
Vehicle Imagery に言及するために必要なものすべて。明るい背景と暗い背景用のワードマーク、カラー、書体、そして全体を整えるいくつかの決まりごと。
すべてダウンロード(zip、107 KB)ロゴ
ワードマークが主となるロゴで、シンボルはアプリアイコンやアバターのような小さな面積を担います。SVG はどのサイズにも伸び、ほぼどの場面でも正解です。PNG は大きく、透過しています。
安定したアドレス
デザインツール以外の場所、特にメール署名には、これらのアドレスは決して変わりません。今テンプレートに貼り付けたロゴは、1年後も解決します。ダウンロードせずに直接リンクしてください。
https://vehicleimagery.com/logos/<dark|white>/<full|symbol>.<svg|png>- dark は、明るい背景用のインクバージョンです。white は、暗い背景用です。
- full は、ロゴマーク、symbol は、単独のマークです。
- PNG は、メール内のロゴの実際の幅で提供されます。ロゴマークは 400px、マークは 256px です。高解像度画面で 2 倍のサイズにするには、拡張子の前に @2x を追加します。
- すべての PNG は透明背景です。メールでは、暗いテンプレート上で暗いバージョンが消えてしまうため、配置場所に合ったものを選びましょう。
- メールではPNGを使用します。GmailやOutlookを含むほとんどのクライアントはメッセージ本文にSVGをレンダリングしません。そのため、ロゴが空のボックスとして表示されます。SVGはウェブや印刷用のアートワークに適しています。
- 画像に明示的な幅と高さをマークアップで指定します。OutlookはCSSのサイズ指定を無視するため、そうしないとフルサイズで表示されます。
例: /logos/dark/full.png · /logos/white/symbol@2x.png · /logos/dark/symbol.svg
カラー
サイトとプロダクトが実際に使っているパレット。インクとホワイトがブランドを支え、ブルーはアクセント、暖かいニュートラルは背景です。
#111418
インク暗い面、ボタン、明るい地色に載せるワードマーク
#5680E0
アクセントブルーリンク、ハイライト、操作のアクセント
#102A56
ディープブルー明るい面での読み込み表現と奥行き
#F6F4F1
ウォームホワイト暖かいニュートラルの背景セクション
#E8E6E3
Neutral暖色系の背景に載せるカードと区切り線
#FFFFFF
ホワイト基本の背景、暗い地色に載せるワードマーク
書体
すべてを 1 書体で。Geist、システム側の代替は Arial。見出しは詰めて、本文は読みやすい行間で。
すべての車を、いつでも美しく。
Geist が見出しも UI も本文も担います。読み込めない場合は Arial がレイアウトを保ちます。
Regular 400Medium 500Semibold 600
使い方
要点はひとつ。ファイルは渡されたまま使い、まわりに余白をとってください。
- 名称は 2 語で書いてください:Vehicle Imagery。
- 明るい背景にはインクのワードマークを、暗い背景にはホワイトを使ってください。
- ロゴの周囲に、少なくとも V の高さぶんの余白をとってください。
- シンボル単体は、アプリアイコンやアバターなどワードマークが収まらない場所でだけ使ってください。
- ワードマークの色を変えたり、伸ばしたり、回したり、縁取りしたり、効果を加えたりしないでください。
- 情報量の多い写真や、コントラストの低い背景にワードマークを置かないでください。
- 別の書体でワードマークを作り直さないでください。