design system preview

lorem ipsum, lorem ipsum.

Calbee(calbee.co.jp)lorem ipsum dolor sit amet consectetur adipiscing. Sawarabi Gothic + lorem ipsum, lorem ipsum dolor #eb0100, lorem ipsum dolor #f1eee9. computed style lorem ipsum dolor.

lorem ipsum dolor
01 / colors

Color Palette

brand
Calbee Red
#eb0100
lorem ipsum dolor / CTA / lorem ipsum dolor
text
Text Strong
#2f2f2f
lorem(lorem ipsum dolor)
Text Primary
#3c3c3c
lorem ipsum dolor
Text on Red
#ffffff
lorem ipsum dolor
surface
Background
#ffffff
lorem ipsum
Warm Surface
#f1eee9
lorem ipsum dolor sit amet consectetur
02 / typography

Typography

lorem ipsum
Sawarabi Gothic / 36px / 400 / line-height: normallorem ipsum dolor h1
lorem ipsum
Sawarabi Gothic / 30px / 400 / line-height: normallorem ipsum dolor sit h2
lorem ipsum
Sawarabi Gothic / 22px / 400 / color: #eb0100lorem ipsum dolor h3(lorem ipsum dolor)
2026 lorem ipsum dolor!“THE CALBEE”lorem ipsum dolor
Sawarabi Gothic / 18px / 400 / line-height: normallorem ipsum p
lorem ipsum dolor lorem ipsum
lorem ipsum / 18px / 700 / line-height: normallorem p(lorem)
lorem ipsum dolor sit amet consectetur adipiscing!lorem ipsum dolor“lorem ipsum dolor!”lorem ipsum dolor. lorem ipsum dolor sit amet consectetur.
lorem ipsum / 16px / 400 / line-height: normallorem p
lorem ipsum  ·  lorem ipsum  ·  lorem ipsum dolor
Sawarabi Gothic / 14px / 400lorem ipsum dolor sit
03 / products

Product Cards

lorem ipsum dolor

lorem ipsum dolor lorem ipsum

lorem ipsum
lorem ipsum

lorem ipsum lorem

lorem ipsum
lorem ipsum

lorem ipsum

lorem ipsum
lorem ipsum dolor

lorem ipsum dolor

lorem ipsum
04 / buttons

Buttons

3 lorem radius lorem: 6.4px(lorem)/ 48px(lorem pill)/ 5px(outline)

lorem ipsum
Primary (6.4px)
lorem ipsum dolor
Pill (48px)
lorem ipsum dolor
Outline (5px)
lorem ipsum
Outline White (on red)
05 / forms

Forms

lorem ipsum — border 1px / radius 6.4px
lorem ipsum — border-color: #eb0100
lorem ipsum dolor
lorem — border-color: #eb0100
06 / layout

Spacing & Width

Spacing Scale

8px
16px
24px
32px
64px
120px

Content Widths

Full Bleed 100vw
Content Area 1100px
Body Text 640px