Design System Preview
CAINZ(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.

TV / SNS lorem lorem ipsum lorem lorem ipsum lorem ipsum
lorem ipsum dolor lorem ipsum dolor sit
01 / Colors

lorem ipsum dolor

Brand
Brand Green
#006438
lorem CTA lorem
Search Orange
#e86e0c
lorem ipsum
Attention / Sale
Attention Red
#b81a35
lorem / lorem ipsum dolor / lorem
Tag Yellow
#ffdf9a
lorem ipsum dolor
Text
Text Primary
#222222
lorem ipsum dolor(lorem)
Text Secondary
#312f2f
--primary-text-color
Input Text
#5e5e5e
lorem ipsum dolor sit
Surface & Border
White
#ffffff
lorem ipsum
Surface Gray
#efefef
lorem / lorem ipsum
Border Default
#e5e7eb
Tailwind gray-200
Border Card
#c6c6c6
lorem ipsum dolor
02 / Typography -- lorem

lorem ipsum dolor sit

lorem ipsum dolor -- Section H2 (Large)
20px / 700 / line-height: 1.4 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor -- Section H2 (Medium)
18px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor -- Section H2 (Small) / H3
16px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor sit amet consectetur -- Page H1
14px / 500 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor h1
lorem ipsum dolor -- lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum DIY lorem ipsum dolor sit amet consectetur adipiscing.
14px / 400 / line-height: 1.625 / letter-spacing: normallorem
lorem ipsum dolor sit -- lorem ipsum dolor
14px / 700 / line-height: 1.5lorem
lorem ipsum dolor -- lorem ipsum dolor (12px)
12px / 500 / line-height: 1.25lorem ipsum dolor
lorem ipsum dolor -- lorem ipsum / lorem (11px)
11px / 700 / line-height: 1.25lorem
¥2,980(lorem)
20px / 400 / color: #b81a35 (Attention Red)lorem ipsum
03 / Product -- lorem ipsum dolor

lorem ipsum dolor sit amet

lorem ipsum dolor sit lorem ipsum lorem ipsum dolor lorem ipsum

lorem ipsum lorem
¥3,980 (lorem) ¥4,980

lorem ipsum dolor sit amet consectetur. 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 10kg lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor sit amet.

lorem

lorem: lorem 70cm x lorem 45cm x lorem 130cm. lorem: 2.8kg. lorem: lorem ipsum dolor, lorem ipsum dolor.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA
#006438 / radius 22px
lorem ipsum
More Link
border #222 / radius 9999px
lorem ipsum
Tag Pill
#efefef / radius 24px
Search
#e86e0c / radius 0 4px 4px 0
Badges / Tags
lorem ipsum
Free Shipping
#ffdf9a / radius 0
lorem
Sale Badge
border #b81a35 / radius 0
3
Cart Badge (MUI)
#b81a35 / radius 10px
05 / Cards

lorem ipsum

180 x 200 image
lorem ipsum
lorem ipsum dolor sit lorem ipsum lorem 1m x 10m lorem ipsum
¥2,980(lorem)
180 x 200 image
lorem lorem ipsum
LED lorem ipsum dolor 8 lorem lorem ipsum lorem ipsum dolor
¥6,980
¥4,980(lorem)
180 x 200 image
lorem ipsum dolor sit amet lorem 2 lorem lorem ipsum
¥3,480(lorem)
180 x 200 image
lorem ipsum
lorem ipsum dolor sit amet 18V lorem lorem ipsum 2 lorem
¥12,800(lorem)
Footer Cards
lorem ipsum dolor sit
lorem ipsum dolor sit amet consectetur
CAINZ Reform
lorem ipsum dolor sit amet consectetur adipiscing
DIY Style
lorem ipsum dolor sit amet consectetur adipiscing
lorem ipsum
lorem ipsum dolor sit amet consectetur
06 / Forms

lorem ipsum dolor

lorem ipsum -- border: #e5e7eb, radius: 4px, height: 44px
lorem ipsum -- border: #006438 (Brand Green)
lorem ipsum dolor sit amet consectetur
lorem -- border: #b81a35 (Attention Red)
07 / Elevation

Depth & Elevation

Level 0: Flat
shadow: none
lorem ipsum dolor
Level 1
0 2px 8px rgba(0,0,0,0.06)
lorem ipsum dolor
Level 2
0 4px 16px rgba(0,0,0,0.10)
lorem ipsum dolor
Level 3
0 8px 24px rgba(0,0,0,0.12)
lorem ipsum
Focus Ring
#006438 (Brand Green)
+ 3px rgba glow
08 / Layout

lorem ipsum / lorem ipsum dolor

Spacing Scale
4px
XS
8px
S
12px
16px
M (sp)
20px
L (pc)
40px
XL
80px
XXL
Border Radius
0px
Badge
4px
Card
22px
CTA
24px
Tag Pill
9999px
More Link
Content Widths
Max Content Width 1240px (--max-content-width)
Content Width min(1240px, calc(100% - 40px))