Design System Preview
Honda — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum Web lorem ipsum HondaGlobalFontJP, lorem ipsum palt, lorem ipsum dolor sit, Honda lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

lorem ipsum dolor sit amet consectetur DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand & Accent
Honda Red
#cc0000
--Color_Accent-Red
Design Red
#ff4a12
lorem ipsum dolor sit
Design Yellow
#ffc902
lorem ipsum dolor sit
Design Blue
#0a008a
lorem ipsum dolor sit
Text
Text Primary
#35363b
--Color_Text-Black_Basic
Text Sub
#65666a
--Color_Text-Black_Sub
Text Appendix
#8c8d91
--Color_Text-Black_Appendix
Text Strong
#000000
--Color_Text-Black_Strong
Text (on Dark)
White Strong
White Strong
#ffffff
--Color_Text-White_Strong
White Basic
White Basic
#d7d8da
--Color_Text-White_Basic
White Sub
White Sub
#c8c9cc
--Color_Text-White_Sub
Surface & Background
Background
#ffffff
lorem ipsum
Light Gray
#f4f5f5
--Color_Basic-LIGHT-GRAY
Gallery Card BG
#e4e5e6
lorem ipsum dolor sit
Dark BG
#35363b
lorem ipsum / lorem ipsum dolor
Frosted Glass
backdrop-filter: blur
Frosted Header
rgba(255,255,255,0.8)
lorem ipsum dolor sit amet consectetur
Nav Overlay
rgba(53,54,59,0.95)
lorem ipsum dolor
Border
Border Default
#c6c6c6
lorem ipsum dolor
Border Dark
#35363b
CTA lorem ipsum
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor — Display Title
32px / Bold (font-family) / line-height: 1.3 / letter-spacing: 0.04em / palt: lorem ipsumlorem ipsum
lorem ipsum dolor sit — Nav Heading
20px / Bold (font-family) / line-height: 1.4 / letter-spacing: 0.04emlorem ipsum dolor
lorem ipsum dolor — Honda lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit. line-height: 1.4 lorem palt lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. ABCabc 123
16px / Regular / line-height: 1.4 / letter-spacing: normal / palt: lorem ipsumlorem
lorem ipsum dolor sit — Light lorem ipsum dolor sit amet, lorem ipsum dolor
16px / Light (font-family) / line-height: 1.4 / letter-spacing: 0.05emlorem ipsum
lorem ipsum dolor — Footer / Caption (14px Light)
14px / Light (font-family) / color: Text Sublorem ipsum
SECTION LABEL — 12PX LIGHT UPPERCASE
12px / Light / uppercase / letter-spacing: 0.1emlorem ipsum dolor
03 / Article — lorem ipsum dolor sit

lorem ipsum dolor sit amet

Honda lorem ipsum dolor sit amet

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

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

lorem ipsum dolor sit amet

HondaGlobalFontJP lorem, TypeSquare lorem ipsum dolor sit Honda lorem ipsum dolor Web lorem ipsum dolor. Regular / Light / Bold lorem 3 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. font-feature-settings: "palt" lorem ipsum dolor sit, ABCabc 123 lorem ipsum dolor / lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.

border-radius: 0px lorem ipsum dolor sit, Honda lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing.

04 / Buttons — radius: 0px

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur
Outline CTA (Primary)
lorem ipsum
Solid Dark
lorem ipsum dolor
Accent Red
Honda Technology
Small / Sub
English
Outline Light (on dark)
05 / Cards — Gallery Style

lorem ipsum dolor sit

Product Cards (white body)
VEHICLE IMAGE

Honda e: Architecture

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

lorem ipsum
VEHICLE IMAGE

ASIMO lorem ipsum dolor sit

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

lorem ipsum
VEHICLE IMAGE

Honda Jet Elite II

lorem ipsum dolor sit amet, Honda lorem ipsum dolor sit. lorem ipsum dolor.

lorem ipsum
Gallery Cards (design page style, #e4e5e6 bg)
DESIGN WORK
Honda Design — Exterior
DESIGN WORK
Honda Design — Interior
DESIGN WORK
Honda Design — Mobility
DESIGN WORK
Honda Design — Product
06 / Forms — radius: 0px

lorem ipsum dolor

lorem ipsum — border: #c6c6c6, radius: 0px
lorem ipsum — border: #35363b
lorem ipsum dolor sit amet consectetur
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. Honda lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing
Level 1: Hover
0 2px 4px rgba(0,0,0,0.08)
Level 2: Dropdown
0 4px 12px rgba(0,0,0,0.12)
Frosted Glass
rgba(255,255,255,0.8) + backdrop-filter: blur()
Dark Section

lorem ipsum dolor (#35363b)

Honda lorem ipsum dolor sit amet consectetur, lorem #35363b lorem ipsum dolor #d7d8da lorem ipsum dolor. lorem ipsum #ffffff lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit #d7d8da lorem ipsum dolor sit amet consectetur.

English
Language selector on dark bg
08 / Layout

lorem ipsum dolor sit

4-Column Grid (Product Gallery)
1
2
3
4
3-Column Grid
1
2
3
2-Column Grid
1
2
Spacing Scale
4px
8px
16px
24px
40px
80px