自社の CSS 変数は 6 個だけ(--base_color --hover_color --content_width --chg_width_cmn --chg_width_hdr --gb_lr_margin)。赤 #ff000f はロゴの縦線と見出しの左罫にしか出てこない。
トップで最も多い塗り色 #80b538(可視 178 要素)はブランド色ではない。イベントカレンダーの Events Manager プラグイン既定色なので採用しない。同じく --vk-color-background-red: #dc3545 などは VK Blocks の既定で可視 0 要素。
html / body に背景色の宣言が無い(canvasUnpainted: true)。白は UA 既定であって指定ではないので、新規実装では background: #ffffff を明示する。
和文は TypeSquare(モリサワ)配信の あおとゴシック L(可視 131 要素)と DB(可視 11 要素)の 2 段だけ。font-weight は 400 が 184 要素で、700 はトップの News 1 要素のみ。太さは書体名で切り替える。
このプレビューの代替書体について。本番の あおとゴシック L / DB はドメインライセンスのためローカルで表示できないので Zen Kaku Gothic New で代替している。実サイトの font-weight は 400 だが、代替書体の 400 は あおとゴシック L より明らかに太いため、このプレビューだけ 300 を当てている(左側の表記「400」は実サイトの値)。
letter-spacing は normal が既定(トップ可視 185 要素中 177 要素、下層 76 要素中 75 要素)。それでいて font-feature-settings: "palt" がトップで 3309 要素に効いている。「字間は足さないが、約物の空きは詰める」。どちらか片方だけ真似しないこと。
line-height が em 単位で宣言されている。16px の親に 1.7em と書くと 27.2px という絶対値が降り、12px のフッターリンクでは実測比 2.27 になる。単位なしの 1.7 に書き換えると別物になる。
見出しに line-height を指定していない。h1 44px・h2 30px・ナビ 18.99px はすべて normal で、書体のメトリクスに任せている。
実サイトの font-family は "あおとゴシック L" 1 つだけでフォールバックが無い。TypeSquare が落ちると UA 既定(多くの環境で明朝)になる。新規実装ではヒラギノ → 游ゴシック Medium → sans-serif を続けること。CSS にある "あおとゴシック B" / "あおとゴシック R" は配信されておらず可視 0 要素なので書かない。
ボタンは border-radius: 900px の完全なピル。バッジも同じ。カードと画像には角丸を付けない。
実サイトのピルボタンは高さ 31px でタッチ基準(44px)に届いていない。このプレビューでは min-height: 44px を足している。新規実装でも足すこと。
サムネイルとテキストの縦積み。タイトルだけ あおとゴシック DB に切り替えて、font-weight は 400 のまま。
検索欄は あおとゴシック L / 14.4px / color #555555。実サイトの送信ボタンだけ書体が Arial 13.33px のまま残っているので、実装時は揃えること。
gap は 5px(カレンダー 181 要素)/ 40px / 64px の 3 値だけ。左右の外側余白は --gb_lr_margin: 28px。
主ブレークポイントは max-width: 880px(--chg_width_hdr、実測 60 回)。1440 / 1200 / 834 / 375px のいずれでも body は 16px / lh normal / ls normal で、流体ルートもサイズ切替も無い。縮むのは見出しとレイアウトだけ。
Bootstrap 系の 575.98 / 767.98 / 991.98 / 1199.98px は VK Blocks 由来で自社の設計ではない。設計として追うのは 880px と 769px(--chg_width_cmn)と 480px の 3 つ。