ゆらぎに、凛と。芽吹きの生命水。
大人のゆらぎに寄り添う「インクリーゼ」誕生
01
Base（地）
Neutral
html / body はどちらも透明で、塗っているのは各セクション。トップはヒーローが写真なので白く見えるが、商品一覧などの下層ページは全面が #f8f5f5（12 点サンプル中 9/9 が一致）。
02
line-height: 1.0 は 1 行要素専用。 実サイトは line-height が font-size と同値の要素が非常に多いが、これは 1 行で収まるラベル・見出し・ナビに限った設計。段落を組むときは 1.7〜1.8 に上げる。0.04em、Poppins の欧文見出し 0.155em。混ぜない。
03
Notification Bar
Badges
Circle（アイコン・ドット・個数）
1px solid #c8c8c8 ＋ border-radius: 25px の pill。面色で優先度をつける設計を持たず、優先度はサイズと配置でつける。border-radius: 0px。pill と矩形を意図的に使い分けている。
04
05
06
Surfaces
07
| 項目 | 値 | 備考 |
|---|---|---|
| Root font-size | 16px | 375px〜1920px で固定 |
| Body font-size | 16px | ブレークポイントを跨いでも固定 |
| Container | max-width なし | % と固定 width で組む |
| Grid gap | 18px | 商品カードは 3〜4 カラム |
| Breakpoints | 641 / 767 / 1024 / 1068 / 1176px | media query の実在値 |
| Border radius | 25px / 15px / 50% / 0px | CTA は pill、バッジは矩形、アイコンは円 |
| Box shadow | none | 例外なし |
| font-feature-settings | normal | palt を使わない。字詰めは letter-spacing で明示 |
rgb(0, 0, 238) は計測失敗ではない。 実サイトの <a> に UA 既定のリンク青が出るが、該当要素は直下に <img> しか持たない画像リンクでテキストノードを持たないため。子要素まで辿ると正しい色が当たっている。<a> の直下にテキストを置くなら必ず color を明示する。省略すると UA 青に落ちる。