Crunch Munch デザインシステム

Crunch Munch の画面の色・書体・部品の決まりだよ。画面に部品を足したり直したりするときは、この決まりにそろえてね。サービスの決まりはプロダクト資料にあるよ。

考え方

ロゴの元気さは、色と書体で出します。帯・影・太い枠のような飾りの部品は足しません。画面の主役は、お客さんが読む情報です。

灰色は使いません。薄い文字や線も、茶色の仲間で作ります。

画面の色は、ロゴから取っています。

いまの LP のメイン写真です。袋の色は、こげ茶・オレンジ・緑の3つです。

名前	使うところ	文字との対比
オレンジ `#c4520f`	画面の見出し。主役のボタンの地(白い文字)	白地で 4.6:1
強調のオレンジ `#b84a0c`	短く強調したい文字(お届け日、選んでいる味、締め切りなど)	白地で 5.2:1
こげ茶 `#5a2a18`	本文の文字。控えめなボタンの文字	白地で 11.8:1
茶 `#7a5a48`	補足の文字、注記	白地で 6.2:1
ベージュ `#f3e8dc`	控えめなボタンの地	こげ茶の文字で 9.8:1
薄いオレンジ `#fff4ec`	選んでいるものの地	強調のオレンジの文字で 4.8:1
線 `#ead9c6`	区切り線、カードの枠	—
白 `#ffffff`	画面の地	—
入力欄の枠 `#a8866f`	入力欄・チェックボックス・ラジオの枠	白地で 3.3:1(枠は 3:1 以上)
まちがいの赤 `#b3261e`	入力のまちがいの文字と枠だけ	白地で 6.5:1

ロゴのオレンジ(#e0661c)は、ロゴの中だけで使います。白い文字を乗せると対比が 3.5:1 で足りないため、画面では一段暗いオレンジ(#c4520f)を使います。

書体は LINE Seed JP です。太さは 400・700・800 の3つを使います。

見出し 24px・800はじめての味えらび

大きな日付 26px・80010月20日(火)

本文 14〜16px・400好きな味を3つ選んでください

ボタン 13〜16px・700この3つで決定

補足・注記 12〜13px・400お届けは毎月5日と20日ごろです

12px より小さい文字は使いません。

優先度(高・中・低)と大きさ(大・中・小)を組み合わせて使います。書体は太さ700、角丸は大きさに合わせます。

優先度	大	中	小	無効	使うところ
高	定期便をつづける	定期便をつづける	定期便をつづける	定期便をつづける	主役。オレンジの地に白い文字。1つの画面に1つだけ
中	味を選び直す	味を選び直す	味を選び直す	味を選び直す	白い地にオレンジの枠と文字。主役の次に大事な操作
低	詳細を見る	詳細を見る	詳細を見る	詳細を見る	ベージュの地にこげ茶の文字。詳細を見る・戻るなど

大きさ	高さ	文字	角丸	使うところ
大	56px	16px	12px	画面の最後の決定(決定・つづける)
中	48px	14px	10px	ふつうのボタン
小	44px	13px	8px	一覧の行の中など、狭いところ。これより小さくしない

無効のボタンは、どの優先度も同じ見た目です(地 #f6efe8、文字 #c4ab98)。押せないことが伝わればよいので、文字の対比の決まりからは外します。押せない理由は、ボタンの近くに文字で書きます。

課題の画面で足せる入力の部品と同じ形です。高さ44px、角丸8px、枠1px。

お名前必須例: 森田くるみ通常。プレースホルダーは薄い茶色

お名前森田くるみ入力済み

お名前森田くるみ入力中。枠はオレンジの2px

郵便番号 123-45 7桁で入力してください(例: 1230045)

お名前森田くるみ無効

お届けの間隔月2回セレクトボックス

ご意見気になったことがあれば書いてくださいテキストエリア

苦手な味わさびカレーしょうゆ(品切れ)

味の選び方毎回自分で選ぶ全部おまかせ

メープルピーカン ✓ はちみつくるみ

選べるカード白い地に線の色の枠1px、角丸12px。選んでいるときは、薄いオレンジの地に、オレンジの枠2pxと「✓」

区切り線線の色で1px

Crunch Munch は、Den & Forest の中の架空のサービスです。