Design System Preview
BASE — 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 amet
01 / Colors

lorem ipsum dolor

Brand — Prime
Prime 100
#e0f3f4
Prime 200
#c6e9eb
Prime 300
#a6dddd
Prime 400
#7fd1cf
Prime 450
#59c4c0
Prime 500
#0bb7ae
lorem ipsum dolor / CTA
Prime 600
#00a099
lorem
Prime 700
#00938b
Prime 800
#00827a
Prime 900
#105151
Accent
Pink
#fc6589
lorem ipsum dolor sit
Pink Light
#ffe4ea
lorem ipsum dolor
Pink Text
#fa6482
lorem ipsum dolor
Brown
#a33e36
lorem ipsum dolor sit
Inspiration Red
#ff4600
lorem ipsum
Text
Core Black
#0d181e
lorem ipsum
Origin Gray
#233237
lorem ipsum dolor
Semantic
Red Lighter BG
#fff4f4
lorem ipsum
Red Lighter Text
#f87e7e
lorem ipsum dolor
Gray Scale
Gray 900
#1e1f2a
Gray 800
#2e3242
Gray 700
#45495b
Gray 600
#636978
Gray 500
#838996
Gray 400
#9ba2ae
Gray 300
#c1c7d1
Gray 200
#dadce0
Gray 100
#edeef1
lorem ipsum / lorem
Gray 50
#f7f8f9
lorem ipsum
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor sit — Hero H2
56px / 600 / line-height: 1.3 / letter-spacing: normal / palt: loremlorem ipsum
BASE lorem 3 lorem ipsum — Section H2
48px / 600 / line-height: 1.33 / letter-spacing: 0.03em / palt: loremlorem ipsum dolor
lorem ipsum dolor sit — Section H3
36px / 600 / line-height: 1.4 / letter-spacing: 0.03em / color: #0bb7aelorem ipsum / lorem
lorem ipsum dolor sit — Card H3
28px / 700 / line-height: 1.0 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor sit — Nav H3 / Body
16px / 400 / line-height: 1.8 / letter-spacing: 0.03em / palt: loremlorem / lorem
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur. BASE lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing elit sed.
16px / 400 / line-height: 1.8 / letter-spacing: 0.03em / palt: loremlorem
lorem ipsum dolor — Body Small (14px / 600)
14px / 600 / line-height: 1.29lorem
lorem ipsum dolor — Caption (12px / 400)
12px / 400 / color: Gray 500lorem
lorem ipsum dolor sit amet
20px / 600 / color: #ffffff / CTA lorem ipsum dolor
lorem ipsum dolor sit amet consectetur! — Campaign
17.4px / 700 / line-height: 1.3 / color: #fc6589lorem ipsum dolor sit
03 / Products — EC lorem ipsum dolor

lorem ipsum

handmade shop mori
lorem ipsum dolor sit amet
¥3,800 (lorem)
ceramic studio kumo
lorem ipsum dolor(lorem)
¥2,200 (lorem)
DAILY ROAST
lorem ipsum dolor sit amet 200g
¥1,500 (lorem)
lorem ipsum dolor sit amet consectetur! lorem ipsum dolor sit amet
04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor sit amet
Primary CTA (pill / 72px radius)
lorem ipsum
Secondary (pill / outline)
lorem ipsum dolor sit
Header CTA (0 0 8px 8px)
lorem ipsum dolor
Campaign Banner (6px radius)
05 / Cards — lorem ipsum

lorem ipsum dolor

lorem ipsum dolor sit
lorem ipsum dolor
¥0 /lorem
lorem ipsum / lorem ipsum dolor
  • lorem ipsum lorem
  • lorem ipsum 3.6% + 40 lorem
  • lorem ipsum dolor
  • lorem ipsum dolor sit
lorem ipsum dolor
lorem ipsum dolor sit amet
¥16,580 /lorem
lorem ipsum dolor
  • lorem ipsum dolor sit
  • lorem ipsum 2.9%
  • lorem ipsum dolor 0%
  • lorem ipsum dolor
06 / Forms

lorem ipsum dolor

lorem ipsum — border: var(--color-gray-200), radius: 8px
lorem ipsum — border: #0bb7ae (prime-500), shadow: teal glow
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #d32f2f, bg: --color-red-lighter-bg
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem ipsum dolor sit amet consectetur(lorem ipsum dolor sit)
Elevation 1
0 1px 4px rgba(0,0,0,0.08) — lorem ipsum
Elevation 2
0 2px 8px rgba(0,0,0,0.10) — lorem ipsum dolor
Focus Ring
#0bb7ae (prime-500) — lorem ipsum dolor
08 / Layout

lorem ipsum dolor sit

3 Column Grid (Cards)
1/3
1/3
1/3
2 Column Grid (Content + Sidebar)
Main Content (2fr)
Sidebar (1fr)
Spacing Tokens
Section Spacing 120 - 144px
Component Gap 24 - 64px
Element Gap 8 - 16px