PALETTE
CTA の緑・価格の緑・フォーカスの緑は別物。トークンの --service-color-primary は主色ではない。
金 #d4b932 / 銀 #94a1a9 / 銅 #d29c4b / 4位以下 #195c32。ランキングバッジだけ角丸なし。
| トークン | 宣言 | 実測 |
|---|---|---|
| --service-color-primary | #52a530 | CTA・見出しは #63a351。#52a530 は割引価格のみ（22要素） |
| --service-size-lineheight-primary | 1.7 | 本文は 1.8（14px/25.2px、16px/28.8px）。1.7 の実測はほぼ無い |
| --service-size-letterspacing-primary | 0.04em | 既定は 0.3px（≒0.021em）。0.04em は欧文優先スタックの一部のみ |
| --n-border-radius-max | 100vmax | 0 件。実装のピルは 9999px / 1440px |
| --service-color-border-primary | #dedede | 実装で使われるのは #dddddd（alias 層） |
line-height: 1.7 / letter-spacing: 0.04em で実装すると、行間も字間も実サイトより開く。 実装値の 1.8 と 0.3px を使うこと。主色も同様に、トークンの #52a530 ではなく実測の #63a351 を採る。TYPOGRAPHY
文章は "Noto Sans JP", Roboto、価格や評価など数字が主の箇所は Roboto, "Noto Sans JP" に切り替える。
本文とカード内で line-height が 1.8 と 1.2 に割れている。 読ませる文章は 1.8、カード内の商品名や数値は 1.2 に詰める。この 2 値の使い分けが nosh の組版の骨格で、全部 1.8 にすると商品一覧が間延びする。
palt は実測 0 件（DOM 全走査 6,449 要素）。足すと商品名の字送りが変わり、カードの 2 行クランプが崩れる。
FORM
入力欄は border-radius: 3px、高さ 40px、font-size: 16px。フォーカスは枠色を #39bf00 に変えるだけで outline は出さない。
ご注文の確認をお送りします
枠色が #39bf00 に変わる
郵便番号を 7 桁でご入力ください
いつでも変更・スキップできます
ELEVATION
可視要素で影を持つのは 3 件だけ。奥行きは「生成りの地 / 白いカード / 1px の枠」で表現する。
box-shadow: none0 4px 4px rgba(0,0,0,.25)カードに影を付けないこと。
LAYOUT
余白は --service-size-0〜10（4→256px）から選ぶ。
| Token | Value | |
|---|---|---|
| --service-size-0 | 4px | |
| --service-size-1 | 8px | |
| --service-size-2 | 16px | |
| --service-size-3 | 24px | |
| --service-size-4 | 32px | |
| --service-size-5 | 48px | |
| --service-size-6 | 64px | |
| --service-size-7 | 96px | |
| --service-size-8 | 128px |
| 固定高さ | Value | トークン |
|---|---|---|
| ヘッダー（LP） | 90px | --n-c-header-height |
| ヘッダー（アプリ内） | 70px | --n-l-header-height |
| 上部バナー | 50px | --n-p-horizontal-banner-height |
| パンくず | 45px | --n-p-user-breadcrumb-height |
| カート送信ボタン | 80px | --n-c-button-cart-submit-height |
| Breakpoint | Width | 出現数 / 説明 |
|---|---|---|
| Mobile | < 481px | 既定（ベーススタイル） |
| Small | ≥ 481px | 95 |
| Tablet | ≥ 768px | 1,628 — 主ブレークポイント |
| Desktop | ≥ 1024px | 257 — 2〜3カラム化 |
| Wide | ≥ 1180px | 162 |
| Extra Wide | ≥ 1480px | 30 |
min-width で書かれたモバイルファースト設計。 補助的に (any-hover: hover)（61件）でホバー演出をポインタ環境に限定し、タッチでのちらつきを避けている。