私のお気に入り
透明感*あふれる、きらめくツヤ肌へ
UV Care Kit
数量限定キット＆サンプル プレゼント

*メイクアップ効果による

Colors
地が生成り（#f0ebe1）で、手前に来るものが白（#ffffff）。一般的な「白地 ＋ グレーの面」と明度の方向が逆。
Base — 生成りの 5 段
Body
#f0ebe1
ページ地色。--body-color / --color-primary-background
Surface
#ffffff
商品カード・ドロワー・入力・選択タブ
Surface Warm
#f9f7f3
非選択タブ。白と地の中間
Beige Button
#efebe2
「新規会員登録」の面。地との差は 1
Beige Deep
#dfd4bf
コレクションのヘッダー帯
Brand — 有彩色は 3 系統だけ
Sage
#6c8b7e
実行の色。読み込み・送信・フォーカス
Terracotta
#e96952
お気に入りの縦タブ
Terracotta Muted
#ca6e61
定期お届け便ラベル・エラー
Slate
#344150
ログインボタンの面
Neutral
Ink
#304251
既定の文字色。青みのあるスレート
Ink Alt
#3e4a58
商品ラベルの文字。新規実装では Ink に統合してよい
Border
#dad1ca
カードの枠・区切り罫。グレーではない
Muted
#7d7d7d
絞り込みタグの枠と文字
Sold Out
#000000
サイト唯一の純黒の面（文字は白 / 700）
Typography
読ませる文字は明朝、操作する文字はゴシック。書体が 3 系統に分かれる。
Moments of Care
Bentham / 32px（SP 24px）/ 400 / lh 1.4 (44.8px) / letter-spacing 1pxセクション見出し — 常に英語
【Waphyto×kuroneko】愛用品から生まれた、ふたつの特別なコラボキット
Noto Serif JP / 18.06px / 400 / lh 1.4 (25.28px) / letter-spacing 0.7pxカードタイトル — 明朝のまま太らせない
Products 製品情報
秀英角ゴシック銀（代替 Zen Kaku Gothic New）/ 18px / 500 / lh 2.0 (36px)ドロワーナビ — UI だけゴシック
本文 — 東濃の植物と発酵の技術から生まれた植物療法ブランドです。14px という小さい本文を、行間 2.0 と字間 0.05em だけで読ませます。行間を 1.6 に詰めると、この設計は成立しません。
Noto Serif JP / 14px / 400 / lh 2.0 (28px) / letter-spacing 0.7px（0.05em）本文 — サイトの基準（16px ではない）
ログイン　もっと読み込む　新規会員登録
秀英角ゴシック銀 / 14px / 500 / lh 1.5 / letter-spacing 1pxボタン — 字間を 1px に上げる
デリケートゾーン用洗浄料 定期お届け便対象 ごわつき・乾燥 Sold Out
Noto Serif JP / 11px / 400（Sold Out のみ 700）/ letter-spacing 0.7pxラベル — 属性は面あり、状態は枠だけ
私のお気に入り
Noto Serif JP / 12px / 400 / lh 2.5 (30px) / writing-mode: vertical-rl縦タブ — 本文カラムに縦組みは持ち込まない
Topics
写真の上に英語見出しを白抜きで重ね、和文タイトルは写真の下に置く。
Moments of Care
【Waphyto×kuroneko】愛用品から生まれた、ふたつの特別なコラボキット
UV Care Kit
【新UVクリーム発売記念】紫外線対策も、素肌づくりも。この夏だけの特別なセットをご用意しました。
Subscription Service
Waphytoの便利な定期お届け便｜今なら新規ご契約で嬉しい特典つき。
Products
商品グリッドは PC 5 カラム / タブレット 3 カラム / モバイル 2 カラム。
おすすめアイテム
初めての方に
ボディウォッシュ
ボタニカル ボディウォッシュ
¥4,180
定期お届け便対象
スキンケアUVクリーム
¥4,950
デリケートゾーン用洗浄料
フェミニン ウォッシュ
¥3,850
ごわつき・乾燥
モイスチャー ローション
¥5,500
もっと読み込む

カードは面 #ffffff ＋ 1px solid #d8d1cb ＋ radius 0 ＋ padding 30px 30px 10px（下だけ 10px に詰める）。罫は生成りで、グレーの罫を使わない。

Buttons
すべて border-radius: 0px。角丸は 1 つも無い。
もっと読み込む
Primary — 面 #6c8b7e（実行）
ログイン
Dark — 面 #344150
新規会員登録
Beige — 面 #efebe2 ＋ 黒文字
すべての商品
Outline — 1px solid rgba(48,66,81,.5)
Forms
入力欄も明朝（Noto Serif JP / 14px / 行間 2.0）。
デフォルト — 1px solid #dad1ca / radius 0
フォーカス — border #6c8b7e（セージ）。影は付けない
エラー — border #ca6e61（Terracotta Muted を流用）
Textarea も radius 0
送信は Sage の矩形（radius 0）
Elevation
影は 1 種類だけ。奥行きは「地より明るい白」で作る。
地 #f0ebe1
ページ全体・ヘッダー
面（温）#f9f7f3
非選択タブ
面（白）#ffffff
カード・入力・選択タブ
Level 1
0 0 25px rgba(0,0,0,.2)
お気に入り縦タブのみ
Layout
余白は 5 の倍数で刻む。
XS 5
S 10
M 15
L 20
XL 30
XXL 40
Main Container 1200px
商品カラム 1/5（PC）→ 1/3（タブレット）→ 1/2（モバイル）

ヘッダーは地と同じ #f0ebe1、高さ 88px 前後。ロゴは常に中央に置き、左にハンバーガー、右に検索とカートを配置する。

Generated from waphyto.com DESIGN.md — awesome-design-md-jp / computed style 実測値（2026-08-15）
本文の "Noto Serif JP" と欧文見出しの Bentham はどちらも Google Fonts にあるため、実サイトと同じ書体で表示している。
UI の dnp-shuei-gothic-gin-std（秀英角ゴシック銀 / DNP・Adobe Fonts）だけがドメインライセンスのため表示されず、ここでは Zen Kaku Gothic New で代替している。