ページの地色は #f5f4f2(可視 64 要素)。その上に角丸 20px の白いカードを敷く二層構造。青は「読む・進む」、赤は「新しい」と役割が完全に分かれていて、赤を CTA の面色には使わない。
トップは heroCovered: true。1440×777 のヒーロー画像が全面を覆うので、ヒーローの青空をページ背景色だと思わないこと。地色は #f5f4f2。
和文は TBUDゴシック R(モリサワ TypeBank の UD 書体)を TypeSquare で配信。実測 160 要素。letter-spacing は全要素 normal(トップ 143/143・下層 74/74)で、palt も 0 件。詰めも空けもせず、行間 2.0 で余裕を作る。
TypeSquare はウェイトごとに別ファミリーを配信する。実サイトの @font-face は R も B も Sharoa も すべて font-weight: bold 宣言で、font-weight の値は描画される太さを決めない。
border-radius: 20px が実測 46 要素で最多。ボタンもカードもタブもここに揃う。例外はピル型(100px)とリボン型バッジ(0 100px 100px 0)。
アウトラインボタンの枠・文字はブランド青 #426bba。赤 #b01c2e は New バッジ専用で、CTA の面色には使わない。
影は 0 3px 4px rgba(0,0,0,0.1) の 1 種類(実測 33 要素)で足りる。黒 10%・ぼかし 3〜6px と浅く、浮かせるのではなく「紙を一枚置いた」程度の段差にする。
実サイトに独立したフォーム部品は少ないため、カードの角丸 10px と枠色から構成した参考実装。フォーカスリングはブランド青、エラーは #b01c2e。
色味を付けていない。3 種とも rgba(0,0,0,0.1) で、違うのは offset とぼかしだけ。
html は 6 幅すべてで 10px 固定(1440 / 1200 / 834 / 768 / 767 / 375px で実測)。流体ではない。動くのは body だけで、行間比まで 2.0 → 1.75 に変わる。
メディアクエリには print が併記されている(print, screen and (min-width: 750px))。印刷時は PC レイアウトで出る設計。