Design System Preview
nissan.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.

WEB lorem ipsum lorem ipsum dolor
01 / Colors

lorem ipsum dolor

Brand
NISSAN Red
#c3002f
lorem CTA / lorem ipsum
Dark
#1a1a1a
lorem ipsum / lorem ipsum dolor
Near Black
#070707
lorem ipsum dolor
Text
Text Primary
#343434
lorem / lorem ipsum dolor
Text Secondary
#666666
lorem ipsum dolor
Text Muted
#8a8a8a
lorem ipsum dolor / lorem
Text Black
#000000
lorem ipsum / lorem ipsum
Surface
Background
#ffffff
lorem ipsum
Surface Light
#f6f6f6
lorem ipsum
Surface Gray
#eeeeee
lorem ipsum CTA / lorem ipsum
Surface Notice
#f2f2f2
lorem ipsum dolor
Semantic
Danger
#d32f2f
lorem / lorem
Success
#2e7d32
lorem / lorem
Warning
#f57c00
lorem / lorem
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor sit --- Section H2
28px / 700 / line-height: 1.0 / letter-spacing: 0.1pxlorem ipsum dolor
lorem e-POWER --- H3 Card Title
18px / 700 / line-height: 1.11 / letter-spacing: 0.1pxlorem ipsum
lorem ipsum dolor --- Tab Label
18px / 400 / line-height: 1.0 / letter-spacing: 0.1pxlorem ipsum dolor sit
lorem ipsum dolor --- lorem e-POWER lorem ipsum, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt.
14px / 400 / line-height: 1.57 / letter-spacing: normallorem
lorem ipsum dolor(lorem) --- Body P variant
14px / 400 / line-height: 1.5 / color: #000000lorem ipsum
lorem ipsum dolor --- Caption (13px)
13px / 400 / line-height: 1.0 / color: #666666lorem ipsum dolor
lorem --- Small (12px) / lorem ipsum dolor sit amet consectetur adipiscing.
12px / 400 / line-height: 1.4 / color: #666666lorem / lorem ipsum
lorem ipsum dolor sit --- Nav Link
14px / 400 / line-height: 1.71 / letter-spacing: 0.9px / liga: offlorem ipsum dolor
lorem ipsum dolor --- Header Button
12px / 700 / letter-spacing: 0.9px / bg: #070707lorem ipsum
03 / Product --- lorem ipsum dolor

lorem ipsum dolor sit amet consectetur

lorem e-POWER

lorem e-POWER lorem ipsum, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor“lorem ipsum dolor”lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor

lorem ipsum dolore-POWER(lorem ipsum dolor sit)
lorem x lorem x lorem4,690mm x 1,695mm x 1,870mm
lorem ipsum7 / 8 lorem
lorem ipsum2WD / 4WD
lorem(WLTC lorem)18.4km/L

lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt. lorem ipsum dolor sit amet consectetur, lorem ipsum / lorem ipsum / lorem ipsum dolor sit amet consectetur.

WEB lorem ipsum lorem ipsum
04 / Buttons

lorem ipsum dolor sit

WEB lorem ipsum
Primary CTA (lorem)
lorem ipsum dolor
Secondary CTA (lorem)
lorem ipsum
Header Button
lorem ipsum dolor →
Guide CTA (lorem 8px)

lorem: NISSAN lorem CTA loremlorem(border-radius: 0px)lorem. pill lorem ipsum dolor sit. lorem CTA lorem ipsum dolor 8px lorem ipsum dolor.

05 / Cards

lorem ipsum dolor sit amet

lorem ipsum

lorem

lorem ipsum dolor sit amet consectetur. e-POWER lorem ipsum dolor sit.

2,798,400 lorem(lorem)–
WEB lorem ipsum lorem
lorem ipsum

lorem

lorem 2 lorem e-POWER lorem. lorem ipsum dolor sit amet consectetur adipiscing.

2,299,000 lorem(lorem)–
WEB lorem ipsum lorem
lorem ipsum

lorem

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

6,591,200 lorem(lorem)–
WEB lorem ipsum
06 / Forms --- lorem ipsum dolor

lorem ipsum dolor

lorem ipsum --- border: #cccccc, radius: 0px(lorem)
lorem ipsum --- border: #c3002f (NISSAN Red)
lorem ipsum dolor sit amet consectetur
lorem --- border: #d32f2f (danger)
lorem ipsum dolor
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem(lorem)
Level 1
lorem ipsum dolor
Level 2
lorem ipsum dolor / lorem ipsum dolor
Level 3
lorem ipsum / lorem ipsum

lorem ipsum dolor sit amet(box-shadow: none). lorem ipsum dolor sit amet #1a1a1a lorem ipsum #ffffff lorem ipsum dolor sit.

08 / Layout

lorem ipsum dolor & lorem ipsum

Spacing Scale

4px
8px
16px
25px
48px
80px

Container Width

Max Container 1200px
Content Area 940px

Border Radius Scale

0px (lorem)
8px (lorem)

NISSAN lorem(0px)lorem. pill lorem ipsum dolor sit. 8px lorem ipsum CTA lorem ipsum dolor.