文字色は 純黒と純白の2色だけ(実測 #000 196 要素 / #fff 95 要素)。グレーの文字が 1 つも出てこない。
蛍光イエローは面を塗る色ではなく、10×10px のマーカーと選択状態の合図として使う。
font-feature-settings は 291 要素すべて normal。約物を詰める代わりに
letter-spacing: 0.8px を全面に効かせる(218 要素)。ウェイトは 600 と 300 の 2 極で、
中間の 400 / 500 をほとんど使わない。
ボックス
レコード
セキュリティ
letter-spacing を em に読み替えない。16px の本文でも 14px のボタンでも実効値は同じ 0.8px(0.05em / 0.057em)。
em で再宣言すると大きい文字ほど開きすぎる。
Web フォントは全ページで unloaded。macOS ではヒラギノがローカル解決するため、
Noto Sans JP / Roboto は Windows・Android のための保険として配信されている。検証環境の OS で字面が変わる。
ボタンは 幅 294px × 高さ 56px / border-radius: 0 / 枠 2px。
Primary にも 2px solid transparent を当てて Secondary と寸法を揃えている。
セキュリティ
pill やボタンの直下にテキストノードを置かない。実サイトはラベルの色を子要素(<p> / <strong>)に当てており、
pill 自身の color は黒のまま。直置きすると黒 pill の上に黒文字が出る。
選択されていない項目は白。アクセントを広い面に塗らないことで、10px のマーカーと選択状態だけが際立つ。
--inner-maxWidth: 504px がこのサイトの骨格。デスクトップでも本文は 504px に収まり、
スマホアプリの画面比率をそのまま拡大した構成になっている。
ボトムシートだけ border-radius: 60px 60px 0 0 を持つ。
主ブレークポイントは max-width: 896px(158 ルール)。さらに (hover: hover) を 50 ヶ所で使い、
ホバー効果をポインタデバイスに限定している——スマホ起点のサービスらしい設計。
gap の実測分布は 4px(25 ヶ所)/ 16px(21)/ 24px(12)。4px 基準のスケール。