自然の恵みを、肌へ

ホワイトリリー オードパルファン

SHIRO(shiro-shiro.jp)から抽出したデザイントークンのカタログ。Noto Sans JP のみの単一フォントシステム、font-feature-settings: "palt" グローバル適用、letter-spacing 三段階(0.25em / 0.1em / 0.05em)、ダークネイビー #000030 と白の二極パレット、radius 3px の micro-rounded CTA。computed style 実測値に基づく。


01 / COLORS
カラーパレット
Color Palette
ブランド
Brand Navy
#000030
CTA・見出し・フッター背景
Brand Navy Dark
#000021
Cookie consent バー・オーバーレイ
テキスト
Text Primary
#393c41
本文テキスト
Text Secondary
#949494
ナビ見出し・LIMITED バッジ背景
Text Tertiary
#888888
h5 ラベル・補足テキスト
Text on Dark
#ffffff
ダークネイビー背景上の白テキスト
サーフェス
Surface White
#ffffff
標準背景
Surface Dark
#000030
CTA・フッター背景
Surface Cookie Bar
#000021
Cookie consent バー
Overlay
rgba(0,16,14,.12)
モーダル・オーバーレイ
ファンクショナル
Badge Gray
#949494
LIMITED バッジ背景

02 / TYPOGRAPHY
タイポグラフィ
Typography -- Noto Sans JP 単一フォントシステム / palt グローバル適用
ホワイトリリー オードパルファン
Noto Sans JP / 26px / 400 / line-height: 1.4 / letter-spacing: 1.4pxHeading 1 (c-title02)
SHIRO BEAUTY
Noto Sans JP / 22px / 400 / line-height: 1.5 / letter-spacing: 0.05emHeading 3 (brand info)
新製品
Noto Sans JP / 14px / 400 / line-height: 1.5 / letter-spacing: 0.25emSection Title (c-title01)
SHIRO BEAUTY
Noto Sans JP / 14px / 400 / line-height: 1.5 / letter-spacing: 0.05emHeading 3 EN (brand info)
スキンケア
Noto Sans JP / 14px / 700 / line-height: 1.5 / letter-spacing: 0.1em / color: #949494Nav Heading
フレグランス
Noto Sans JP / 12px / 700 / line-height: 1.5 / letter-spacing: 1.4pxNav Title
北海道の大地が育んだ素材を、そのままに。SHIROは自然の恵みを最大限に引き出し、余計なものを加えず、素材の力を信じたものづくりを続けています。肌にも、心にも、やさしいプロダクトを。
Noto Sans JP / 14px / 400 / line-height: 1.5 / letter-spacing: 0.1emBody
サボン ボディソープ
Noto Sans JP / 14px / 400 / line-height: 1.4 / letter-spacing: 1.4pxProduct Name
酒かす化粧水
Noto Sans JP / 16px / 500 / line-height: 1.5 / letter-spacing: 1.4pxSearch Modal
お知らせ:期間限定アイテムのご案内
Noto Sans JP / 12px / 400 / line-height: 1.5 / letter-spacing: 1.4pxBrand Banner
内容量 200mL
Noto Sans JP / 12px / 700 / line-height: 1.5 / letter-spacing: 1.4px / color: #888888Label (h5)

プロダクト
Product Page Sample
フレグランス

ホワイトリリー オードパルファン

清楚なホワイトリリーの花びらから着想した、透明感のある香り。トップノートにベルガモットとミュゲ、ミドルにホワイトリリーとジャスミン、ラストにホワイトムスクとサンダルウッドが静かに香ります。

素材について
こだわり

SHIROのフレグランスは、天然由来の香料を可能な限り使用しています。北海道の自然環境で育まれた素材と、世界各地から厳選した香料を調香師がブレンド。肌になじむ、やさしく奥行きのある香りに仕上げました。

カートに入れる もっと見る

04 / BUTTONS
ボタン
Buttons -- radius 3px micro-rounded / weight 400
カートに入れる
Primary / filled #000030 / radius 3px / 400
条件クリア
Secondary / outline / radius 3px / 400
もっと見る
Text Link / border-bottom / 400
LIMITED
Badge / #949494 / 700
ダーク背景
購入する
反転 / 白背景 + #000030 テキスト
もっと見る
Text Link / white / border-bottom

製品カード
Product Cards -- shadow なし / radius 0 / フラット
Product Image
LIMITED
フレグランス

ホワイトリリー オードパルファン

¥4,180
Product Image
スキンケア

酒かす化粧水

¥4,180
Product Image
ボディケア

サボン ボディソープ

¥3,630
Product Image
LIMITED
フレグランス

キンモクセイ オードパルファン

¥4,180

06 / FORMS
フォーム
Forms -- radius 3px / focus: border #000030
デフォルト
正しい電話番号を入力してください
フォーカス状態

07 / ELEVATION
奥行き
Depth & Elevation -- シャドウなし、色面コントラストで構成
Level 0 -- White
標準背景。影なし
Level 1 -- Content
通常コンテンツ面。#ffffff
Level 2 -- Dark Navy
CTA・フッター。#000030
Level 3 -- Overlay
モーダルオーバーレイ

08 / LAYOUT
レイアウト
Layout -- spacing scale & grid
4px
12px
16px
24px
32px
NAVY #000030
LIGHT #fafafa
WHITE #fff