Design System Preview
MORINAGA

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.

Font Note: lorem ipsumlorem ipsum, "Yu Gothic", YuGothic lorem. lorem ipsum dolor sit Google Fonts loremNoto Sans JP(weight 500 / 700)lorem ipsum dolor sit. lorem ipsum font-weight lorem500（Medium） lorem.
lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Morinaga Red
#b6002a
lorem ipsum dolor / CTA / lorem ipsum
Allergy Blue
#003f9a
lorem ipsum dolor sit
Green
#468254
lorem ipsum dolor / lorem ipsum
Text
Text Primary
#000000
lorem ipsum dolor
Text Secondary
#666666
lorem ipsum dolor / lorem
Text Tertiary
#707070
lorem ipsum dolor
Text Sub Heading
#696969
H3 / lorem ipsum
Text White
#ffffff
lorem ipsum dolor
Link
Link Blue
#3860be
lorem ipsum dolor
Surface & Background
Background
#ffffff
lorem ipsum
Background Section
#f7f7f7
lorem ipsum dolor
Border
#e5e5e5
lorem / lorem ipsum
Border Input
#cccccc
lorem ipsum dolor
Navy
#27455c
lorem ipsum dolor sit
Footer Background
#b6002a
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor sit --- H2 Main (42px / 500)
42px / 500 / line-height: 1.4 / weight 500 lorem ipsum dolorlorem ipsum dolor
lorem ipsum dolor sit --- H2 Sub (32px / 700)
32px / 700 / line-height: 1.8lorem ipsum dolor
lorem ipsum dolor --- P Subtitle (20px / 700)
20px / 700 / line-height: 1.4lorem ipsum CTA lorem ipsum
lorem ipsum --- H3 (18px / 700)
18px / 700 / line-height: 1.2 / color: #696969lorem ipsum
lorem ipsum dolor --- Nav (16px / 700)
16px / 700 / line-height: 1.2 / color: #000lorem ipsum dolor
lorem ipsum dolor --- Body (16px / 500). lorem ipsum Medium(weight 500)lorem ipsum dolor. lorem 400 lorem ipsum dolor sit, 1.8 lorem ipsum dolor sit amet consectetur. letter-spacing lorem normal, palt lorem ipsum. ABCabc 123
16px / 500 / line-height: 1.8 / letter-spacing: normal / palt: lorem /lorem ipsum weight
lorem ipsum dolor --- Body Gray (16px / 500)
16px / 500 / line-height: 1.8 / color: #707070
lorem ipsum dolor --- H4 (14.08px / 600)
14.08px / 600 / line-height: 1.5 / color: #696969lorem ipsum dolor
lorem ipsum --- Caption (14px / 500). lorem ipsum dolor sit amet consectetur adipiscing.
14px / 500 / color: #666666
03 / Product

lorem ipsum dolor

C
lorem ipsum dolor
lorem ipsum dolor sit amet consectetur
lorem ipsum →
H
lorem ipsum
lorem ipsum dolor sit amet consectetur
lorem ipsum →
D
lorem
12 lorem ipsum dolor sit
lorem ipsum →
K
lorem ipsum dolor sit
1913 lorem ipsum dolor sit
lorem ipsum →
lorem ipsum dolor lorem ipsum dolor
04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA
radius: 100px (pill)
lorem ipsum
Secondary
radius: 100px (pill)
lorem ipsum dolor
Allergy
bg: #003f9a / pill
OK
Cookie OK
radius: 2px
lorem
Cookie Settings
radius: 2px / outline

Button Spec

Primary: bg #b6002a / text #ffffff / border-radius 100px / weight 500
Secondary: bg #ffffff / text #b6002a / border 1px solid #b6002a
Allergy: bg #003f9a / text #ffffff / radius 100px

05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor

lorem ipsum dolor sit amet

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

lorem ipsum →
lorem ipsum dolor

lorem ipsum dolor sit amet

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

lorem ipsum →
lorem ipsum dolor

lorem ipsum dolor sit

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum --- border: 1px solid #cccccc, radius: 4px, weight: 500
lorem ipsum --- border: 2px solid #b6002a (Morinaga Red)
lorem ipsum dolor sit amet consectetur adipiscing
lorem --- border-color: #cc0000
lorem ipsum --- border: 1px solid #cccccc, radius: 4px
07 / Elevation

Depth & Elevation

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

lorem ipsum

Content Width

Max Width 1200px
Section Padding 48px

Section Backgrounds

#ffffff
Default
#f7f7f7
Section
#b6002a
Footer

Border Radius

100px (Primary CTA)
100px (Allergy)
2px (Cookie)
8px (Cards)
4px (Inputs)

Font Weight Scale

Aa lorem 500
Medium --- lorem ipsum
Aa lorem 600
SemiBold --- H4 lorem ipsum
Aa lorem 700
Bold --- lorem / lorem