Design System Preview
SUZUKI — 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 lorem ipsum
01 / Colors

lorem ipsum dolor

Brand
Suzuki Blue
#09348b
lorem ipsum / lorem ipsum dolor
Dark Navy
#002b80
lorem active / lorem ipsum dolor
CTA Blue
#166af1
lorem ipsum / lorem CTA
Category
Corporate Navy
#314059
lorem ipsum dolor sit
lorem Green
#25b578
lorem ipsum dolor sit
lorem Gray
#4e5452
lorem ipsum dolor sit
TVCM Blue
#0068b6
TVCM lorem ipsum dolor
Campaign Green
#329f5b
lorem ipsum dolor sit amet
Text
Text Primary (corp)
#0d0d0d
lorem ipsum dolor sit
Text Primary (car)
#212529
lorem ipsum dolor
Text Secondary
#5c5c5c
lorem ipsum dolor
Text Muted
#707070
lorem / lorem ipsum dolor
Text Tertiary
#808080
lorem ipsum
Text H3
#4d4d4d
H3 lorem
Surface & Border
Background
#ffffff
lorem ipsum
Surface Light
#f7f7f7
lorem ipsum dolor
Surface Gray
#f2f2f2
lorem ipsum / lorem ipsum
Border Default
#dddddd
lorem ipsum dolor sit
Border Medium
#707070
lorem / lorem ipsum
Border Card
#d9d9d9
lorem ipsum dolor
Danger
#d65e57
lorem / lorem
02 / Typography

lorem ipsum dolor sit

lorem ipsum/lorem ipsum — H2 (car)
36px / 700 / line-height: 1.2 / letter-spacing: 0.08em / palt: loremlorem ipsum
lorem ipsum dolor — H2 (corp)
34px / 500 / line-height: 1.0 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor — Heading 3
24px / 700 / line-height: 1.2 / color: #4d4d4dlorem ipsum
lorem ipsum dolor sit amet consectetur — H4
20px / 700 / line-height: 1.2 / color: #212529lorem ipsum
lorem — Car Name (16px bold)
16px / 700 / line-height: 1.3 / color: #5c5c5clorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. line-height: 1.5 lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit.
16px / 400 / line-height: 1.5 / letter-spacing: normal / palt: loremlorem ipsum
lorem ipsum dolor — Nav (15px)
15px / 600 / line-height: 1.4 / PC lorem ipsum dolorlorem ipsum
lorem ipsum dolor / lorem — Small (14px)
14px / 400 / line-height: 1.5 / color: #5c5c5c
lorem ipsum IR lorem lorem ipsum dolor — Sub Nav (12px)
12px / 400 / line-height: 1.5lorem ipsum dolor sit
lorem lorem TVCM lorem ipsum dolor
12px / 700 / lorem ipsum dolor(lorem on lorem ipsum)
03 / Article — lorem / lorem ipsum dolor

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor

lorem ipsum dolor sit

lorem ipsum“lorem ipsum dolor, lorem ipsum. ”lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit, SUV lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed.

lorem ipsum dolor sit

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

04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA
lorem ipsum
Outline
lorem ipsum dolor sit amet consectetur
Renewal
lorem lorem ipsum
My Page
GLOBAL
Global
Tabs
lorem ipsum
lorem
lorem ipsum
lorem ipsum
Pagination
05 / Cards

lorem ipsum dolor sit

lorem ipsum

lorem

lorem: 1,142,900 lorem–

lorem ipsum

lorem ipsum

lorem: 1,530,100 lorem–

lorem ipsum

lorem ipsum

lorem: 1,727,000 lorem–

Content Card(lorem ipsum)
TVCM

lorem ipsum dolor sit

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

lorem ipsum dolor

lorem ipsum dolor sit

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

lorem ipsum

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur. “lorem ipsum dolor 2026”lorem ipsum dolor.

06 / Forms

lorem ipsum dolor

lorem ipsum — border: 1px solid #707070, radius: 5px
lorem ipsum — border: #166af1 (CTA Blue)
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #d65e57 (Danger)
lorem ipsum — border: 1px solid #707070, radius: 5px, 14px / 700
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem ipsum. lorem, lorem ipsum dolor
Card Border
#d9d9d9 — lorem ipsum
Button Border
#707070 — lorem / lorem ipsum
Focus State
#166af1 — lorem ipsum dolor
Tab Active
#002b80 — lorem ipsum dolor sit
08 / Layout — Corporate Section

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur adipiscing, Corporate Navy (#314059) lorem ipsum dolor sit. lorem, lorem, 100 lorem ipsum dolor sit amet consectetur adipiscing.

5px
10px
15px
20px
45px
55px
09 / Layout

lorem ipsum dolor

Full Width 1440px
Main Content 940px
Article Preview 620px