ブランド色は「金茶」1 系統。--Color-Primary-Gold-70: #cab270（CSS 出現 154 回）を面に、Gold-60: #9f8745（138 回）を文字に使い分ける。トーナルスケールは Material 3 と同じ「0 が黒・100 が白」で、数字が大きいほど明るい。以下はすべて computed style と user-*.css（731KB）の実測値（2026-08-28 取得）。
⚠️ トーナルスケールの向きに注意。 Gold-70（#cab270）は Gold-60（#9f8745）より明るい。「数字が大きいほど濃い」他システムの慣習とは逆向き。
| px 値 | CSS 出現 | 主な適用サイズ | em 換算 |
|---|---|---|---|
.5px | 111 回 | 10〜16px の本文・ラベル | 0.031〜0.05em |
.4px | 152 回 | 12px のチップ | 0.033em |
.25px | 87 回 | 14px の商品説明 | 0.018em |
.15px | 109 回 | 16px の見出し | 0.009em |
.1px | 66 回 | 14px の太字・明朝見出し | 0.007em |
小さい文字ほど em 換算で字間が広がる設計（10px で 0.05em、16px で 0.009em）。px のまま移植すると比率が壊れるので、em に換算してから使うこと。
| 対象 | 指定 |
|---|---|
| 本文・見出し | "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, Osaka, "MS PGothic", arial, helvetica, "Lucida Grande", sans-serif |
| 金色のセクション見出し | "Noto Serif JP", serif ＋ color: #9f8745 ＋ text-align: center |
| 一部の小バッジ・数字 | Arial, sans-serif（22 回） |
※ ProN ではなく Pro。旧字体の字形（辻 葛 等）が JIS90 系になる。Apple 日本語サイトと同じ選択。
※ Windows 向けにメイリオ → MS Pゴシックまで下げるレガシー寄りのスタックだが、先頭がヒラギノなので Mac / iOS では正しく組まれる（メイリオ先頭のスタックとは別物）。
※ 明朝は Web フォントではなく OS の Noto Serif JP に任せる。このプレビューでは Google Fonts から読み込んで再現している。
※ font-feature-settings: normal。palt を使わず、letter-spacing で調整する。
佐久盆地の東の斜面で、家族 3 人でとうもろこしを育てています。夜になると気温が 15 度近くまで下がるので、日中に光合成でつくった糖が実にたまります。
とうもろこしは、収穫した瞬間から糖が落ちはじめます。だから午前 4 時に畑へ入り、実の温度が上がらないうちにもぎ取って、その日のうちに冷蔵便で出します。市場を通さない食べチョクだから、翌日には食卓に届きます。
届いたら、まず 1 本を生のままかじってみてください。皮が薄いので、そのまま噛めます。残りは皮ごとレンジで 5 分。ゆでるより甘みが逃げません。
※ 天候・収穫状況により、お届け日が前後する場合があります。
| 種別 | 面 | 文字 | Radius | Padding | Size |
|---|---|---|---|---|---|
| トレンド | #cab270 | #ffffff | 20px | 8px 12px | 12px / 700 / .4px |
| グランプリ受賞商品 | #cab270 | #ffffff | 16px | 4px 8px | 12px / 700 / .4px |
| お知らせ | #f45800 | #ffffff | 4px | 4px 8px | 14px / 700 / .1px |
| すぐに出荷 | #f5f1eb | #000000 | 20px | 4px 6px | 10px / 700 / .5px |
| レビュー感情 | #f5f1eb | #9f8745 | 14px | 0 8px 0 0 | 12px / 600 / .5px |
| サイズ | #e9e9e9 | #000000 | 16px ＋ 1px solid #e9e9e9 | 0 8px | 10px / 600 / .5px |
| 産地 | #f9f9f9 | #212121 | 28px ＋ 1px solid #e9e9e9 | 10px 14px | 14px / 700 / .5px |
面は白、文字は #222222、radius 30px、padding 6px 6px 6px 18px、13px / 700。色は枠線にだけ乗せる。
プレースホルダは #b8b8b8（Gray-70）。エラーの文字は #c30d23（Red-40）。
カードに影を付けない。 代わりに 1px solid #e9e9e9 の罫か、生成り #f5f1eb の面で区切る。
| Value | 出現 | 用途 |
|---|---|---|
4px | 149 回 | ボタン・カード・入力欄・バッジ。既定 |
50% | 105 回 | アイコンの円・アバター |
8px | 38 回 | アウトラインボタン・大きめのカード |
16px | 38 回 | チップ |
20px | 15 回 | ピル型チップ |
12px / 10px | 各 12 回 | 中サイズ |
0 | 10 回 | セクション帯・テキスト CTA |
| 項目 | 値 | 出現 |
|---|---|---|
| Container | 1240px | 5 回（他に 1200px / 1000px） |
| 記事系の狭いブロック | 700px / 600px / 500px / 400px | — |
| Desktop | min-width: 769px | 421 回 |
| Mobile | max-width: 768px | 284 回 |
| 中間 | max-width: 960px / min-width: 961px | 10 回 / 9 回 |
| Wide | min-width: 1239px | 4 回 |
| Small Mobile | max-width: 414px | 4 回 |