Design System Previewlorem ipsum dolor / lorem / lorem — lorem ipsum

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

JP: Zen Kaku Gothic New (Google Fonts) ← lorem ipsum dnp-shuei-gothic-gin-std (Adobe Fonts)
EN: DM Sans (Google Fonts) ← lorem ipsum roc-grotesk (Adobe Fonts)

01 / Colors

COLORS

lorem ipsum dolor
Brand Multi-Color
Red 400
#dc0451
lorem ipsum dolor sit
Blue 400
#2860b0
lorem ipsum dolor
Green 400
#5bbbb7
lorem ipsum dolor
Orange 400
#ec801e
lorem ipsum / lorem
Purple 400
#8028ae
lorem ipsum dolor
Sky 400
#43cce9
lorem ipsum dolor
Yellow 400
#fdc82f
lorem ipsum
Gray Scale
Gray 50
#f8f8f8
lorem ipsum dolor
Gray 100
#e0e0e0
lorem ipsum
Gray 300
#a0a0a0
lorem ipsum dolor
Gray 500
#505050
lorem ipsum dolor
Gray 600
#404040
lorem ipsum dolor
Gray 900
#181818
lorem ipsum dolor
02 / Typography — lorem

TYPOGRAPHY

lorem ipsum dolor sit
COMPANY
DM Sans / 80px / 500 / line-height: 1.0 / letter-spacing: 3.2pxh1 EN lorem ipsum dolor
SECTION
DM Sans / 64px / 500 / line-height: 1.0 / letter-spacing: 3.2pxh2 EN lorem ipsum dolor
lorem ipsum dolor
Zen Kaku Gothic New / 40px / 600 / line-height: 1.0 / letter-spacing: 2.4pxh2 JP
lorem ipsum — Heading 3
Zen Kaku Gothic New / 22px / 600 / line-height: 1.5 / letter-spacing: 1.1pxh3 JP
lorem ipsum dolor — DeNA lorem, lorem ipsum dolor AI lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing.
Zen Kaku Gothic New / 16px / 400 / line-height: 1.5 / letter-spacing: 0.05emBody
lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet.
Zen Kaku Gothic New / 22px / 600 / line-height: 2.0 / letter-spacing: 0.05emBody Emphasis
lorem ipsum dolor — lorem ipsum
Zen Kaku Gothic New / 14px / 400 / line-height: 2.0 / letter-spacing: 0.05emLink
lorem ipsum dolor — © DeNA Co., Ltd.
Zen Kaku Gothic New / 16px / 400 / line-height: 1.5 / letter-spacing: 0.05emFooter
03 / Article — lorem ipsum dolor

ARTICLE

lorem ipsum dolor

Delight and Impact the World

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

lorem ipsum

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

lorem ipsum dolor sit amet

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

04 / Buttons

BUTTONS

lorem ipsum dolor sit
lorem ipsum
Default (Black)
lorem ipsum dolor
Red Accent
lorem ipsum dolor
Blue Accent
lorem ipsum dolor
Green Accent
lorem ipsum dolor
On Dark
05 / Cards

CARDS

lorem ipsum dolor sit

lorem / lorem ipsum dolor sit

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

lorem ipsum

lorem ipsum dolor

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

lorem ipsum

lorem ipsum / lorem ipsum

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

lorem ipsum
06 / Forms

FORMS

lorem ipsum dolor
lorem ipsum — border: #e0e0e0, radius: 4px
lorem ipsum — border: #dc0451 (Red 400)
lorem — border: #cc0000
07 / Elevation

ELEVATION

Depth & Elevation
Flat (Default)
lorem — lorem ipsum dolor sit amet consectetur
Surface
background: #f8f8f8 — lorem ipsum
Color Block
lorem ipsum dolor sit amet consectetur
Dark Block
#181818 — lorem ipsum / lorem ipsum
08 / Layout

LAYOUT

lorem ipsum dolor
Main Content 1100px
Article 720px
Full Width Sections 100%