THE
THE

Design System Preview — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem(2026-06-23 lorem)lorem ipsum.

lorem ipsum THE lorem ipsum
01 / Colors

Color Palette

Accent
Accent Gold
#a26b25
lorem ipsum. lorem ipsum dolor sit
Accent Alert
#ff4f33
lorem ipsum(lorem ipsum)
Text & Dark
Text Primary
#1c1d1d
lorem / lorem / lorem / lorem
Header Text
#222222
lorem ipsum dolor sit
Checkout BG
#333333
lorem ipsum dolor sit amet
Footer Dark
#111111
lorem ipsum dolor
Announcement Bar
#000000
lorem ipsum dolor sit
Text Secondary
#999999
lorem ipsum dolor / lorem ipsum
Surface & Background
White
#ffffff
lorem ipsum / lorem / lorem ipsum
Surface Dim
#f2f2f2
lorem ipsum dolor / lorem ipsum
Image Dim
#e6e6e6
lorem / lorem / lorem ipsum
Image BG
#eeeeee
lorem ipsum dolor
Semantic(lorem ipsum)
Danger / Alert
#ff4f33
lorem / lorem ipsum
Success
#2e7d32
lorem / lorem
02 / Typography — lorem

Typography

lorem ipsum dolor sit
Noto Serif JP / 40px / 400 / line-height: 1.2 / letter-spacing: 0.025emDisplay Heading
“lorem ipsum”lorem ipsum dolor, lorem ipsum dolor. THE lorem, lorem ipsum dolor sit amet consectetur adipiscing.
Noto Serif JP / 20px / 400 / line-height: 1.8 / letter-spacing: 0.025emLead Paragraph
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. ABCabc 123
Noto Serif JP / 14px / 400 / line-height: 1.8 / letter-spacing: 0.025emBody
lorem ipsum dolor / 1 lorem ipsum — lorem ipsum dolor / lorem ipsum dolor
Noto Serif JP / 14px / 400 / line-height: 1.3 / color: #222222Nav / Link
THE SHOP ONLINE
Roboto / 16px / 400 / line-height: 1.3 / letter-spacing: 0.1emLatin Caption
© THE Inc. All Rights Reserved.
Roboto / 10px / 400 / line-height: 1.4 / letter-spacing: 0.1em / color: #999999Small / Footer
03 / Product — lorem ipsum lorem

Product Detail

🧴
Kitchen / Tabletop
THE lorem ipsum dolor
lorem ipsum dolor, lorem ipsum dolor sit. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur.
lorem ipsum dolor sit amet consectetur, lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. lorem 100ml. lorem ipsum / lorem ipsum dolor sit amet consectetur adipiscing.
¥3,300 (lorem)
lorem ipsum dolor lorem ipsum lorem ipsum
04 / Buttons

Buttons

lorem ipsum dolor
Primary
#1c1d1d / radius 0 / 14px / 400
lorem ipsum
Checkout
#333333 / radius 0 / padding 17px
lorem ipsum
Cart / Gold Accent
#a26b25 / radius 0
lorem ipsum
Outline / Ghost
1px solid #1c1d1d / radius 0
lorem ipsum
Small Primary
#1c1d1d / radius 0 / 13px
NEW
Tag
#1c1d1d / lorem / Roboto 10px
05 / Cards

Product Cards

🥃
NEW
Glass
THE GLASS
¥1,650
🧴
Tabletop
THE lorem ipsum dolor
¥3,300
🧼
Bath
THE SOAP for HAND & BODY
¥1,980
☕️
Kitchen
THE COFFEE MILL
¥8,800

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

lorem ipsum dolor lorem ipsum dolor
06 / Forms

Forms

lorem ipsum — border: 1px solid #1c1d1d / radius: 0
lorem ipsum — box-shadow: 0 0 0 2px rgba(28,29,29,0.15)
lorem ipsum 7 lorem ipsum dolor sit
lorem — border-color: #ff4f33 / box-shadow: rgba(255,79,51,0.25)
Textarea — border: 1px solid #1c1d1d / radius: 0 / line-height 1.8
07 / Elevation

Depth & Elevation

Level 0 — Flat
lorem. lorem / lorem / lorem ipsum dolor sit.
Level 1 — Hairline
0 1px 0 #e6e6e6
lorem ipsum dolor / lorem
Level 2 — Drawer
0 8px 24px rgba(0,0,0,0.08)
lorem ipsum / lorem ipsum dolor
Level 3 — Modal
0 16px 48px rgba(0,0,0,0.12)
lorem ipsum

lorem / lorem ipsumlorem ipsum dolor(#e6e6e6)lorem ipsum dolor. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

08 / Layout

Spacing & Layout

Spacing Scale (8px lorem ipsum)
XS
4px
S
8px
M
16px
L
24px
XL
48px
XXL
80〜96px
Border Radius — None(lorem identity)
None
0px — lorem
lorem / lorem / lorem / lorem, lorem radius 0px. lorem / lorem ipsum dolor sit. lorem ipsum dolor THE lorem ipsum dolor sit amet.
Container Widths
Max Container 1200px
lorem ipsum dolor sit
Desktop Padding 24〜32px
lorem ipsum dolor(lorem ipsum dolor)
Mobile Padding 16px
lorem ipsum dolor(lorem ipsum)
THE SHOP ONLINE lorem ipsum 5,000 lorem ipsum dolor sit amet