Design System Preview
Mitsui Fudosan

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

VIEW MORE DESIGN.md lorem
01 / Colors

Colors

Primary (Brand)
Mitsui Fudosan Blue
#004098
lorem ipsum dolor sit
Mitsui Red
#e60012
lorem ipsum dolor
Neutral
Text Primary
#000000
lorem ipsum dolor
Text Category
#636363
lorem ipsum dolor sit
Border
#e3e3e3
lorem ipsum / lorem ipsum
Border Light
#cccccc
lorem ipsum dolor sit
Surface & Background
Background
#ffffff
lorem ipsum
Surface
#ffffff
lorem ipsum
CTA Background
#000000
VIEW MORE / Contact
Dark Section
Footer Background
#004098
lorem ipsum dolor sit
Header Overlay
#004098
lorem ipsum dolor
02 / Typography

Typography

Display (OptimaLTPro → Noto Serif JP)
Section Title
OptimaLTPro 90px / weight 400 / line-height 1.0 / letter-spacing -0.04emlorem ipsum H1
White on Blue
OptimaLTPro 90px / weight 400 / lorem ipsum: #fffffflorem ipsum dolor H1
VIEW MORE
OptimaLTPro 30px / weight 400 / line-height 1.2 / lorem ipsum dolor sitVIEW MORE CTA
2026.05.23   1   2   3   SCROLL
OptimaLTPro 14px / weight 400 / lorem / lorem ipsum dolor / lorem ipsumDate / Pagination
Body (NewCezanneProN → Noto Sans JP)
lorem ipsum dolor sit — H1 (404)
NewCezanneProN7 28px / weight 400(Bold) / line-height 1.4404 lorem
lorem ipsum dolor sit amet
NewCezanneProN7 20px / weight 700 / lorem ipsum dolorSection Button
lorem ipsum dolor — lorem ipsum dolor, lorem ipsum dolor, lorem ipsum, lorem / lorem ipsum, lorem ipsum dolor, lorem, lorem ipsum dolor sit / lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing.
NewCezanneProN 16px / weight 400 / line-height 1.6875 / palt: lorem ipsum dolorBody Text
lorem ipsum dolor sit — Nav Main Link (14px)
NewCezanneProN7 14px / weight 400 / lorem ipsum dolorNavigation
03 / Article

Article

Urban Development

lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum, lorem, lorem ipsum dolor sit amet consectetur.

Innovation & Heritage

lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit, lorem 100 lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor, lorem ipsum, lorem / lorem ipsum, lorem ipsum dolor sit, lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur.

Sustainability

2050 lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit ZEB / ZEH lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem / lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet.

VIEW MORE
04 / Buttons

Buttons

Primary CTA
VIEW MORE
VIEW MORE (OptimaLTPro 30px)
bg: #000000 / radius: 0px / padding: 21px 44px
Section Button (Bordered)
lorem ipsum
Section Button (NewCezanneProN7 20px)
border: 1px solid #cccccc / radius: 0px
lorem ipsum dolor
Section Button
lorem ipsum
Section Button
Contact Button
lorem ipsum dolor
Contact (NewCezanneProN7 16px)
bg: #000000 / radius: 0px
News Tabs
Active: bg #ffffff, text #000000 / Inactive: bg #004098, text #ffffff / radius: 0px / font-size: 20px
05 / Cards

Cards

Property / Pickup Cards
1200 x 800
lorem ipsum

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing.

1200 x 800
lorem ipsum

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor sit.

1200 x 800
lorem

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing.

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

Forms

lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum — border: #e3e3e3 / radius: 0px
lorem ipsum — border: #004098 (Brand Blue)
lorem — border: #e60012 (Mitsui Red)
07 / Elevation

Elevation

Flat (Default)
lorem. border 1px solid #e3e3e3 lorem ipsum. lorem ipsum dolor sit amet.
Image Overlay
lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur.
Hover / Active
lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor.
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