紺の上には黄、黄の上には紺、白の上には黒。この3組み合わせだけで階層をつくります。 ビールのラベルは色数が多いのですが、UI に赤・緑・青を足しません。
font-weight は 500 と 700 の2値だけ。400 も 600 も使いません。 letter-spacing は「normal」ではなく明示的な「0」で、palt もかけないベタ組みです。 大見出しほど line-height の比率を下げ（40px→1.35）、読み物の見出しだけ 2.4 まで開きます。
日本のクラフトビールのはじまりは1994年に遡ります。当時、ビールを造るには年間2,000kLという 高い壁がありました。それが60kLまで引き下げられたことで、全国に小さな醸造所が生まれます。 いわゆる「地ビールブーム」です。
ブームは数年で終わりました。土産物としての地ビールは売れなくなり、多くの醸造所が姿を消します。 それでも残った造り手は、観光ではなく「味」で選ばれる道を選びました。 いま「クラフトビール」と呼ばれているのは、その先にある造り手たちのビールです。
Primary — 背景 #F8E133 / 枠 4px solid #F8E133 / 文字 #112240
Inverse — 背景 #112240 / 枠 4px solid #F8E133 / 文字 #F8E133
Outline — 背景 transparent / 枠 4px solid #112240 / 文字 #112240
いずれも 16px / weight 700 / line-height 1、右端に 8×14px の矢印を :after で置きます。
border-radius 44px / border 2px solid #F8E133 / padding 0 32px 2px / 16px / weight 700。
折れたバットを再生した什器で、球場にクラフトビールの居場所をつくる。
飲み過ぎを、笑いながら止める。適正飲酒のための一杯。
年間60kL からはじまった小さな醸造所の話。
border-radius 50% / background rgba(0,0,0,.3) / border 6px solid #F8E133 / color #F8E133 / 16px / weight 700。半透明なので下の写真が透けます。
麦芽を粉砕する
仕込んで糖化させる
ホップを加えて煮沸
酵母を入れて発酵
熟成させ、詰める
フォーム部品だけリセットで line-height: 2 が指定されています（本文は 1.6）。
ブレークポイントは 768px / 769px の対が主境界（40箇所以上）。 ほかに 960 / 1000 / 1024 / 1108 / 1200px。モバイルでも font-size 16px / line-height 1.6 は変えません。