Toyota Design System Preview

bZ4X Touring

Beyond Zero — lorem ipsum dolor sit amet

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 sit amet DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Toyota Red
#eb0a1e
lorem ipsum dolor
Toyota Red Dark
#cc0000
lorem / lorem
Text
Text Primary
#222222
lorem ipsum dolor
Text Secondary
#666666
lorem ipsum dolor
Text Disabled
#999999
lorem ipsum
Semantic
Success
#388e3c
lorem / lorem
Danger
#d32f2f
lorem / lorem
Warning
#f9a825
lorem / lorem
Surface & Border
Background
#ffffff
lorem ipsum
Surface
#f5f5f5
lorem / lorem ipsum dolor
Dark Surface
#222222
lorem ipsum / CTA
Border
#dddddd
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

bZ4X Touring — Display (40px)
40px / 700 / line-height: 1.5 / letter-spacing: 0.04emlorem ipsum dolor
lorem ipsum dolor — Heading 2 (20px)
20px / 700 / line-height: 1.5 / letter-spacing: 0.04emlorem ipsum dolor
lorem ipsum dolor — Heading 3 (16px)
16px / 700 / line-height: 1.5 / letter-spacing: 0.04emlorem ipsum / lorem ipsum
lorem ipsum dolor — lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. letter-spacing: 0.04em lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. ABCabc 123
16px / 400 / line-height: 1.5 / letter-spacing: 0.64px (0.04em)lorem
lorem ipsum dolor — Caption (12px)
12px / 400 / line-height: 1.5 / color: Text Secondary
03 / Vehicle Article — lorem ipsum dolor

lorem ipsum dolor sit amet consectetur

bZ4X
Beyond Zero — lorem ipsum dolor, lorem ipsum dolor

lorem ipsum dolor sit BEV lorem ipsum. e-TNGA lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor

lorem ipsumFWD / 4WD
lorem ipsum(WLTC)lorem 559 km(FWD)
lorem ipsum dolor71.4 kWh
lorem x lorem x lorem4,690 x 1,860 x 1,650 mm
lorem ipsum(lorem)6,000,000 lorem–

lorem ipsum

Toyota Safety Sense lorem ipsum. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor: lorem ipsum dolor sit amet / lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.

lorem ipsum

lorem ipsum CO2 lorem ipsum. lorem ipsum dolor sit amet consectetur adipiscing, lorem 1,800 km lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor sit amet
Primary (Toyota Red)
lorem ipsum
Dark CTA
lorem ipsum
Outline
lorem ipsum
Danger
05 / Cards — Vehicle Lineup

lorem ipsum

Photo: bZ4X
BEV

bZ4X

lorem ipsum dolor sit BEV lorem ipsum. e-TNGA lorem ipsum dolor sit.

6,000,000 lorem–
lorem ipsum →
Photo: CROWN
Sedan

lorem ipsum

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

4,350,000 lorem–
lorem ipsum →
Photo: HARRIER
SUV

lorem ipsum

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

3,128,000 lorem–
lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #dddddd, radius: 4px
lorem ipsum — border: #222222
lorem — border: #d32f2f (danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
Level 1
lorem, lorem ipsum dolor
Level 2
lorem ipsum dolor, lorem ipsum dolor
Level 3
lorem ipsum / lorem ipsum
08 / Spacing

lorem ipsum dolor sit

4px
8px
16px
24px
40px
64px