カラー

MT7 カラーはブランドと利用者の操作を誘導したり、分かりやすく伝えるために使用します。

  • 色合いは 50 から 900 の数値で表現されています。
  • 色名500が基本色になっており、色名だけでも記述できるようになっています（例: $lochmara500 = $lochmara）。
  • 色を使うときはコントラスト比は、最低 4.5:1 になるようにしてください。
  • 認知できなくても、情報が伝わる、操作ができる場合はコントラスト比は気にしなくて良い（例: 補助情報として配置しているアイコン）。

ブランドカラー

Movable Type のロゴで使用されている色。

#0176BF
$cobalt		 #5FBCEB
$malibu		 #0176BF
$lochmara

プロダクトカラー

#0F1E64
$lochmara900		 #1E286E
$lochmara800		 #004B9A
$lochmara700		 #1E5AAA
$lochmara600		 #0176BF
$lochmara500
1E8CD2
$lochmara400		 5FBCEB
$lochmara300		 96DCEB
$lochmara200		 C8E6EB
$lochmara100		 #E3F2F4
$lochmara50
#176B5A
$keppel900		 #26826F
$keppel800		 #399280
$keppel700		 #409885
$keppel600		 #4DA290
$keppel500
#63AD9E
$keppel400		 #79BCAE
$keppel300		 #91C8BD
$keppel200		 #AFD4CD
$keppel100		 #D4EFEA
$keppel50
#4C090A
$valencia900		 #701011
$valencia800		 #99191A
$valencia700		 #BA2628
$valencia600		 #D33638
$valencia500
#EF7678
$valencia400		 #F28E8F
$valencia300		 #F6AFB0
$valencia200		 #F8CACB
$valencia100		 #FFE0E0
$valencia50
#CF3E08
$jaffa900		 #E45E2B
$jaffa800		 #EF6F3E
$jaffa700		 #F08C3C
$jaffa600		 #F09E3C
$jaffa500
#FBBE5F
$jaffa400		 #FFD17E
$jaffa300		 #FFE49C
$jaffa200		 #FFFBBD
$jaffa100		 #FFFDE5
$jaffa50
#000000
$black		 #2F2F2F
$gray-darkest		 #595959
$gray-darker		 #737373
$gray-dark		 #A5A5A5
$gray
#CACACA
$gray-light		 #E0E0E0
$gray-lighter		 #F4F4F4
$gray-lightest		 #FFFFFF
$white

Bootstrap カスタマイズ

Bootstrap では UI コンポーネントに同じ色を割り当てるために独自変数を定義しています。効率的に Bootstrap テーマを上書きするために以下の変数を MT7 カラーに再定義しています。

  • $brand-primary: $lochmara
  • $brand-success: $keppel
  • $brand-info: $malibu
  • $brand-warning: $jaffa
  • $brand-danger: $valencia
  • $brand-inverse: $gray-darker