Design System Preview
nissin.com/jp — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. CSS Custom Properties lorem ipsum dolor.

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Nissin Red
#ff0000
lorem ipsum / lorem / lorem ipsum
Text
Text Primary
#ffffff
lorem ipsum dolor(lorem ipsum dolor)
Text Secondary
#999999
lorem / lorem ipsum
Text Tertiary
#7f7f7f
lorem ipsum / lorem ipsum dolor
Text on Light
#000000
lorem ipsum / CTA lorem ipsum dolor
Surface & Background
Background Primary
#1a1a1a
lorem ipsum(lorem ipsum dolor)
Background Surface
#4d4d4d
lorem ipsum dolor sit amet
Overlay
rgba(0,0,0,0.8)
lorem ipsum / lorem ipsum dolor
Card / CTA Surface
#ffffff
lorem ipsum / CTA lorem
Border
Border Dark
rgba(255,255,255,0.2)
lorem ipsum dolor sit amet
Border Light
#e5e7eb
lorem ipsum dolor sit amet consectetur
02 / Typography — CSS Custom Properties lorem ipsum dolor

lorem ipsum dolor sit

Display L — lorem ipsum dolor
48px / 700 / line-height: 1.4 / letter-spacing: 0.01emDisplay
Display M — lorem ipsum dolor sit
40px / 700 / line-height: 1.4 / letter-spacing: 0.01emDisplay
Display S — lorem ipsum
36px / 700 / line-height: 1.4 / letter-spacing: 0.01emDisplay
Headline L — lorem ipsum dolor
32px / 700 / line-height: 1.4 / letter-spacing: 0.01emHeadline
Headline M — lorem ipsum
24px / 700 / line-height: 1.4 / letter-spacing: 0.01emHeadline
Headline S — lorem ipsum
20px / 700 / line-height: 1.4 / letter-spacing: 0.01emHeadline
lorem ipsum dolor Body L — lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet line-height: 1.6 lorem letter-spacing: 0.02em lorem ipsum dolor. ABCabc 123
18px / 400 / line-height: 1.6 / letter-spacing: 0.02emBody
lorem ipsum dolor Body M — lorem ipsum dolor sit amet. 16px lorem ipsum / lorem ipsum dolor sit amet consectetur adipiscing.
16px / 400 / line-height: 1.6 / letter-spacing: 0.02emBody
lorem ipsum dolor Body S — lorem / lorem ipsum / lorem ipsum
14px / 400 / line-height: 1.6 / color: Text SecondaryBody
lorem Label S — lorem / lorem
12px / 700 / line-height: 1.5 / letter-spacing: 0.02emLabel
01
Helvetica / 64px / 700 / line-height: 1.0 — lorem ipsum dolor sitRanking
03 / Product — lorem ipsum dolor

lorem ipsum dolor sit amet

CUP NOODLE

lorem ipsum dolor lorem ipsum

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

lorem ipsum dolor

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

2024 lorem 5 lorem / lorem 78g / lorem ipsum dolor 236 lorem(lorem)

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA (white, r16)
lorem ipsum
Secondary (outline, r8)
lorem ipsum
Link Button (red text, r16)
Tab Active
Tab Inactive
WEB lorem
Chip (red, r0)
NEW
Chip (badge)
lorem ipsum
Chip (promo)
05 / Cards

lorem ipsum

Product Image
NEW

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur. 1971 lorem ipsum dolor sit amet.

Product Image
WEB lorem

lorem ipsum U.F.O.

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

Product Image
lorem ipsum

lorem ipsum dolor

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

Product Image

lorem ipsum dolor

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

06 / Forms

lorem ipsum dolor

lorem ipsum — bg: #1a1a1a, border: rgba(255,255,255,0.2), radius: 8px
lorem ipsum — border: #ffffff, shadow: rgba(255,255,255,0.15)
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #ff0000, shadow: rgba(255,0,0,0.2)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem(lorem ipsum)
Elevation 1
lorem hover
Elevation 2
lorem ipsum dolor
Elevation 3
lorem ipsum / Cookie lorem
08 / Layout — Spacing Tokens

lorem ipsum dolor & lorem ipsum

Spacing Scale
4px
--space-1
8px
--space-2
16px
--space-3
24px
--space-4
32px
--space-5
40px
--space-6
56px
--space-7
80px
--space-8
120px
--space-9
Content Widths
Max Container 1280px
Content Area 1100px
Product Detail 800px
Card Grid
1/4
2/4
3/4
4/4