Design System Preview
global.toshiba — 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 dolor / lorem / lorem ipsum dolor.

01 / Colors

lorem ipsum dolor

Brand
Toshiba Blue
#0064d2
lorem ipsum dolor / CTA / lorem ipsum
Light Blue
#0092ef
lorem ipsum
Text
Text Primary
#000000
lorem ipsum dolor(lorem ipsum)
Text on Blue
#eeeeee
lorem ipsum dolor sit amet
Link
#0064d2
lorem ipsum dolor
Surface
Background
#ffffff
lorem ipsum
Surface Gray
#e7e7e8
lorem ipsum dolor
Surface Dark
#505054
lorem ipsum dolor sit
Surface Blue
#0064d2
lorem ipsum dolor
Border
Border Default
#cccccc
lorem ipsum / lorem ipsum
Border Light
#dddddd
lorem ipsum
02 / Typography — lorem

lorem ipsum dolor sit

lorem / lorem ipsum — Heading 1
48px / 700 / line-height: 1.5 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor — Heading 2
30px / 700 / line-height: 1.5 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor sit amet — Heading 3
24px / 700 / line-height: 1.5 / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor sit amet, “lorem ipsum dolor sit amet”, “lorem ipsum dolor sit amet consectetur”, “lorem ipsum＆lorem ipsum dolor”lorem 3 lorem ipsum dolor sit amet. ABCabc 123
16px / 400 / line-height: 1.5 / letter-spacing: normal / palt: loremlorem
lorem ipsum dolor — lorem ipsum dolor, lorem ipsum (14px)
14px / 400 / line-height: 1.5lorem ipsum / lorem
lorem ipsum dolor — Breadcrumb (12px)
12px / 400 / line-height: 1.5lorem ipsum
03 / Product — lorem ipsum

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet, “lorem ipsum dolor sit amet”, “lorem ipsum dolor sit amet consectetur”, “lorem ipsum＆lorem ipsum dolor”lorem 3 lorem ipsum dolor sit amet.

lorem ipsum / lorem

lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. ABCabc 123

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, AI, IoT lorem ipsum dolor sit amet consectetur adipiscing elit.

04 / Buttons

lorem ipsum dolor sit

Search CTA (radius: 3px)
lorem / lorem ipsum dolor
Text Link
Accordion Buttons (flat, border-bottom)
05 / Cards

lorem ipsum dolor sit

White Cards(lorem)

lorem ipsum dolor sit amet

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

lorem ipsum →

lorem ipsum dolor sit amet consectetur

IoT lorem AI lorem ipsum dolor sit amet consectetur, lorem DX lorem ipsum dolor sit amet consectetur.

lorem ipsum →

lorem ipsum＆lorem ipsum dolor

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

lorem ipsum →
Dark Cards(lorem ipsum #505054)

lorem ipsum dolor sit amet consectetur

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

lorem ipsum →

lorem ipsum dolor sit amet

DX lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod.

lorem ipsum →

lorem ipsum dolor sit amet

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum dolor
lorem ipsum dolor — select: border-radius: 3px 0 0 3px / input: border: 1px solid #ddd / button: bg: #0064d2, radius: 0 3px 3px 0
lorem ipsum — border: 1px solid #dddddd, radius: 0px
lorem ipsum — border: #0064d2 (Toshiba Blue)
lorem — border: #cc0000
07 / Elevation — lorem ipsum dolor sit

Depth & Elevation

Level 0: Flat
lorem — lorem ipsum dolor sit amet
Focus State
outline: 2px solid #0064d2
Hover State
background: #e7e7e8(lorem ipsum)
lorem ipsum dolor sit amet consectetur. box-shadow lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit(lorem→lorem→lorem ipsum dolor→lorem)lorem ipsum.
08 / Layout — Surface Variations

lorem ipsum dolor sit

White #ffffff — lorem ipsum
Gray #e7e7e8 — lorem ipsum dolor
Dark #505054 — lorem ipsum dolor
Blue #0064d2 — lorem ipsum / CTA