Design System Preview
NTT docomo — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor #cc0033 lorem ipsum dolor sit amet consectetur adipiscing. computed style lorem ipsum dolor.

lorem ipsum
01 / Colors

lorem ipsum dolor

Brand
docomo Red
#cc0033
lorem ipsum / lorem ipsum
Dark Blue
#093475
lorem ipsum dolor sit
Text
Text Primary
#000000
lorem ipsum dolor
Text Content
#272727
lorem / lorem ipsum
Text Card
#333333
lorem ipsum dolor
Text Muted
#b2b2b2
lorem ipsum dolor
Surface & Background
Background
#f3f3f3
lorem ipsum
Surface
#ffffff
lorem / lorem ipsum
Light Red
#fff2f2
lorem ipsum dolor
Badge
#5c5c5c
lorem ipsum dolor
Footer
#272727
lorem ipsum dolor
Border
#d9d9d9
lorem ipsum
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor — Heading 2 (24px)
24px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor
lorem ipsum — Heading 3 (20px)
20px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor sit amet NTT docomo lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur.
14px / 400 / line-height: 1.5 / letter-spacing: normallorem
lorem ipsum dolor sit — Bold Body (14px)
14px / 700 / line-height: 1.5lorem ipsum
lorem ipsum dolor — Nav Label (12px)
12px / 700 / line-height: 1.5lorem ipsum dolor
MENU
Roboto / 11px / 700 / letter-spacing: 0.99pxlorem ipsum
P
Roboto / 10px / 700 / lorem ipsum dolorlorem ipsum dolor
03 / Service — lorem ipsum dolor

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet / lorem

NTT docomo lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum, lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor

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

04 / Buttons

lorem ipsum dolor sit

Login (Red Border)
lorem ipsum / lorem ipsum
Card Link (Shadow)
lorem ipsum dolor lorem ipsum dolor
Pill (15px radius)
Disabled
05 / Cards

lorem ipsum dolor sit

lorem ipsum / lorem ipsum

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

lorem ipsum →

lorem ipsum

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

lorem ipsum →

lorem ipsum dolor

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #d9d9d9, radius: 4px
lorem ipsum — border: #cc0033 (docomo Red)
lorem — border: #cc0000
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem / lorem ipsum dolor
Level 1: Card
2px 2px 8px rgba(0,0,0,0.2)
Level 2: Hover
4px 4px 12px rgba(0,0,0,0.25)
Brand Border
#cc0033 (docomo Red)
08 / Layout

lorem ipsum dolor

Main Content 960px
Article 620px