CSS Custom Properties を 1 個も持たない。色はセレクタ側に直書きされ、面に使うのはマゼンタ #ff0066 とシアン #00baec の 2 色だけ。中間色を挟まず、ベタ面でブロックを分ける。マゼンタが 2 つあるのは実装の実態で、ピル型 CTA だけ #e81a79 を使う。
本文の文字色は #1a1a1a。純黒 #000000 は面にだけ使い、文字には使わない。
ルートは 14px。html に font-size: 14px / letter-spacing: 0.08em / font-feature-settings: "palt" 1 / line-height: 1.5 / color: #1a1a1a を 1 回だけ書き、可視 448 要素中 417 要素が字間 1.12px を継承する。h1〜h6 はリセットで 14px / weight 400 に潰してあるので、見出しの大きさはクラスが決める。
ウェイトは「太さ」ではなく「書体の選択」。Adobe Fonts の 3 書体はそれぞれ単一ウェイトで配信されている(見出ゴ MB31 = 600 / Rig Shaded = 700 / 凸版文久見出しゴ = 900)。見出ゴ MB31 に 700 を当てるとブラウザの合成太字になり字形が崩れる。
Rig Shaded は欧文専用。スタックは rig-shaded-bold-face, sans-serif で和文グリフを持たないため、同じ要素に日本語が混ざると和文だけ OS 既定に落ちる。実サイトの English 簡体中文 がそれで、意図的に欧文だけ装飾している。
字間は html に 1 回だけ。子要素で letter-spacing を再宣言しないこと。14px × 0.08em = 1.12px が px のまま降りるので、サイズの違う要素でも同じ 1.12px になる。それがこの設計の意図。
Adobe Fonts が揃うまでページ全体を隠す。実サイトは html { visibility: hidden } / html.wf-active { visibility: visible; animation: fadeIn 1s }。Typekit が wf-active を付けるまで白紙になる。再現する場合は取得失敗時の保険を併せて実装すること。
CTA はマゼンタのピル(radius 40px)と黒の矩形(radius 0)の 2 系統。どちらも下パディングを上より 1.4〜1.8px 削って視覚中央に寄せている。バッジの既定 radius は 4px。
| MON | TUE | WED | THU | FRI | SAT | SUN |
|---|---|---|---|---|---|---|
| 29 | 30 | 1 | 2 | 3 | 4 | 5 |
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
実サイトは Google カスタム検索をそのまま使っており、サイト側のフォーム意匠を持たない。新規実装では本文書体・14px・border-radius: 4px に合わせる。
可視要素の box-shadow は 0 種。CSS 全文でも 1 回(slick 由来で可視 0 要素)、filter: drop-shadow() も 0 件。奥行きは色面の重なりと 2px の黒罫で作る。
ブレークポイントはすべて max-width のデスクトップファースト。768px(CSS 内 7 回で最多)/ 640px / 480px / 950px / 1060px。html は 4 幅すべてで 14px 固定で、字間・行間・palt もブレークポイントで変わらない。