lorem ipsum, lorem ipsum dolor.

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

lorem ipsum dolor lorem ipsum dolor sit
01 / Colors

lorem ipsum dolor

Brand
Brand Red
#e60012
lorem ipsum dolor / CTA
Dark
#000000
lorem CTA / lorem ipsum
Text
Primary Text
#222222
lorem ipsum dolor
Secondary Text
#757575
lorem ipsum dolor / lorem ipsum dolor
Link Blue
#0000ee
lorem ipsum dolor
Surface & Border
White
#ffffff
lorem ipsum
Surface
#f0f0f0
lorem ipsum / lorem ipsum
Border
#d8d8d8
lorem ipsum / lorem ipsum
Overlay
rgba(0,0,0,0.6)
lorem ipsum dolor
Semantic
Success
#1a8a1a
lorem / lorem
Danger
#cc0000
lorem / lorem
Warning
#cc8800
lorem / lorem
02 / Typography

lorem ipsum dolor sit

lorem ipsum, lorem ipsum dolor.
H2 Hero / 40px / 700 / line-height: 1.5lorem ipsum
lorem / lorem ipsum dolor sit
H2 Section / 36px / 700 / line-height: 1.5lorem ipsum dolor
lorem ipsum dolor sit amet
H2 Medium / 24px / 700 / line-height: 1.5lorem ipsum dolor
lorem ipsum dolor sit amet
H3 / 20px / 700 / line-height: 1.5lorem ipsum
lorem ipsum dolor sit amet consectetur
H3 Small / 16px / 700 / line-height: 1.5lorem ipsum dolor
lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123
Body / 16px / 400 / line-height: 1.5 / letter-spacing: normallorem
2024 lorem 8 lorem 15 lorem / lorem ipsum / lorem ipsum 1,200m
Caption / 14px / 400 / line-height: 1.5 / color: --gray-textlorem ipsum
3 lorem / 5.2km / 450kcal lorem
Small / 12px / 400 / line-height: 1.5 / color: --gray-textlorem ipsum
lorem ipsum
Nav / 14px / 700 / line-height: 1.5lorem ipsum dolor
03 / Article

lorem / lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. lorem 2,300m lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing.

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

lorem ipsum dolor sit

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

lorem lorem ipsum lorem ipsum lorem ipsum lorem
04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA (pill)
lorem ipsum
Secondary CTA (pill)
lorem ipsum
Tertiary (pill)
lorem ipsum dolor sit
Card Link (radius 10px)
05 / Cards

lorem ipsum dolor sit

⛰ lorem ipsum

lorem ipsum

lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur

1,250 lorem ipsum
📖 lorem ipsum

lorem ipsum

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor

850 lorem ipsum dolor
🗺 lorem ipsum dolor

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur adipiscing

3,800 lorem
⛅ lorem ipsum

lorem ipsum

lorem ipsum dolor sit amet consectetur adipiscing

lorem ipsum dolor sit
06 / Forms

lorem ipsum dolor

lorem ipsum -- border: #d8d8d8, radius: 10px
lorem ipsum -- border: #e60012 (brand-red)
lorem ipsum dolor sit amet consectetur adipiscing
lorem -- border: #cc0000 (danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
box-shadow: none
lorem ipsum dolor
Level 1
0 2px 8px rgba(0,0,0,0.06)
lorem / lorem
Level 2
0 8px 24px rgba(0,0,0,0.10)
lorem / lorem ipsum
08 / Layout

lorem ipsum dolor sit

4-Column Grid (gap: 16px)
1 / 4
2 / 4
3 / 4
4 / 4
2-Column (Main + Sidebar)
Main Content (2fr)
Sidebar (1fr)
3-Column Grid
1 / 3
2 / 3
3 / 3