CLAS
lorem ipsum lorem ipsum dolor

lorem ipsum, lorem ipsum dolor sit
Design System Preview — CLAS

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

lorem ipsum dolor lorem ipsum
01 / Colors

COLOR PALETTE

Brand
Brand Green
#669988
lorem CTA / lorem ipsum dolor
Text
Text Heading
#4b5049
lorem
Text Primary
#2d312f
lorem ipsum
Text Secondary
#646b61
lorem ipsum dolor / lorem
Accent
Accent Orange
#d96c45
lorem / lorem ipsum
Accent Blue-grey
#608494
NEW / lorem ipsum
Accent Gold
#998866
lorem ipsum dolor / lorem
Surface & Background
White
#ffffff
lorem ipsum / lorem
Warm Beige Surface
#f5f3f0
lorem ipsum／lorem ipsum
Cool Grey 2
#f2f3f2
lorem ipsum dolor
Cool Grey 1 / Border
#e3e5e5
lorem ipsum dolor / lorem ipsum
02 / Typography — lorem

TYPOGRAPHY

lorem ipsum, lorem ipsum dolor sit — Hero H1
Jost (lorem) / 34px / 700 / line-height: 1.5 / letter-spacing: 0.04emlorem ipsum dolor
GREEN ITEM
Jost / 18px / 700 / line-height: 1.8 / letter-spacing: 0.05em — lorem ipsum dolor sit(uppercase)lorem ipsum dolor sit
lorem ipsum dolor — lorem ipsum dolor / lorem
Jost / 18px / 700 / line-height: 1.8 / letter-spacing: 0.05em / color: #4b5049H2 Section
lorem ipsum — lorem ipsum dolor
Jost / 16px / 500 / line-height: 1.8 / letter-spacing: 0.075em / color: #4b5049H3
lorem ipsum dolor — lorem ipsum dolor sit amet
Jost / 18px / 700 / line-height: 1.8 / color: #2d312fH3 Alt
lorem ipsum dolor — lorem / lorem, lorem ipsum dolor. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor sit amet consectetur. ABCabc 123
Jost / 14px / 400 / line-height: 1.8 / letter-spacing: 0 / color: #4b5049lorem
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur. 14px lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.
Jost / 12px / 400〜700 / line-height: 1.8 / color: #646b61Small
lorem ipsum dolor — lorem ／ lorem ipsum dolor ／ lorem ipsum
Jost / 10px / 400〜700 / line-height: 1.8 / color: #4b5049Caption
03 / Product — lorem ipsum dolor lorem

PRODUCT CONTENT

NEW SALE # 2 lorem ipsum dolor
lorem ipsum dolor sit 2 lorem — lorem ipsum dolor, lorem ipsum dolor

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

CLAS lorem ipsum dolor

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

lorem ¥1,540／ lorem ipsum 3 lorem / lorem ipsum

lorem ipsum dolor 4.7 ／ lorem ipsum dolor 200 lorem ／ lorem ipsum dolor

lorem ipsum dolor lorem ipsum dolor sit amet
04 / Buttons

BUTTONS

lorem ipsum dolor
Primary CTA Pill
#669988 / 24px / 14px / 700
lorem ipsum
Ghost CTA
1px solid #646b61 / 24px
lorem ipsum dolor
Large Outline (green)
3px solid #669988 / 24px
lorem ipsum dolor
Large Outline (dark)
3px solid #2d312f / 24px
lorem ipsum dolor sit
Filter Chip
white / #646b61 border / 24px
2 lorem ipsum dolor
Filter Chip
5px 12px / 12px / 700
# lorem ipsum dolor
Category Tag
#e3e5e5 / #2d312f
NEW
Badge NEW
#608494 / 4px / 10px / 700
lorem
Badge lorem
#608494 / blue-grey
SALE
Badge SALE
#d96c45 / orange accent
05 / Cards

PRODUCT CARDS

🛋️
NEW
lorem ipsum dolor sit 2 lorem — lorem ipsum
CLAS lorem ipsum ／ lorem 138cm
lorem ¥1,540 〜
🧊
lorem
lorem ipsum dolor 2 lorem — lorem ipsum dolor
Panasonic ／ 138L
lorem ¥990 〜
🌀
SALE
lorem ipsum dolor sit — lorem ipsum dolor
Panasonic ／ lorem 10kg
lorem ¥3,300 〜
🛏️
NEW
lorem ipsum dolor lorem ipsum + lorem ipsum
CLAS lorem ipsum ／ lorem
lorem ¥1,980 〜

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

1lorem 2lorem 3lorem 4lorem ipsum
lorem ipsum dolor lorem ipsum dolor
06 / Forms

FORMS

🔍
lorem ipsum — background: #ffffff / border: 1px solid #e3e5e5 / radius: 24px(lorem)
lorem ipsum — border: #669988 / box-shadow: 0 0 0 3px rgba(102,153,136,0.25)
7 lorem ipsum dolor sit amet consectetur
lorem — border: #d96c45 / box-shadow: 0 0 0 2px rgba(217,108,69,0.35)
Textarea — background: #ffffff / border: 1px solid #e3e5e5 / radius: 8px / line-height: 1.8
07 / Elevation

DEPTH & ELEVATION

Level 0 — Flat
lorem. lorem / lorem ipsum dolor sit.
Level 1 — Card
0 2px 8px rgba(45,49,47,0.06)
lorem ipsum
Level 2 — Dropdown
0 8px 20px rgba(45,49,47,0.10)
lorem ipsum dolor / lorem ipsum dolor
Level 3 — Modal
0 16px 40px rgba(45,49,47,0.15)
lorem ipsum
Warm Surface
#f5f3f0
lorem ipsum dolor sit amet
Cool Surface
#f2f3f2
lorem ipsum dolor sit
08 / Layout

SPACING & LAYOUT

Spacing Scale (8px lorem ipsum)
XS
4px
S
8px
M
16px
L
24px
XL
40〜48px
XXL
80px
Border Radius Scale
XS
4px — lorem
Small
8px — lorem / lorem
Pill
24px — lorem CTA / lorem
Circle
50% — lorem ipsum
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)