Sumitomo Forestry Design System

lorem ipsum dolor,
lorem ipsum dolor sit.

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

lorem ipsum DESIGN.md lorem
01 / Colors
Color Palette
lorem ipsum dolor
Brand — Forest Green
Forest Green
#008d54
lorem ipsum dolor / lorem
CTA Green
#00664b
CTA lorem ipsum
Nav Green
#007b4a
lorem ipsum dolor
Active Green
#00623b
lorem ipsum / lorem
Soft Green
rgba(143,173,161,0.8)
lorem ipsum dolor
Text
Text Primary
#000000
lorem ipsum dolor
Text White
#ffffff
lorem ipsum dolor
Surface & Border
Background
#ffffff
lorem ipsum
Section BG
#f0f0f0
lorem ipsum dolor
Section BG Alt
#eeeeee
IR / lorem ipsum dolor
Footer BG
#f2f2f2
lorem ipsum dolor
Border Light
#cbcbcb
lorem ipsum dolor
Divider
#dcdcdd
lorem ipsum dolor
02 / Typography
Typography Hierarchy
lorem ipsum dolor sit
lorem ipsum dolor, lorem ipsum dolor sit.
Hero Title / lorem 45px / 700 / line-height: 1.5 / letter-spacing: 0.033emlorem ipsum dolor
Focus — About Us
Section Heading EN / Roboto 40px / 700 / line-height: 1.3 / letter-spacing: 0.0375emlorem ipsum
lorem ipsum dolor, lorem ipsum dolor sit.
Section Heading JP / lorem 34px / 700 / line-height: 1.7 / letter-spacing: 0.05emlorem ipsum dolor sit
IR lorem / lorem ipsum
Sub Section / lorem ipsum 32px / 400 / line-height: 1.2 / letter-spacing: 0.0625emlorem ipsum dolor
lorem ipsum dolor — Page Title
Page Title / lorem ipsum 22px / 400 / line-height: 1.5lorem ipsum
lorem ipsum dolor — lorem ipsum, “lorem”lorem ipsum dolor sit amet consectetur adipiscing. lorem / lorem / lorem / lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.
Body / lorem ipsum 15px / 400 / line-height: 1.5 / letter-spacing: normallorem
lorem ipsum dolor — lorem ipsum: lorem ipsum dolor / 2024 lorem
Caption / lorem ipsum 13.5px / 400 / line-height: 1.5lorem ipsum dolor
More →
More Button / Roboto 18px / 400 / letter-spacing: 0.05emlorem
MENU
Menu Label / lorem ipsum 12px / 400 / letter-spacing: 0.058emlorem ipsum
03 / Article
Sustainability
lorem ipsum dolor sit amet consectetur
Forest Management
lorem ipsum dolor sit amet
lorem ipsum dolor sit amet

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

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. W350 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. ABC 123

lorem: lorem ipsum dolor lorem ipsum dolor sit amet
04 / Buttons
Buttons
lorem ipsum dolor sit
lorem ipsum dolor sit amet
Primary CTA (18px / radius: 5px)
lorem ipsum dolor
Large CTA (22px / radius: 5px)
lorem ipsum dolor sit
Outline (16px / 700 / radius: 0)
More
More (Roboto 18px / radius: 0)
lorem ipsum
Hero CTA (lorem)
DESIGN.md lorem
Hero Outline (lorem ipsum)
05 / Cards
Cards
lorem ipsum dolor sit
▼

lorem ipsum

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

lorem ipsum →
△

lorem / lorem ipsum

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

lorem ipsum →
◆

lorem / lorem / lorem ipsum

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

lorem ipsum →
06 / Forms
Forms
lorem ipsum dolor
lorem ipsum — border: #cbcbcb, radius: 4px
lorem ipsum — border: #008d54 (Forest Green)
lorem — border: #cc0000
07 / Elevation
Depth & Elevation
lorem ipsum
Level 0: Flat
lorem, lorem ipsum dolor(lorem ipsum)
Elevation 1
0 2px 4px rgba(0,0,0,0.1) — lorem ipsum dolor
Elevation 2
0 4px 12px rgba(0,0,0,0.15) — lorem ipsum dolor
Focus Ring
#008d54 (Forest Green)
08 / Layout
Layout Principles
lorem ipsum dolor
lorem ipsum dolor
max-width: ~1100px
lorem ipsum dolor (Forest Green)
bg: #008d54
CTA (CTA Green)
bg: #00664b
lorem ipsum dolor
#f0f0f0
lorem ipsum dolor Alt
#eeeeee
lorem ipsum dolor
#f2f2f2