Design System Preview

DESIGN.md から抽出したデザイントークンのカタログ。Akzidenz-Grotesk の代替として Inter を使用。weight 400 のみ、border-radius 0、ゴーストボタンのみ、影なし。computed style 実測値に基づく。

All Products Design.md

01 / Colors

Color Palette

Brand

Brand Accent

#dfda64

ティッカーバナー・装飾

Text

Text Primary

#333333

本文テキスト

Text Secondary

#595757

補足・フッターナビ

Text on Dark

#ffffff

暗い背景上のテキスト

Surface & Border

Background

#ffffff

ページ背景

Surface Tag

#f2f2f2

タグ背景

Tag Hover

#ededed

タグホバー

Border CTA

#595757

プライマリCTA枠線

Border Secondary

#bfbfbf

セカンダリ枠線

Border Light

#b9b9b9

ジャーナルリンク枠

Banner Muted

#999999

グレーティッカー背景

02 / Typography

Typography Hierarchy

Category Section Heading (h3)

18px / 400 / line-height: 1.0 / letter-spacing: 0.5px

Section Title (h2)

17px / 400 / line-height: 1.0 / letter-spacing: 0.5px

Section Title Large (h2)

16px / 400 / line-height: 1.0 / letter-spacing: 0.5px

本文テキスト — 植物の力で、内側から美しく。自然界に存在する精油やオイルを厳選し、THREE 独自のアプローチで肌本来の力を引き出します。Body / Nav (14px)

14px / 400 / line-height: 1.86 / letter-spacing: 0.5px

バランシングクレンジングオイル R — Product Title (14px)

14px / 400 / line-height: 1.57 / letter-spacing: 0.5px

¥4,400 (tax included)

12px / 400 / line-height: 1.0 / letter-spacing: 0.5px — Price

フッターナビゲーション — Footer (12px)

12px / 400 / line-height: 1.83 / letter-spacing: 0.5px

TICKER BANNER TEXT

12px / 400 / line-height: 1.2 / letter-spacing: 0.5px — Ticker on #dfda64

03 / Product

Product Showcase

Skincare

バランシングクレンジングオイル R

BALANCING CLEANSING OIL R

¥4,400

Base Makeup

アンジェリックコンプレクションプライマー

ANGELIC COMPLEXION PRIMER

¥4,950

Fragrance

オードトワレ 04 SAKURA

EAU DE TOILETTE 04 SAKURA

¥7,700

All Products

Holistic Beauty

THREE は、植物の力と最新のサイエンスを融合させたホリスティックビューティーブランドです。自然由来成分を中心に、肌本来の美しさを引き出すアプローチを追求しています。

精油やボタニカルオイルを厳選し、心と身体、そして肌のバランスを整える。それが THREE の考える美しさです。BALANCING は、そのフィロソフィーを体現するスキンケアラインです。

04 / Buttons

Button Variations

Product Detail

Primary Ghost / #595757

More Detail

Secondary Ghost / #bfbfbf

skincare base makeup fragrance body care hair care

Aroma & Fragrance

Ghost on Dark / #ffffff border

05 / Cards

Card Components

Balancing Skincare

植物の恵みで肌のバランスを整える。洗顔、化粧水、乳液、クリームの基本ステップで、肌本来の力を引き出します。

View Collection

Aoyama Flagship

THREE 青山フラッグシップストア。プロダクト体験はもちろん、ブランドの世界観を五感で味わえる特別な空間です。

Store Detail

Journal

ホリスティックビューティーの視点から、ライフスタイルやウェルネスに関する情報を発信するブランドジャーナル。

06 / Forms

Form Elements

Email Address

default — border: #bfbfbf, radius: 0

Full Name

focus — border: #333333

Phone Number

error — border: #cc3333

正しい電話番号を入力してください

Product Category

07 / Elevation

Depth & Elevation

Level 0: Flat

shadow: none / border のみ

Hover State

border-color: #595757 に変化

Tag Surface

background: #f2f2f2 / no border

THREE は完全フラットデザイン。box-shadow を一切使用しない。要素の区別はスペーシング、ボーダー色の変化、背景色で表現する。

Dark Surface Demo

On Dark Background

暗い背景上での表示。ボタンの枠線は白 (#ffffff) に切り替わる。テキスト色も白。THREE の世界観を反映した、静かで洗練された暗色セクション。