ReFa DESIGN.md

Japan

ReFa（https://refa.net/）のデザイン仕様書。MTGが展開するプレミアム美容デバイスブランド。実サイトのCSS computed style に基づく。取得日: 2026-05-09

Raw DESIGN.md

At a glance

Group: Japan
Main color: #000000Black and white design systems
Fonts: Yakuhanjp Hiragino Kaku Gothic ProN Figtree

Colors in this file

#ffffff
On-dark Text
#231815
特徴
#ebeef0
Surface Light
#000000
特徴

ReFa（https://refa.net/）のデザイン仕様書。MTGが展開するプレミアム美容デバイスブランド。実サイトのCSS computed style に基づく。取得日: 2026-05-09

1. Visual Theme & Atmosphere

デザイン方針: 上質なビューティーテックブランド。高級感・洗練・クリーンを徹底し、製品写真とタイポグラフィで世界観を構築する。装飾的な色彩に頼らず、文字の大きさと字間のコントラストで表現力を生み出す
密度: 余白を大きく取ったエディトリアル型。ヒーローは全幅スライダー、セクションは余裕のある構成
キーワード: プレミアム、洗練、清潔感、エディトリアル、ラグジュアリー
特徴: 純粋な黒（#000000）ではなく、ダークチョコレートブラウン #231815 をテキスト色として採用し、温かみのある高級感を演出。アクセントカラーは持たず、タイポグラフィと製品写真がブランドを語る

2. Color Palette & Roles

Brand（ブランドカラー）

Brand Dark (#231815): テキストのプライマリカラー。純黒でなくダークチョコレートブラウンを使用し、柔らかな高級感を生む
On-dark Text (#ffffff): 暗い背景・スライダー上のテキスト

Neutral（ニュートラル）

Text Primary (#231815): 本文・見出し。サイト全体で一貫して使用
Surface Light (#ebeef0): カード背景・スライド背景（rgb 235, 238, 240）— わずかにブルーがかったライトグレー
Background (#ffffff): ページ背景

Border & UI

Border Outline CTA (#ffffff / transparent): アウトラインボタンの枠線。暗い背景上では白、明るい背景上では半透明

Semantic

このブランドは赤（エラー）・緑（成功）等のセマンティックカラーをUIで強調していない。ECフローの必要箇所のみシステムデフォルトを使用する

3. Typography Rules

3.1 和文フォント

ゴシック体（プライマリ）: Noto Sans JP — Google Font。全体のベースに使用
約物処理（Yakuhanjp）: Yakuhanjp — 日本語の約物（読点・句点・括弧等）前後のスペースを除去し、詰まった美しい組版を実現

3.2 欧文フォント

サンセリフ（セクション見出し）: Figtree — Google Font。幾何学的サンセリフ。セクション見出し・英語ラベルに使用
汎用フォールバック: sans-serif

3.3 font-family 指定

css/* 英語見出し（セクションヘッダー・英語ラベル） */
font-family: Yakuhanjp, Figtree, sans-serif;

/* 日本語本文・小見出し */
font-family: Yakuhanjp, "Noto Sans JP", sans-serif;

/* body 要素（ブラウザデフォルトフォールバック） */
font-family: "Hiragino Kaku Gothic ProN", sans-serif;

フォールバックの考え方:

Yakuhanjp を常に先頭に置き、約物の字詰めをすべての要素で有効にする
英語見出しには Figtree（幾何学的サンセリフ）、日本語テキストには Noto Sans JP の順
欧文フォントを先に置くことで、英数字の表示品質を Noto Sans JP の欧文グリフより優先する

3.4 文字サイズ・ウェイト階層

DevTools computed style による実測値（2026-05-09 取得）

Role	Font	Size	Weight	Line Height	Letter Spacing	備考
Hero Slider Label	Noto Sans JP	12px	700	20px (×1.67)	1.2px (0.1em)	ヒーロースライダー見出し
Section Heading EN	Figtree	50px	400	50px (×1.0)	5px (0.1em)	セクション英語見出し
Sub Heading EN	Figtree	30px	400	30px (×1.0)	3px (0.1em)	サブセクション英語見出し
Brand Name JP	Noto Sans JP	24px	400	44.64px (×1.86)	2.4px (0.1em)	ブランド名・日本語見出し
Category Label	Noto Sans JP	14px	400	26px (×1.86)	1.4px (0.1em)	カテゴリラベル
Product Name	Noto Sans JP	12px	700	12px (×1.0)	1.2px (0.1em)	製品名（タイト）
Body	Noto Sans JP	14px	400	26px (×1.86)	1.4px (0.1em)	本文・説明文
Nav Label JP	Noto Sans JP	14px	400	26px (×1.86)	1.4px (0.1em)	ナビゲーション日本語
Nav Label EN	Figtree	12px	400	22.32px (×1.86)	1.2px (0.1em)	ナビゲーション英語
Small / Legal	Noto Sans JP	10px	400	16px (×1.6)	2px (0.2em)	注釈・法的テキスト

3.5 行間・字間

行間 (line-height) — 実測値:

英語大見出し (50px/30px Figtree): 1.0 — タイトな行間で劇的な視覚インパクト
日本語見出し・本文 (14px/24px): 1.86（= 26px/14px）— 標準的な日本語読み物の行間
製品名 (12px bold): 1.0 — タイトな行間で凝縮感を出す
小テキスト (10px): 1.6 — 注釈類は読みやすさを確保

字間 (letter-spacing) — 実測値:

全要素共通ベース: 0.1em — これがReFaの最大の特徴。通常サイトの2〜3倍の字間をすべてに適用し、高級感と空気感を演出
小テキスト (10px): 0.2em — 最小サイズには字間をさらに広げて可読性を確保
英語大見出し (50px): 5px = 0.1em — 大きなサイズでも比率を維持

ガイドライン:

letter-spacing: 0.1em がサイト全体のユニバーサルベース。例外なく適用する
英語大見出しは line-height: 1.0 のタイト設定と 0.1em の字間の組み合わせがブランドの核
日本語テキストは line-height: 1.86 で可読性とゆとりを両立

3.6 禁則処理・改行ルール

css/* 標準的な設定 */
word-break: break-word;
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

Yakuhanjp が約物の前後スペースを自動除去するため、手動での word-spacing 調整は不要
フォントスムージングを有効にし、macOS・Retina ディスプレイでの表示品質を確保

3.7 OpenType 機能

css/* すべての要素にグローバル適用 — 実測確認済 */
* {
  font-feature-settings: "palt";
}

palt（プロポーショナル字詰め）: Yakuhanjp と組み合わせ、全要素に適用。本文・見出し・ナビゲーション・ボタンすべてで有効
これはnote（見出し専用）とは異なるアプローチ。ReFa では palt のグローバル適用がブランドの組版ルール
Yakuhanjp + palt のダブル適用で、日本語の約物周りをより美しく詰める

3.8 縦書き

該当なし。ReFa は横書きのみ

4. Component Stylings

Buttons

Outline CTA（プライマリ）

Background: transparent
Text: #ffffff（暗い背景上）
Border: 1px solid #ffffff
Border Radius: 30px（pill形状）
Font: Figtree, 12px, weight 400
Letter Spacing: 0.1em
用途: ヒーロースライダー上の「ONLINE SHOP」等の主要CTA

Outline CTA（製品ページ）

Background: transparent
Border: 1px solid currentColor
Border Radius: 50px（よりフルなpill）
Letter Spacing: 0.1em
用途: 製品詳細ページのアクション

デザイン方針: ReFa には塗りつぶしボタン（filled button）がない。アウトラインのpillボタンがブランドのCTAスタイル。色で主張するのではなく、形とタイポグラフィで存在感を示す

Cards

Background: #ebeef0（Surface Light）またはプロダクト写真
Border: なし（シャドウも基本なし）
Border Radius: 控えめな角丸（明確な値は文脈依存）
Padding: 余裕のあるインナー余白

Navigation

Background: #ffffff（または半透明）
Text: #231815
Nav Link JP: 14px, Noto Sans JP, letter-spacing 1.4px (0.1em)
Nav Link EN: 12px, Figtree, letter-spacing 1.2px (0.1em)

Product Slider / Gallery

Background: #ebeef0
テキストオーバーレイ: #231815 on light / #ffffff on dark
スライダーコントロール: シンプルなドット or 矢印

5. Layout Principles

Spacing Scale

ReFa は明示的なデザイントークンのスペーシングスケールを公開していないが、実測から以下が推定される:

Token	Value	用途
XS	8px	インラインの内側余白
S	16px	コンポーネント内の余白
M	32px	セクション内の余白
L	64px	セクション間の余白
XL	96px	大セクションの余白
XXL	120px〜	ヒーロー・フルスクリーンセクション

Container

Max Width: 1440px（フルワイドビジュアル）— 製品写真を最大限に活かす設計
Padding (horizontal): 40〜60px（デスクトップ）

Grid

製品一覧: 2〜4カラムグリッド（viewport幅に応じて変化）
ヒーロー: フルワイド（100vw）

6. Depth & Elevation

Level	Shadow	用途
0	none	カード・フラット要素（基本はシャドウなし）
1	`0 2px 8px rgba(35,24,21,0.08)`	ホバー時のカード等（推定）

ReFa は基本的にフラットデザイン。エレベーションよりも背景色（#ebeef0）の面で要素を区切る
ドロップシャドウを多用せず、製品写真の立体感で奥行きを表現する

7. Do's and Don'ts

Do（推奨）

テキスト色は #231815（ダークチョコレートブラウン）を使い、純粋な #000000 を避ける
letter-spacing: 0.1em をすべてのテキストに適用する（ReFa のブランド字間）
font-feature-settings: "palt" をグローバルに適用する（Yakuhanjp と組み合わせて使う）
英語見出しには Figtree を使い、日本語テキストには Noto Sans JP を使う
CTAボタンはpill形状（border-radius 30px〜50px）のアウトラインスタイルに統一する
大見出し（英語）は line-height: 1.0 + letter-spacing: 0.1em のタイト組みで表現力を出す
日本語本文は line-height: 1.86 で余裕のある行間を確保する
font-family は必ず Yakuhanjp を先頭に置き、約物の字詰めを有効にする

Don't（禁止）

純粋な #000000 をテキストに使わない（ブランドの暖かみが失われる）
塗りつぶしボタン（solid/filled button）を作らない（ReFa のCTAはアウトライン一択）
letter-spacing: 0 または letter-spacing: normal にしない（高級感が消える）
palt を見出しだけに絞らない（ReFa はグローバル適用がルール）
Figtree と Noto Sans JP を混在させる場合、font-family チェーンの順序を崩さない
10px 未満のフォントサイズを使わない（最小は 10px）
line-height: 1.0 を日本語本文に適用しない（英語大見出し専用の設定）
アクセントカラー（赤・青・オレンジ等）を装飾目的で追加しない（モノクロームなカラー設計を守る）

8. Responsive Behavior

Breakpoints

Name	Width	説明
Mobile	≤ 767px	モバイルレイアウト。1カラム
Tablet	≤ 1024px	タブレット。2カラムに移行
Desktop	> 1024px	デスクトップ。フルワイドビジュアル

タッチターゲット

最小サイズ: 44px × 44px（WCAG基準）
Pillボタンは高さ 44px 以上を確保する

フォントサイズの調整

英語大見出し (50px): モバイルでは 28〜36px 程度に縮小
日本語見出し (24px): モバイルでは 18〜20px に調整
本文 (14px) とNav (12px〜14px): 変更なし
letter-spacing: 0.1em の比率は viewport に関係なく維持する

9. Agent Prompt Guide

クイックリファレンス

Text Primary: #231815（ダークチョコレートブラウン — 純黒は使わない）
On-dark Text: #ffffff
Surface Light: #ebeef0
Background: #ffffff

Font EN (見出し): Yakuhanjp, Figtree, sans-serif
Font JP (本文・ラベル): Yakuhanjp, "Noto Sans JP", sans-serif

Body Size: 14px
Body Line Height: 1.86
Universal Letter Spacing: 0.1em（全要素共通）
Small Label Letter Spacing: 0.2em（10px以下のテキスト）

Section Heading EN: 50px, weight 400, line-height 1.0, letter-spacing 0.1em, Figtree
Sub Heading EN: 30px, weight 400, line-height 1.0, letter-spacing 0.1em, Figtree
Brand Name JP: 24px, weight 400, line-height 1.86, letter-spacing 0.1em, Noto Sans JP

CTA Button: pill (border-radius 30〜50px), outline only, transparent bg
palt: グローバル適用（全要素）

プロンプト例

ReFa のデザインシステムに従って、製品カード一覧を作成してください。
- テキスト色: #231815（ダークチョコレートブラウン。#000000 は使わない）
- カード背景: #ebeef0、ページ背景: #ffffff
- フォント（英語見出し）: Yakuhanjp, Figtree, sans-serif
- フォント（日本語）: Yakuhanjp, "Noto Sans JP", sans-serif
- font-feature-settings: "palt" をすべての要素に適用
- letter-spacing: 0.1em をすべてのテキストに適用
- 本文 line-height: 1.86、英語大見出し line-height: 1.0
- CTAボタン: border-radius 30px のアウトラインpill。塗りつぶし不可
- shadow なし。フラットデザイン

Use it with your agent

Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.

Download

curl -o DESIGN.md https://www.uiskillbook.com/design-md/refa.md

MCP server

https://www.uiskillbook.com/mcp

MCP tool call

get_design_md({ "slug": "refa" })

and wander（アンドワンダー）

Japan · helvetica neue

and wander（https://www.andwander.com/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。

ATON

Japan · AkkuratLLWeb

ATON（https://aton-tokyo.com/）のデザイン仕様書。 2026-05-19 取得の computed style に基づく。

AURALEE（オーラリー）

Japan · Marcellus

AURALEE 公式サイト（https://auralee.jp/）のデザイン仕様書。デザイナー・岩井良太による 2015 年設立の日本のコンテンポラリーファッションブランド。上質な素材と独自の風合いで国内外から高く評価される。実サイトの computed style 実測（2026-05-08 取得）に基づく。

cado（カドー）

Japan · Helvetica

cado（https://cado.com/）のデザイン仕様書。 2026-05-09 取得の computed style に基づく。

CLASKA

Japan · Hiragino Kaku Gothic ProN

株式会社 CLASKA 公式サイト（https://www.claska.com/）のデザイン仕様書。かつてのデザインホテルを出自とする、東京・目黒のデザインカンパニー。Gallery & Shop "DO"、GALLERY CLASKA、HOIM（家具）、WHOLESALE、オンラインショップ、HÅU（ファッション）を展開する。実サイトの computed style 実測（2026-05-08 取得）に基づく。

DECORTE

Japan · Noto Serif JP

DECORTE（https://www.decorte.com/）のデザイン仕様書。 KOSE の最高峰ラグジュアリーコスメティクスブランド。実サイトの computed style に基づく。

All Design.md files Browse by font