Design System Preview

Ajinomoto

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 sit amet consectetur adipiscing elit.

* lorem ipsum UD lorem R(body)lorem Noto Sans JP(lorem)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
Ajinomoto Red
#e60012
lorem ipsum dolor / CTA / lorem
Red Variant
#e60a12
lorem ipsum dolor
Border Red
#cc0000
lorem ipsum dolor / lorem
Green
#008849
lorem ipsum dolor
Text
Text Primary
#333333
lorem ipsum dolor
Text Secondary
#5f5f5f
lorem ipsum dolor
Text White
#ffffff
lorem ipsum dolor
Surface & Background
Background
#ffffff
lorem ipsum
Surface Pink
#ffefee
lorem ipsum / lorem ipsum
Section Gray
#f8f8f8
lorem ipsum dolor
Light Gray
#f0f0f0
lorem ipsum
Border
#cccccc
lorem ipsum / lorem ipsum
Footer
Footer Dark
#333333
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor --- H1 (32px / 700)
32px / 700 / Noto Sans JP / line-height: 1.5 / color: #333333lorem ipsum dolor
lorem ipsum dolor --- H2 (46px)
46px / 700 / Noto Sans JP / line-height: 1.3 / color: #e60a12lorem ipsum
lorem ipsum dolor --- H3 (40px)
40px / 700 / Noto Sans JP / line-height: 1.3 / color: #333333lorem ipsum
lorem ipsum --- H4 (20px / 700)
20px / 700 / Noto Sans JP / line-height: 1.5 / color: #333333
lorem ipsum dolor --- Nav (15px / 700)
15px / 700 / color: #333333 on white / red bottom borderlorem ipsum dolor
lorem ipsum dolor --- Body (16px). UD lorem R lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing. letter-spacing lorem normal, palt lorem ipsum dolor sit. ABCabc 123 lorem Cook Do
16px / 400 / line-height: 1.5 (24px) / letter-spacing: normal / palt: lorem
lorem ipsum dolor --- Body Content (17px / 700). lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing elit.
17px / 700 / line-height: 1.6 (27.2px) / color: #333333lorem ipsum dolor
03 / Product

lorem ipsum dolor

lorem
lorem
lorem ipsum dolor sit
lorem ipsum →
C
Cook Do
lorem ipsum dolor sit
lorem ipsum →
lorem
lorem ipsum
lorem ipsum dolor
lorem ipsum →
K
lorem ipsum
lorem ipsum dolor sit
lorem ipsum →
04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA (Pill)
radius: 45px / border: #cc0000
lorem ipsum
Secondary (Outlined Pill)
radius: 45px / border: #cc0000
lorem ipsum dolor
Sustainability (Green Pill)
radius: 45px / border: #008849
lorem ipsum dolor
Nav Card
radius: 5px / shadow

Pill Button Spec

Primary: bg #e60012 / text #ffffff / border 1px solid #cc0000 / border-radius 45px / padding 8px 24px
Secondary: bg #ffffff / text #e60012 / border 1px solid #cc0000 / border-radius 45px
Nav Card: bg #ffffff / text #333333 / border-radius 5px / shadow 0 2px 8px rgba(0,0,0,0.1)

05 / Cards

lorem ipsum dolor sit

lorem

lorem ipsum dolor sit

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

lorem ipsum →
lorem ipsum dolor

lorem ipsum dolor sit amet consectetur

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

lorem ipsum →
lorem

lorem ipsum

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum --- border: 1px solid #cccccc, radius: 4px
lorem ipsum --- border: 2px solid #e60012 (Ajinomoto 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 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 #e60012
08 / Layout

lorem ipsum

Container Width

Max Width 1200px
Horizontal Padding 48px

Section Backgrounds

#ffffff
Background
#ffefee
Surface Pink
#f8f8f8
Section Gray
#333333
Footer

Border Radius

45px (Pill CTA)
45px (Outlined Pill)
5px (Nav Card)
8px (Card)