Twilight blue
#5274DBOur primary accent, shared with the desktop app. Calls to action and highlights.
QnAのブランド
おなじみの顔。
どんな冒険にも。
QnAらしさをつくる色、キャラクター、細部。QnAを紹介してくださる方のためのリファレンスです。
01／アイデンティティ
Qloudを紹介します。
ドット絵のコンパニオンで、QnAの顔です。マスコットは単体でも、サイトのヘッダーのようにQnAの名前と並べても使えます。
オリジナルのドット絵。背景透過のスケーラブルなSVG。
Qloud SVGをダウンロードやわらかな一面のQloud。
ふんわりした雲のシルエット、丸い目、同じラベンダーの輝きを持つ、ドット絵ではないバリエーション。
スムーズなアートワーク。背景透過のスケーラブルなSVG。
スムーズなQloud SVGをダウンロード02／パレット
QnA全体で、同じ色を。
Webサイトとデスクトップアプリはダークネイビーのサーフェスにブルーとパープルのアクセントカラーを共有しています。下のHEX値を選ぶとコピーできます。
Purple
#B06CFFOur secondary accent. Decorative details and supporting highlights.
Midnight
#0C0E16The canvas. The same dark background as the desktop app.
Navy
#1A1F30Cards and panels. A subtle step above the page background.
Slate
#262D42Borders and dividers. Just enough definition.
Cool white
#E8ECF6Headings and primary text. Clear and comfortable to read.
Blue gray
#8A93ABSupporting text, captions, and secondary information.
03／Qloudの空
ふわりと浮かぶ余白を。
シグネチャーブルーが、Qloudのための広い空になります。
1つのQloud、4つの空。
現在のプライマリーブルーはTwilightです。オリジナルのブルーや2つの代替色と比べてみてください。それぞれ空、ボタンの背景、ネイビー上のアクセントとして表示しています。
Original blue
#6C8CFFPrevious / soft periwinkle with a lavender lean.
あなたの2Pは準備完了。
Open sky
#78ADFFLighter / an airy, brighter sky.
あなたの2Pは準備完了。
Clear blue
#5498F5Bluer / less lavender, more everyday sky.
あなたの2Pは準備完了。
Twilight
#5274DBCurrent primary / a deeper, richer backdrop for Qloud.
あなたの2Pは準備完了。
04／タイポグラフィ
明快な言葉と、遊べる余白。
Webサイトを軽く、なじみやすく、読みやすく保つため、OS標準のフォントを使用しています。
見出しと本文
次の
突破口へ。
Roboto
太く字間の詰まった見出し。読みやすい標準ウェイトの本文。デスクトップアプリでも同じ書体です。ロゴはPoppins Boldで、テキストではなくアートワークとして描かれています。
Aa Bb Cc Dd Ee Ff · 0123456789
ラベルと細部
PLAYER TWO.
READY.
Cascadia Code／システム等幅フォント
小さな大文字のラベルや番号付きセクションで、私たちが愛するツールやゲームへのオマージュを添えています。
Aa Bb Cc Dd Ee Ff · 0123456789
05／実践
いつもプレイヤーの味方。
2Pらしく話す。
フレンドリーに、率直に、前向きに。役立つアドバイスをわかりやすい言葉で伝え、プレイヤーの次の一歩に焦点を当てます。
Qloudに余白を。
マスコットの比率、ドットのエッジ、オリジナルの色を保ってください。アートワークの周囲には十分な余白をとり、シンプルな背景を使ってください。
名前はおなじみの表記で。
アプリはQnA、サイトはQnA.GG、ゲーミングエージェントはQloudと表記してください。言及する際は大文字・小文字の表記もそのままでお願いします。