Design System Preview
mont-bell — lorem ipsum

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.

lorem ipsum dolor sit DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Navy Dark
#082754
lorem ipsum dolor / lorem
Teal
#004c6e
lorem CTA
Navy Medium
#003451
lorem ipsum dolor
Beige
#ece9d8
lorem ipsum dolor / lorem
Text
Text Default
#333333
lorem ipsum dolor
Text Secondary
#666666
lorem ipsum dolor
Text Disabled
#999999
lorem / lorem ipsum dolor
Semantic
Success
#2a7d4f
lorem ipsum / lorem ipsum
Danger
#c41e1e
lorem / lorem ipsum
Warning
#b07a00
lorem ipsum
Surface & Border
White
#ffffff
lorem ipsum
Header White
rgba(255,255,255,0.98)
lorem ipsum dolor
Light Gray
#f2f2f2
lorem / lorem ipsum dolor
Border Default
#e0e0e0
lorem ipsum / lorem ipsum
02 / Typography

lorem ipsum dolor sit

lorem ipsum: lorem ipsum dolor - lorem ipsum dolor 30%OFF
14px / 400 / line-height: 1.19 / letter-spacing: 0.011emAlert Text
lorem ipsum dolor. mont-bell lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit sed.
12.8px / 400 / line-height: 1.3 / letter-spacing: 0.012emBody
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur
12.8px / 400 / line-height: 1.6 / letter-spacing: 0.012em / color: #082754Link
lorem ipsum dolor sit — lorem ipsum dolor sit lorem ipsum
11.52px / 700 / line-height: 1.6 / letter-spacing: 0.013em / color: #082754Card Title
lorem ipsum dolor sit. GORE-TEX Fabric lorem ipsum dolor sit amet.
11.52px / 400 / line-height: 1.6 / letter-spacing: 0.013emCard Body
lorem ipsum dolor sit — lorem ipsum dolor sit
11.2px / 700 / line-height: 1.4 / letter-spacing: 0.12emNav Link
lorem ipsum dolor — ※lorem ipsum dolor sit. lorem ipsum dolor sit.
10.24px / 400 / line-height: 1.6 / letter-spacing: 0.015emCaption
lorem ipsum dolor(lorem) — lorem ipsum / lorem ipsum
10.24px / 700 / line-height: 1.6 / letter-spacing: 0.015emCaption Bold
03 / Article

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit ― lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor(lorem ipsum dolor)lorem ipsum. lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor 3 lorem ipsum dolor sit amet / lorem ipsum dolor.

lorem ipsum dolor sit amet

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

GORE-TEX lorem

GORE-TEX Fabric lorem 1 lorem ipsum dolor sit amet consectetur 14 lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing elit. lorem 50,000mm lorem, lorem 13,500g/m²/24h lorem ipsum dolor. ABC123

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor sit
Primary (Teal CTA)
lorem ipsum dolor
Navy CTA
lorem ipsum dolor
Category Button
lorem ipsum
Outline
lorem ipsum
Danger
Category Tags
lorem ipsum lorem lorem ipsum dolor lorem ipsum dolor lorem / lorem lorem ipsum dolor sit
05 / Cards

lorem ipsum

960 x 720
RAIN WEAR

lorem ipsum dolor sit lorem ipsum Men's

GORE-TEX Fabric lorem. lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur.

¥22,880
960 x 720
SLEEPING BAG

lorem ipsum dolor 800 #3

800FP lorem ipsum dolor sit amet consectetur adipiscing elit sed do. lorem ipsum dolor sit amet consectetur 3 lorem ipsum dolor.

¥33,000
960 x 720
BACKPACK

lorem ipsum dolor lorem 30

lorem ipsum dolor sit amet lorem ipsum dolor. lorem 530g lorem ipsum 30L lorem ipsum dolor. lorem ipsum dolor sit amet consectetur.

¥12,100
06 / Forms

lorem ipsum dolor

lorem ipsum — background: #f2f2f2, border: none, radius: 0
lorem ipsum — box-shadow: 0 0 0 2px #004c6e (teal)
lorem ipsum dolor sit amet
lorem — box-shadow: 0 0 0 2px #c41e1e (danger)
lorem ipsum dolor — input + teal CTA lorem ipsum dolor. radius: 0
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem ipsum
Level 1
0 1px 4px rgba(0,0,0,0.08)
lorem ipsum dolor
Level 2
0 4px 12px rgba(0,0,0,0.10)
lorem ipsum dolor / lorem ipsum dolor
Focus Ring
#004c6e (teal)
lorem ipsum dolor
08 / Layout

lorem ipsum dolor & lorem ipsum

Spacing Scale
4px
8px
16px
24px
32px
48px
Content Widths
Main Container 960px
Article Content 640px
Form Max Width 400px
Border Radius
0 (Sharp)
lorem CTA / lorem / lorem
0 0 5px 5px
lorem ipsum dolor sit