Design System Preview
GLICO

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.

* lorem ipsum dolor sit(lorem ipsum dolor)lorem. lorem ipsum dolor sit Google Fonts lorem Noto Sans JP lorem ipsum dolor sit.
lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Glico Red
#f44336
lorem ipsum dolor / CTA / lorem
Glico Red Deep
#dd3326
lorem / lorem ipsum
Pink Tint
#f38077
lorem ipsum dolor / lorem
Text
Text Primary
#000000
lorem ipsum dolor
Text Secondary
#696969
lorem / lorem ipsum dolor
Text Content
#212121
lorem ipsum dolor
Text White
#ffffff
lorem ipsum dolor
Surface & Background
Warm Cream
#faf3f0
lorem ipsum
Surface White
#ffffff
lorem / lorem ipsum dolor
Section Gray
#eeeee8
lorem ipsum dolor
Light Gray
#f0f0f0
lorem ipsum
Border
#d0d0d0
lorem ipsum / lorem ipsum
Footer
Footer Navy
#27455c
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor --- H1 (15px / 700)
15px / 700 / color: #212121lorem ipsum
lorem ipsum dolor --- H2 (16px)
16px / 700 / line-height: 1.5 (24px) / color: #696969lorem ipsum
lorem ipsum --- H3 (16px / 1.3)
16px / 700 / line-height: 1.3 (20.8px) / color: #696969
lorem ipsum --- H4 (14px)
14px / 700 / line-height: 1.5 (21px) / color: #696969
lorem ipsum dolor --- Nav (15px / 700)
15px / 700 / color: #ffffff on #f44336lorem ipsum dolor
lorem ipsum dolor --- Body (15px). lorem ipsum dolor sit amet consectetur adipiscing elit, Web lorem ipsum dolor sit amet. letter-spacing lorem normal, palt lorem ipsum dolor sit. ABCabc 123 lorem ipsum PRETZ
15px / 400 / line-height: 1.7 (25.5px) / letter-spacing: normal / palt: lorem
lorem ipsum dolor --- A (15px / 400)
15px / 400 / color: #212121lorem ipsum dolor
03 / Product

lorem ipsum dolor

P
lorem ipsum lorem ipsum dolor
lorem ipsum dolor sit amet consectetur
lorem ipsum →
Pr
lorem ipsum lorem ipsum
lorem ipsum dolor sit amet consectetur
lorem ipsum →
B
lorem
lorem ipsum dolor sit amet consectetur
lorem ipsum →
A
lorem ipsum dolor
lorem ipsum dolor sit amet
lorem ipsum →
04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA
radius: 17.5px (pill)
lorem ipsum
Secondary
radius: 20px (pill)
lorem ipsum dolor
Category Tab
radius: 4px
lorem ipsum dolor
Nav CTA
radius: 20px / white bg

Pill Button Spec

Primary: bg #f44336 / text #ffffff / border-radius 17.5px / padding 8px 24px
Secondary: bg #ffffff / text #212121 / border-radius 20px / shadow 0 2px 8px rgba(0,0,0,0.1)

05 / Cards

lorem ipsum dolor sit

lorem

lorem ipsum dolor sit

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

lorem ipsum →
lorem

lorem ipsum dolor sit amet

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

lorem ipsum →
lorem ipsum

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur. 1922 lorem 100 lorem ipsum dolor sit amet consectetur.

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum --- border: 1px solid #d0d0d0, radius: 4px
lorem ipsum --- border: 2px solid #f44336 (Glico Red)
lorem ipsum dolor sit amet consectetur adipiscing
lorem --- border-color: #cc0000
lorem ipsum --- border: 1px solid #d0d0d0, radius: 4px
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem ipsum / lorem
Elevation 1
0px 2px 8px rgba(0,0,0,0.10)
Elevation 2
0px 4px 16px rgba(0,0,0,0.12)
Elevation 3
0px 8px 24px rgba(0,0,0,0.15)
Focus Ring
2px solid #f44336
08 / Layout

lorem ipsum

Container Width

Max Width 1200px
Horizontal Padding 48px

Section Backgrounds

#faf3f0
Warm Cream
#ffffff
Surface
#eeeee8
Section Gray
#27455c
Footer

Border Radius

17.5px (Primary CTA)
20px (Secondary)
4px (Category Tab)
8px (Card)