lorem ipsum lorem ipsum dolor
lorem ipsum lorem ipsum dolor sit amet consectetur
lorem ipsum dolor

Design System Preview — lorem ipsum

lorem ipsum dolor“lorem”1 lorem.--Color-Primary-Gold-70: #cab270(CSS lorem 154 lorem)loremloremlorem,Gold-60: #9f8745(138 lorem)loremloremlorem ipsum dolor. lorem ipsum dolor sit Material 3 lorem“0 lorem / 100 lorem”lorem,lorem ipsum dolor sit amet. lorem ipsum dolor computed style loremuser-*.css(731KB)lorem ipsum(2026-08-28 lorem).

lorem ipsum dolor sit amet lorem ipsum dolor
01 / Colors
Color Palette

lorem Gold-70, lorem Gold-60

Primary Gold — 13 lorem ipsum dolor sit(0 lorem / 100 lorem)
10
20
30
40
50
60
70
80
90
95
99
Gold-60
#9f8745
lorem. lorem ipsum dolor / lorem ipsum dolor / lorem ipsum dolor. 138 lorem
Gold-70
#cab270
lorem. lorem / lorem / lorem / lorem ipsum. 154 lorem
Gold-90
#f0e8d5
lorem. 16 lorem
Gold-95
#f5f1eb
lorem ipsum. lorem / lorem ipsum / lorem ipsum dolor. 80 lorem
Cream
#f5f3e9
lorem ipsum dolor sit(top.css). lorem 34 lorem
Accent — lorem ipsum dolor, lorem ipsum dolor
Orange-50
#f45800
“lorem ipsum”lorem ipsum.lorem ipsum dolor sit amet
Red-40
#c30d23
lorem / lorem ipsum. 19 lorem
Red-50
#db3347
lorem ipsum dolor. 16 lorem
Bulma Yellow
#ffdd57
Bulma lorem ipsum dolor(lorem). 20 lorem
Gray — lorem 6 lorem
10
20
30
40
50
60
70
80
90
95
99
Gray-20
#212121
lorem ipsum dolor. 125 lorem
Gray-60
#858585
lorem ipsum dolor / lorem ipsum dolor. 80 lorem
Gray-90
#ededed
lorem ipsum dolor sit
Gray-95
#f2f2f2
lorem ipsum / lorem ipsum.181 lorem
Line
#e9e9e9
lorem / lorem ipsum dolor. lorem 109 lorem
Gray-99
#f9f9f9
lorem ipsum dolor. 49 lorem

⚠️ lorem ipsum dolor sit amet consectetur. Gold-70（#cab270)loremGold-60（#9f8745)loremlorem. “lorem ipsum dolor sit”lorem ipsum dolor sit amet consectetur.

02 / Typography — lorem
Typography

lorem ipsum dolor Pro ＋ lorem ipsum dolor

lorem ipsum dolor
14px / 700 / line-height: 19.6px (1.4) / letter-spacing: .1px / color: #9f8745 / font-family: "Noto Serif JP", serif ＋ text-align: centerlorem ipsum dolor sit amet consectetur
lorem ipsum dolor sit
24px / 700 / line-height: 33.6px (1.4) / letter-spacing: normalh2 — lorem ipsum dolor sit
lorem ipsum dolor sit 10 lorem ipsum
16px / 700 / line-height: 24px (1.5) / letter-spacing: .5px (0.031em)h3 — lorem
lorem ipsum dolor sit amet consectetur
16px / 600 / line-height: 25.6px (1.6) / letter-spacing: .5pxh4 — 600 lorem
lorem ipsum dolor, lorem / lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur.
16px / 400 / line-height: 24px (1.5) / letter-spacing: .5px (0.031em)lorem
lorem 11,896 lorem ipsum dolor sit, 42,363 lorem ipsum dolor sit amet. lorem / lorem ipsum / lorem ipsum, lorem ipsum dolor sit amet consectetur.
14px / 400 / line-height: 21px (1.5) / letter-spacing: .5px (0.036em) / color: #212121body lorem
lorem ipsum dolor 2 lorem ipsum dolor sit amet consectetur. lorem ipsum, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, lorem 1 lorem ipsum dolor sit amet consectetur.
14px / 400 / line-height: 22.4px (1.6) / letter-spacing: .25px (0.018em)lorem ipsum(lorem ipsum dolor)
lorem ipsum dolor sit amet consectetur
13px / 600 / line-height: 19.5px (1.5) / letter-spacing: .5px (0.038em)Caption
※ lorem / lorem ipsum dolor, lorem ipsum dolor sit amet consectetur
11px / 400 / line-height: 15.4px (1.4) / letter-spacing: .5px (0.045em)Micro
letter-spacing lorem px lorem 5 lorem
px loremCSS loremlorem ipsum dolorem lorem
.5px111 lorem10–16px lorem / lorem0.031〜0.05em
.4px152 lorem12px lorem ipsum0.033em
.25px87 lorem14px lorem ipsum0.018em
.15px109 lorem16px lorem ipsum0.009em
.1px66 lorem14px lorem / lorem ipsum0.007em

lorem ipsum dolor em lorem ipsum dolor sitlorem(10px lorem 0.05em, 16px lorem 0.009em). px lorem ipsum dolor sit amet consectetur,em lorem ipsum dolor sitlorem.

font-family(lorem 3 lorem)
loremlorem
lorem / lorem"Hiragino Kaku Gothic Pro", "lorem ipsum dolor Pro W3", Meiryo, lorem ipsum, Osaka, "MS PGothic", arial, helvetica, "Lucida Grande", sans-serif
lorem ipsum dolor sit amet"Noto Serif JP", serif ＋ color: #9f8745 ＋ text-align: center
lorem ipsum dolor / loremArial, sans-serif(22 lorem)

※ ProN lorem ipsum Pro. lorem ipsum dolor(lorem lorem lorem)lorem JIS90 lorem ipsum. Apple lorem ipsum dolor sit amet.
※ Windows lorem ipsum dolor → MS P lorem ipsum dolor sit amet consectetur adipiscing,lorem ipsum dolor sit Mac / iOS lorem ipsum dolor sit(lorem ipsum dolor sit amet consectetur).
※ lorem Web lorem ipsum dolor OS lorem Noto Serif JP lorem ipsum. lorem ipsum dolor sit Google Fonts lorem ipsum dolor sit amet consectetur.
※ font-feature-settings: normal。palt lorem ipsum,letter-spacing lorem ipsum。

03 / Product — lorem ipsum dolor
lorem

lorem ipsum

lorem(42,363 lorem) lorem(11,896 lorem)
lorem lorem lorem lorem lorem lorem ipsum
🌽
lorem ipsum dolor sit
lorem lorem ipsum dolor 10 lorem
lorem lorem ／ lorem ipsum
lorem 5kglorem ipsum
¥3,980
🍑
lorem ipsum
lorem ipsum dolor 6 lorem
lorem lorem ／ lorem ipsum dolor
lorem 1.8kglorem
¥4,200
🐟
lorem ipsum dolor sit
lorem lorem ipsum dolor sit
lorem lorem ／ lorem ipsum
lorem 2kglorem
¥5,400
🥬
lorem ipsum
lorem ipsum dolor 8–10 lorem
lorem lorem ／ lorem ipsum dolor
lorem 500glorem
¥2,980
12345
04 / Producer — lorem ipsum dolor
lorem ipsum

lorem ipsum dolor sit amet consectetur

lorem 800m lorem ipsum, lorem ipsum dolor

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

lorem ipsum dolor sit

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

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

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

lorem ipsum dolor lorem ipsum dolor
05 / Buttons
Buttons

radius 4px. lorem ipsum dolor sit amet consectetur

lorem ipsum
Primary
#cab270 / #fff / radius 4px
padding 12px 10px / 14px / 700 / ls .5px
lorem ipsum dolor
Secondary
#ededed / #212121 / radius 4px
lorem Primary lorem
lorem ipsum dolor sit
Primary (large)
padding 16px / 16px / 700
lorem ipsum dolor sit
Secondary (large)
padding 16px / 16px / 700
lorem ipsum dolor?
Outline
#fff / 1px solid #ddd
radius 8px / padding 0 20px
lorem ipsum dolor sit
Text CTA
#f5f3e9 / radius 0px
padding 13px 16px / 14px / 700
lorem ipsum dolor
Ribbon
#9f8745(lorem ipsum dolor sit amet consectetur)
radius 9px 0 0
Chips & Badges
lorem ipsum lorem ipsum dolor sit lorem ipsum lorem ipsum lorem lorem lorem 1.8kg lorem
loremloremloremRadiusPaddingSize
lorem ipsum#cab270#ffffff20px8px 12px12px / 700 / .4px
lorem ipsum dolor sit#cab270#ffffff16px4px 8px12px / 700 / .4px
lorem ipsum#f45800#ffffff4px4px 8px14px / 700 / .1px
lorem ipsum#f5f1eb#00000020px4px 6px10px / 700 / .5px
lorem ipsum dolor#f5f1eb#9f874514px0 8px 0 012px / 600 / .5px
lorem#e9e9e9#00000016px ＋ 1px solid #e9e9e90 8px10px / 600 / .5px
lorem#f9f9f9#21212128px ＋ 1px solid #e9e9e910px 14px14px / 700 / .5px
SNS Buttons — lorem ipsum dolor sit amet
X Instagram Facebook LINE

lorem, lorem#222222、radius 30px、padding 6px 6px 6px 18px、13px / 700。lorem ipsum dolor sit.

06 / Forms
Forms

Default / Focus / Error

Default — #f2f2f2 lorem / radius 4px
Focus — inset 0 0 0 2px #9f8745(lorem ipsum 2px lorem)
lorem ipsum dolor sit amet consectetur adipiscing

lorem ipsum dolor#b8b8b8(Gray-70). lorem ipsum dolor#c30d23（Red-40）。

07 / Elevation
Elevation

lorem ipsum dolor CSS lorem 12 lorem ipsum

Level 0
none ＋ 1px solid #e9e9e9
lorem. lorem ipsum dolor sit
Level 1
0 2px 3px rgba(10,10,10,.1),
0 0 0 1px rgba(10,10,10,.1)
Bulma lorem. 3 lorem
Level 2
2px 2px 6px rgba(0,0,0,.15)
2 lorem
Selected
inset 0 0 0 2px #9f8745
1 lorem／lorem ipsum 2px lorem

lorem ipsum dolor sit. lorem ipsum1px solid #e9e9e9 lorem, lorem#f5f1eb lorem ipsum dolor.

08 / Layout
Layout

radius 4px lorem. lorem ipsum dolor

Valueloremlorem
4px149 loremlorem / lorem / lorem / lorem. lorem
50%105 loremlorem ipsum dolor / lorem ipsum
8px38 loremlorem ipsum dolor sit / lorem ipsum dolor
16px38 loremlorem
20px15 loremlorem ipsum dolor
12px / 10pxlorem 12 loremlorem ipsum
010 loremlorem ipsum dolor / lorem ipsum CTA
Container & Breakpoints
loremloremlorem
Container1240px5 lorem(lorem 1200px / 1000px)
lorem ipsum dolor sit700px / 600px / 500px / 400px—
Desktopmin-width: 769px421 lorem
Mobilemax-width: 768px284 lorem
loremmax-width: 960px / min-width: 961px10 lorem / 9 lorem
Widemin-width: 1239px4 lorem
Small Mobilemax-width: 414px4 lorem