Design System Preview
kewpie.co.jp

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
Kewpie Red
#e4002b
lorem ipsum dolor. lorem / CTA / lorem
Kewpie Orange
#f18606
lorem ipsum / lorem ipsum dolor
Text
Text Primary
#333333
lorem ipsum dolor
Text Secondary
#666666
lorem ipsum dolor
Text on Red
#ffffff
lorem ipsum dolor sit
Surface & Background
Background
#ffffff
lorem ipsum
Light Pink
#fff0f1
lorem ipsum. lorem ipsum
Neutral Gray
#f2f2f2
lorem ipsum dolor
Light Gray
#f9f9f9
lorem ipsum dolor
Warm Gray
#f2f1f1
lorem ipsum dolor sit
Carousel Dot
#efefef
lorem ipsum dolor sit amet
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — Section Heading (h2)
30px / 400 / line-height: 1.33 / letter-spacing: 0.05em / color: #e4002blorem ipsum dolor
lorem ipsum dolor — Update Heading (h3)
25px / 400 / line-height: 1.7 / color: #e4002blorem ipsum
lorem ipsum dolor sit amet — Item Heading (h3)
16px / 400 / line-height: 1.6 / color: #e4002blorem ipsum
lorem ipsum — Subsection (h4)
15px / 400 / line-height: 1.7 / color: #e4002blorem ipsum
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. ABCabc 123
15px / 400 / line-height: 1.7 / letter-spacing: 0.05em / color: #333333lorem (p)
body lorem ipsum dolor — lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet body lorem line-height: 2.0 lorem ipsum dolor sit.
15px / 400 / line-height: 2.0 / letter-spacing: 0.05embody lorem ipsum
lorem ipsum dolor sit — lorem ipsum dolor
15px / 400 / line-height: 1.125lorem ipsum dolor
lorem ipsum dolor — Text Link (14px)
14px / 400 / line-height: 1.7 / color: #e4002blorem
lorem ipsum dolor sit — Nav Link (13px / Bold)
13px / 700 / line-height: 2.0 / letter-spacing: 0.05em — lorem Bold lorem ipsumlorem ipsum dolor
03 / Recipe & Product

lorem / lorem ipsum dolor

🍳

lorem ipsum dolor

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

lorem
🍲

lorem ipsum dolor

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

lorem
🥗

lorem ipsum dolor

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

lorem ipsum dolor
04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary (pill)
bg: #e4002b / radius: 100px
lorem ipsum dolor
Secondary (pill reverse)
bg: #fff / color: #e4002b
lorem / IR
Outline (pill)
bg: transparent / border: #e4002b
lorem ipsum dolor
Orange Accent
bg: #f18606

lorem ipsum dolor

lorem ipsum dolor

05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur

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

lorem ipsum →

lorem ipsum dolor sit

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

lorem ipsum →

lorem / lorem ipsum dolor

lorem ipsum dolor sit amet consectetur / lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur.

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #dddddd, radius: 8px
lorem ipsum — border: #e4002b (Kewpie Red)
lorem ipsum dolor sit amet consectetur
lorem — border: #cc0000
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem ipsum. lorem ipsum dolor sit amet consectetur adipiscing
Level 1: Subtle
0 2px 8px rgba(0,0,0,0.08) — lorem ipsum dolor
Level 2: Raised
0 4px 16px rgba(0,0,0,0.12) — lorem ipsum / lorem ipsum dolor
Focus Ring
#e4002b + rgba(228,0,43,0.15) shadow
08 / Layout

lorem ipsum

lorem ipsum dolor

Main Content 960px
Article / Recipe 720px
Recipe Card Grid (3col) 960px

lorem ipsum dolor sit

1. Roboto → lorem ipsum dolor
2. YakuHanJP → lorem(“”. , )lorem ipsum dolor
3. BaseFont-JP → lorem ipsum(lorem ipsum dolor sit)
4. Helvetica / Arial → lorem ipsum dolor sit
5. lorem ipsum dolor Pro W3 → macOS lorem ipsum dolor
6. lorem ipsum → Windows lorem ipsum dolor
7. ＭＳ Ｐlorem ipsum → lorem ipsum Windows