Design System Preview
kikkoman.co.jp — 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.

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Kikkoman Orange
#e96600
CTA / lorem / lorem
Orange Hover
#d45c00
lorem ipsum(lorem)
Sub Brand
Del Monte
#008f4b
lorem ipsum
Manjo
#fb3733
lorem ipsum
Manns Wine
#922e41
lorem ipsum dolor
Soymilk
#a3ca0f
lorem ipsum dolor
Text
Text Primary
#333333
lorem ipsum dolor
Placeholder
#898989
lorem ipsum dolor sit
Text White
#ffffff
CTA lorem ipsum
Surface
Background
#ffffff
lorem ipsum
Warm Cream
#fdf5e2
lorem ipsum dolor
Warm Cream Alt
#fdf7e0
lorem ipsum
Warm Peach
#ffe4c3
lorem ipsum dolor
Light Gray
#f5f5f5
lorem ipsum dolor
Error Surface
#ffe7e7
lorem ipsum dolor
Border & UI
Border
#999999
lorem / lorem
Border Dark
#333333
lorem
Carousel Dot
#cccccc
lorem ipsum
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor — Display (h2)
40px / 500 / line-height: 1.4 / letter-spacing: normal / palt: loremlorem
lorem ipsum dolor sit amet — Heading 1
32px / 700 / line-height: 1.6 / letter-spacing: normal / palt: loremlorem
lorem ipsum — Heading 2 (orange)
28px / 700 / line-height: 1.3 / color: #e96600lorem
lorem ipsum dolor sit — Heading 2 (section)
26px / 700 / line-height: 1.4 / color: #333333lorem
lorem ipsum dolor — Heading 2
22px / 700 / line-height: 1.4 / letter-spacing: normallorem
lorem ipsum dolor sit amet consectetur — Heading 3 (lead)
22px / 500 / line-height: 1.4 / color: #e96600lorem
lorem ipsum dolor — Nav Primary
20px / 700 / line-height: 1.6lorem ipsum
lorem ipsum dolor / lorem ipsum — Tab / Sub Nav
18px / 700 / line-height: 1.4lorem
lorem ipsum dolor — lorem ipsum dolor sit amet font-weight: 500 lorem ipsum dolor. lorem ipsum dolor Medium lorem ipsum, lorem ipsum dolor sit amet consectetur. letter-spacing lorem palt lorem ipsum dolor sit.
16px / 500 / line-height: 1.6 / letter-spacing: normal / palt: lorembody
lorem ipsum dolor sit — Card Title (h3)
16px / 700 / line-height: 1.6lorem
lorem ipsum — Small (14px)
14px / 700 / line-height: 1.4lorem ipsum
lorem ipsum dolor — Caption (12px)
12px / 500 / line-height: 1.6lorem ipsum
03 / Recipe — lorem ipsum

lorem ipsum dolor sit amet consectetur

lorem ipsum

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor sit amet consectetur“lorem ipsum dolor”lorem, 365 lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA (square)
lorem ipsum dolor
Pill Button
lorem ipsum
Pill Button (more)
Tab (active)
Tab (inactive)
Tab (inactive)
Search (input + submit)
Carousel Dots
05 / Cards

lorem ipsum dolor sit

🍲

lorem ipsum dolor sit

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

lorem ipsum 20 lorem / 2 lorem
🍛

lorem ipsum dolor sit amet

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

lorem ipsum 30 lorem / 4 lorem
🍟

lorem ipsum dolor sit amet

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

lorem ipsum dolor / lorem 12 lorem
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #999999, radius: 5px
lorem ipsum — border: #e96600 (brand orange)
lorem — border: #c00
07 / Elevation — lorem

Depth & Elevation

Level 0: Flat
lorem — lorem ipsum
Header Shadow
rgba(221,221,221,0.004) 0 1px 0 0
Card Shadow
0 2px 8px rgba(0,0,0,0.08)
Card Hover
0 4px 16px rgba(0,0,0,0.12)

lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur(lorem → lorem ipsum → lorem)lorem.

08 / Layout — Spacing & Surface

lorem ipsum dolor

White
#ffffff — lorem ipsum
Warm Cream
#fdf5e2 — lorem ipsum dolor
Warm Peach
#ffe4c3 — lorem ipsum
Light Gray
#f5f5f5 — lorem ipsum dolor
Error
#ffe7e7 — lorem ipsum dolor