CSS Custom Properties は 282 個。色は 6 系統 × 8〜12 段でトークン化されている。
--brand-static: #7935d2(実測値)を使う。--purple-700: #7832d2 は 1 トーンずれる。
また --h1-line-height: 48px の宣言に対し実測は 44px、--swiper-theme-color: #007aff は Swiper の既定値で TableCheck の色ではない。
和文 Web フォントは読み込まず、ヒラギノ角ゴ ProN → Yu Gothic UI → 游ゴシック体 → Meiryo UI の OS フォントに任せる。
line-height を比率ではなく px で持つ(16px→24px / 14px→20px)。カードの高さを揃えるための実装なので、比率に置き換えるとグリッドが崩れる。
letter-spacing は すべて normal(明示的に宣言)、font-feature-settings: normal も 3 箇所で明示して palt の継承を切っている。
カードの中にさらに 3 段の店舗リストが入る。1120px に 3 列。
店舗名・ジャンルは 1 行で text-overflow: ellipsis。日本語の途中で切ることを許容する。
① プライマリ #292929 / 白文字 / 1px solid #292929 / radius 4px / 16px 400 / padding 9px 11px ② セカンダリ 1px solid #e5e5e5 / radius 8px / padding 12px ③ テキスト radius 4px / padding 8px
選択中は「面 #f7efff / 枠 1px solid #8e4ae7 / 文字 #292929」、非選択は「面 #fff / 枠 1px solid #e5e5e5 / 文字 #666」。radius は 999px。
チップ(pill / 400 / 絞り込み)とバッジ(4px / 600 / 表示専用)は別物。混同しない。
半透明カードは rgba(255,255,255,.7) の面 + 1px solid var(--lighter-grey-border)(#0000001a)/ radius 8px。
外枠のコンテナが枠と角丸を持ち、input 自体は完全に透明。フォーカスリングは box-shadow のスプレッドで描く。
1px solid #e5e5e5 / radius 8pxbox-shadow: 0 0 0 2px var(--focus)(border は太らせない)input の font-size は 16px を死守する(iOS の自動ズーム回避)。
近い小さな影と遠い大きな影を重ね、どちらも負のスプレッドで要素の外にはみ出させない。
0 1px 2px -1px rgb(0 0 0 / .2),
0 2px 6px -2px rgb(0 0 0 / .1)0 1px 4px -1px rgb(0 0 0 / .2),
0 2px 6px -2px rgb(0 0 0 / .1)0 2px 8px -1px rgb(0 0 0 / .2),
0 2px 12px -4px rgb(0 0 0 / .1)0 0 3px 0 rgba(0, 0, 0, .1)実測で最も多いのは --elevation-small-raised(14 箇所)。カードは既定で影を持たず、浮くもの(ドロップダウン・ポップオーバー)にだけ当てる。
| トークン | 値 | CSS 参照 | 用途 |
|---|---|---|---|
| --border-radius-micro | 2px | — | 極小の装飾 |
| --border-radius-small | 4px | 140 回 | ボタン・バッジ |
| --border-radius-medium | 8px | 8 回 | (large と同値) |
| --border-radius-large | 8px | 123 回 | カード・入力欄 |
| --border-radius-x-large | 16px | 6 回 | ヒーロー画像・大きなパネル |
| --border-radius-full | 999px | 17 回 | 絞り込みチップ |
--z-index-1: 10 / --z-index-2: 20 / --z-index-3: 30 / --z-index-4: 40 — 10 刻みの 4 段だけ。