BEAUTY TECH BRAND

ONLINE SHOP

ReFa（refa.net）から抽出したデザイントークンのカタログ。Figtree（英語見出し）と Noto Sans JP（日本語）のデュアルフォントシステム、font-feature-settings: "palt" グローバル適用、letter-spacing 0.1em 全要素統一、ダークチョコレートブラウン #231815 と白の二極パレット、pill形状アウトライン CTA（radius 30px）。computed style 実測値に基づく。

ONLINE SHOP 詳しく見る
01 / COLORS
Colors
カラーパレット — アクセントカラーなし。タイポグラフィと製品写真がブランドを語る
BRAND
Brand Dark
#231815
テキスト・ヒーロー背景・フッター。ダークチョコレートブラウン
On-dark Text
#ffffff
暗い背景・スライダー上のテキスト
NEUTRAL
Text Primary
#231815
本文・見出し。サイト全体で一貫して使用
Surface Light
#ebeef0
カード背景・スライド背景。わずかにブルーがかったライトグレー
Background
#ffffff
ページ標準背景
FUNCTIONAL
Overlay
rgba(35,24,21,.08)
ホバーオーバーレイ・モーダル背景
02 / TYPOGRAPHY
Typography
デュアルフォント — Figtree（英語見出し）+ Noto Sans JP（日本語）/ palt グローバル適用 / letter-spacing 0.1em 全要素統一
BEAUTECH DRYER
Figtree / 50px / 400 / line-height: 1.0 / letter-spacing: 5px (0.1em)Section Heading EN
CARAT RAY FACE
Figtree / 30px / 400 / line-height: 1.0 / letter-spacing: 3px (0.1em)Sub Heading EN
リファ ビューテック ドライヤー
Noto Sans JP / 24px / 400 / line-height: 1.86 / letter-spacing: 2.4px (0.1em)Brand Name JP
ヘアケア
Noto Sans JP / 14px / 400 / line-height: 1.86 / letter-spacing: 1.4px (0.1em)Category Label
ReFa BEAUTECH DRYER PRO
Noto Sans JP / 12px / 700 / line-height: 1.0 / letter-spacing: 1.2px (0.1em)Product Name
プラチナGPSコア電球を使用した独自技術が、頭皮へのさわやかな刺激と美しいツヤ髪を実現。熱ダメージを最小限に抑えながら、素早く乾かすことができます。日常のヘアケアをワンランク上に引き上げる、プレミアムビューティデバイス。
Noto Sans JP / 14px / 400 / line-height: 1.86 / letter-spacing: 1.4pxBody
SKINCARE / HAIRCARE / BODYCARE
Figtree / 12px / 400 / line-height: 1.86 / letter-spacing: 1.2pxNav Label EN
BEAUTY TECH BRAND
Noto Sans JP / 12px / 700 / line-height: 1.67 / letter-spacing: 1.2pxHero Slider Label
※本製品は医療機器ではありません。効果には個人差があります。
Noto Sans JP / 10px / 400 / line-height: 1.6 / letter-spacing: 2px (0.2em)Small / Legal
03 / PRODUCT
Product
プロダクトページサンプル — Product Page Sample
HAIRCARE

BEAUTECH DRYER

ReFa ビューテック ドライヤー プロ

独自のプラチナGPSコア電球技術により、頭皮への心地よい刺激と美しいツヤ髪を同時に実現。高速乾燥と熱ダメージ低減を両立し、毎日のヘアケアに革新をもたらすプレミアムビューティデバイスです。

TECHNOLOGY
独自技術

「プラチナGPSコア電球」が発する複合的な光の刺激が、頭皮環境を整えながら毛髪のキューティクルを保護。国内外での特許技術を搭載し、サロンクオリティの仕上がりを自宅で体験できます。

  • 風量：1.9 m³/min
  • 重量：440g
  • コード長：1.8m
ONLINE SHOP 製品詳細を見る
04 / BUTTONS
Buttons
ボタン — pill形状（border-radius 30px）/ アウトラインのみ / 塗りつぶしなし
ONLINE SHOP
Outline CTA / border #231815 / radius 30px / Figtree 12px
詳しく見る
Text Link / border-bottom / Noto Sans JP 14px
DARK BACKGROUND
ONLINE SHOP
Outline CTA / border #fff / ダーク背景
製品詳細を見る
Text Link / white / ダーク背景
05 / CARDS
Cards
製品カード — Product Cards / #ebeef0 背景 / shadow なし / フラット
Product Image
HAIRCARE

ReFa BEAUTECH DRYER PRO

¥53,900
Product Image
SKINCARE

ReFa CARAT RAY FACE

¥44,000
Product Image
BODYCARE

ReFa LUMI STOP

¥26,400
Product Image
SKINCARE

ReFa FINE BUBBLE S

¥55,000
06 / FORMS
Forms
フォーム — border 1px / radius 2px / focus: border #231815
DEFAULT
正しい電話番号を入力してください
FOCUS STATE
07 / ELEVATION
Elevation
奥行き — Depth & Elevation / 基本フラット。背景色の面と製品写真の立体感で奥行きを表現
Level 0 -- White
ページ標準背景。影なし。#ffffff
Level 1 -- Surface Light
カード・スライド背景面。#ebeef0
Level 2 -- Hover Shadow
ホバー時のカード等（推定）。rgba(35,24,21,0.08)
Level 3 -- Brand Dark
ヒーロー・フッター背景面。#231815
08 / LAYOUT
Layout
レイアウト — spacing scale / max-width 1440px / horizontal padding 40〜60px
8px / XS
16px / S
32px / M
64px / L
96px / XL
DARK #231815
LIGHT #ebeef0
WHITE #ffffff