DESIGN SYSTEM

IDÉE のデザインシステム／日本語版

DESIGN.md から抽出したデザイントークンのカタログ。純白背景 #ffffff にブランド深紺 #001646 をアクセントとして据え、Helvetica Neue（欧文）+ 游ゴシック Pr6n（和文、preview では Yu Gothic Medium 代替）+ YakuHanJP（約物処理）の三層構造でエディトリアル風 UI を構築。font-feature-settings: "palt" を全要素に適用、letter-spacing 0.6px (+0.04em) で字間を広げ、line-height 1.0 のタイト見出しと line-height 48px のライン CTA を組み合わせる。computed style 実測値（2026-05-07 取得）に基づく。

特集一覧を見る

01 / Colors

カラーパレット

Brand

Brand Navy

#001646

ログイン・バッジ・フッタ面

Brand Black

#111111

本文・見出し

Logo Black

#000000

IDÉE ロゴ・純黒

Surface

Page Background

#ffffff

純白

Border (CTA)

#888888

ライン CTA 1px 枠

02 / Typography — 実測値

タイポグラフィ階層

Page Heading ／ページ見出し

28px / weight 700 / line-height: 1.0 / letter-spacing: 0.6px (+0.02em)h1 ヘッダー

Section Title ／ INFORMATION ／ SHOP NEWS

21px / weight 700 / line-height: 1.6 / letter-spacing: 0.6pxh2 .sectionTitle

Hero Title ／配置や選び方でお部屋の印象や余白が整う収納家具。

30px / weight 400 / line-height: 1.4 / letter-spacing: 0.6pxスライダー大型タイトル

Body ／ Helvetica Neue + 游ゴシック Pr6n の和欧混在組

14px / weight 400 / line-height: 1.0 / letter-spacing: 0.6px (+0.04em) / palt: ON本文 — タイト組

Topic Body ／配置や選び方でお部屋の印象や余白が整う収納家具。実用的なものから個性派までご紹介します。長文は line-height 1.5 に切り替え、読みやすさを担保します。

13px / weight 400 / line-height: 1.5 / letter-spacing: 0.6px.topic_txt

Item Name ／ IDEE Cotton Linen Tote Bag ネイビー

12px / weight 400 / line-height: 1.4 / letter-spacing: 0.6px.itemName

NEW ARRIVALS

11px / weight 400 / line-height: 1.0 / letter-spacing: 0.5px / 白文字 #fff on 深紺 #001646セクションラベル

03 / Editorial Topic

FEATURE

FURNITURE

配置や選び方でお部屋の印象や余白が整う、IDÉE の収納家具。

IDÉE の家具は、長く使い続けることを前提にデザインされています。本文は游ゴシック Pr6n + Helvetica Neue の和欧混在組、letter-spacing 0.6px を全体に適用。長文段落では line-height を 1.5 に切り替えることで、エディター誌面のような誠実な可読性を実現します。

特集一覧を見る

IDÉE のデザインシステム／日本語版

カラーパレット

タイポグラフィ階層

FEATURE

配置や選び方でお部屋の印象や余白が整う、IDÉE の収納家具。

NEW ARRIVALS

UI コンポーネント

フォーム要素

スペーシング

IDÉE のデザインシステム ／ 日本語版

カラーパレット

タイポグラフィ階層

FEATURE

配置や選び方でお部屋の印象や余白が整う、IDÉE の収納家具。

NEW ARRIVALS

UI コンポーネント

フォーム要素

スペーシング

IDÉE のデザインシステム／日本語版