Design System Preview
Mitsui Fudosan

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

VIEW MORE DESIGN.md を読む

01 / Colors

Colors

Primary (Brand)
Mitsui Fudosan Blue
#004098
ブランドコアカラー
Mitsui Red
#e60012
サブアクセント
Neutral
Text Primary
#000000
本文テキスト
Text Category
#636363
カテゴリラベル背景
Border
#e3e3e3
区切り線・カード枠
Border Light
#cccccc
セクションボタン枠
Surface & Background
Background
#ffffff
ページ背景
Surface
#ffffff
カード背景
CTA Background
#000000
VIEW MORE / Contact
Dark Section
Footer Background
#004098
フッター全体の背景
Header Overlay
#004098
ヘッダー領域

02 / Typography

Typography

Display (OptimaLTPro → Noto Serif JP)
Section Title
OptimaLTPro 90px / weight 400 / line-height 1.0 / letter-spacing -0.04emセクション H1
White on Blue
OptimaLTPro 90px / weight 400 / 暗い背景: #ffffffダークセクション H1
VIEW MORE
OptimaLTPro 30px / weight 400 / line-height 1.2 / 黒背景に白テキストVIEW MORE CTA
2026.05.23   1   2   3   SCROLL
OptimaLTPro 14px / weight 400 / 日付・ページネーション・スクロールDate / Pagination
Body (NewCezanneProN → Noto Sans JP)
エラーページ見出し — H1 (404)
NewCezanneProN7 28px / weight 400(Bold) / line-height 1.4404ページ
セクションボタンテキスト
NewCezanneProN7 20px / weight 700 / セクション遷移Section Button
本文テキスト — 三井不動産は、オフィスビル、商業施設、ホテル・リゾート、ロジスティクス、住宅と、多様なアセットを開発・運営する総合デベロッパーです。都市に新しい価値を創造し、人々の暮らしを豊かにする街づくりを推進しています。
NewCezanneProN 16px / weight 400 / line-height 1.6875 / palt: グローバル適用Body Text
ナビゲーションリンク — Nav Main Link (14px)
NewCezanneProN7 14px / weight 400 / ヘッダーナビNavigation

Article

Urban Development

街づくりを通じて、持続可能な社会の実現に貢献する。人々が集い、働き、暮らす都市空間の未来を創造します。

Innovation & Heritage

三井不動産グループは、日本橋の再開発をはじめとする大規模都市再生プロジェクトを推進しています。歴史と伝統が息づく街並みに、最先端のテクノロジーと持続可能な設計思想を融合させ、次の100年を見据えた街づくりに取り組んでいます。

オフィスビル、商業施設、ホテル・リゾート、ロジスティクス施設、住宅など、多様なアセットタイプにわたる開発実績を活かし、複合的な都市機能を一体的にデザインすることで、街全体の価値を最大化します。

Sustainability

2050年のカーボンニュートラル実現に向け、すべての新築物件でZEB・ZEH基準を追求するとともに、既存建物のエネルギー効率改善にも積極的に取り組んでいます。緑地・水辺の創出を通じた生物多様性の保全も、街づくりの重要な要素です。

VIEW MORE

04 / Buttons

Buttons

Primary CTA
VIEW MORE
VIEW MORE (OptimaLTPro 30px)
bg: #000000 / radius: 0px / padding: 21px 44px
Section Button (Bordered)
事業紹介
Section Button (NewCezanneProN7 20px)
border: 1px solid #cccccc / radius: 0px
サステナビリティ
Section Button
投資家情報
Section Button
Contact Button
お問い合わせ
Contact (NewCezanneProN7 16px)
bg: #000000 / radius: 0px
News Tabs
Active: bg #ffffff, text #000000 / Inactive: bg #004098, text #ffffff / radius: 0px / font-size: 20px

Cards

Property / Pickup Cards
1200 x 800
オフィス

日本橋三井タワー

日本橋エリアの新たなランドマーク。最先端のオフィス環境と商業施設が融合した複合開発。

1200 x 800
商業施設

ららぽーと豊洲

東京湾を望むウォーターフロントに位置する大型ショッピングモール。地域のにぎわいを創出。

1200 x 800
ホテル

三井ガーデンホテルズ

上質なホスピタリティと地域の魅力を融合させた、新しい滞在体験を提供するホテルブランド。

News List
Card: bg #ffffff / border 1px solid #e3e3e3 / radius 0px / shadow: none (flat)

06 / Forms

Forms

コーポレートサイトのため入力フィールドは主要ページに存在しないが、コンタクトフォーム等を想定したスタイル。

デフォルト — border: #e3e3e3 / radius: 0px
フォーカス — border: #004098 (Brand Blue)
エラー — border: #e60012 (Mitsui Red)

07 / Elevation

Elevation

Flat (Default)
影なし。border 1px solid #e3e3e3 で区切る。三井不動産のデフォルト。
Image Overlay
暗い透過オーバーレイで奥行きを表現。フルブリード画像上のテキスト用。
Hover / Active
ホバー時はボーダー色やテキスト装飾で変化を表現。影は使わない。

08 / Layout

Layout

Spacing Scale
XS 8px
S 16px
M 24px
L 40px
XL 60px
XXL 80px
Container
Container Max Width 1200px
3-Column Grid (Pickup Cards)
Column 1
Column 2
Column 3
Key Principles