Design System Preview
ABEMA — lorem ipsum

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

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
ABEMA Green
#00b900
lorem ipsum dolor / CTA
ABEMA Pink
#ff0077
lorem ipsum / lorem ipsum
Text
Text Primary
#ffffff
lorem ipsum dolor
Text Secondary
rgba(255,255,255,0.7)
lorem ipsum dolor
Text Disabled
rgba(255,255,255,0.38)
lorem ipsum
Placeholder
rgba(255,255,255,0.5)
lorem ipsum dolor
Semantic
Success
#00b900
lorem / lorem
Danger
#e53935
lorem / LIVE
Warning
#ff9800
lorem / lorem
Surface & Border
Background
#000000
lorem ipsum(lorem)
Surface
#1a1a1a
lorem / lorem
Elevated
#212121
lorem / lorem ipsum
Hover
#2a2a2a
lorem ipsum
Border Default
rgba(255,255,255,0.12)
lorem ipsum dolor
Border Strong
rgba(255,255,255,0.3)
lorem ipsum dolor
02 / Typography -- lorem

lorem ipsum dolor sit

lorem ipsum, lorem, lorem — Display (24px)
24px / 700 / line-height: 36px (1.5) / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem / lorem — Heading 1 (22px)
22px / 700 / line-height: 22px (1.0) / letter-spacing: normal / palt: loremlorem ipsum dolor
lorem ipsum dolor — Heading 2 (18px)
18px / 700 / line-height: 24px (1.33) / letter-spacing: normal / palt: lorem
lorem ipsum dolor — Heading 3 (16px)
16px / 700 / line-height: 20px (1.25) / letter-spacing: normal / palt: lorem
lorem ipsum dolor — lorem ipsum dolor sit UI. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. line-height: 1.5 lorem ipsum dolor sit amet consectetur.
14px / 400 / line-height: 21px (1.5) / letter-spacing: normal / palt: loremlorem
lorem ipsum dolor sit — Body Bold (14px/700)
14px / 700 / line-height: 18.2px (1.3) / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor / lorem ipsum — Caption (12px)
12px / 400 / line-height: 16px (1.33) / color: Text Secondary
lorem ipsum / lorem ipsum dolor — Small (10px)
10px / 400 / line-height: 14px (1.4)
03 / Content -- lorem ipsum dolor

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur

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

lorem / lorem

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

04 / Program Table -- lorem ipsum dolor

lorem

loremloremlorem ipsumlorem
19:00 - 20:00ABEMA lorem ipsumlorem ipsumLIVE
20:00 - 21:00lorem ipsum dolor sit amet Season 5lorem ipsumlorem
21:00 - 21:30lorem ipsum lorem 2 lorem #08loremlorem
21:30 - 22:00lorem ipsum lorem / lorem #04loremlorem
22:00 - 23:00lorem ipsum dolor loremlorem ipsumlorem
05 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary (Green)
lorem ipsum
Premium (Pink)
lorem ipsum
Outline
lorem ipsum
Danger
Ghost
06 / Cards -- lorem ipsum dolor

lorem ipsum dolor sit

16:9 lorem ipsum
NEW

ABEMA lorem ipsum dolor lorem ipsum dolor sit

lorem ipsum dolor sit ABEMA lorem ipsum dolor sit amet. lorem ipsum dolor sit amet.

16:9 lorem ipsum
PREMIUM

lorem ipsum dolor sit amet consectetur TOP10

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

16:9 lorem ipsum
LIVE

lorem ipsum dolor lorem ipsum dolor

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

07 / Forms

lorem ipsum dolor

lorem ipsum -- border: rgba(255,255,255,0.12), radius: 4px
lorem ipsum -- border: #00b900 (ABEMA Green)
lorem -- border: #e53935 (Danger)
08 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
Elevation 1
lorem ipsum dolor / lorem ipsum dolor
Elevation 2
lorem ipsum / lorem ipsum
Elevation 3
lorem ipsum dolor sit
Focus Ring
#00b900 (ABEMA Green)
09 / Spacing

lorem ipsum dolor sit

4px
XS
8px
S
16px
M
24px
L
32px
XL
48px
XXL
10 / Layout

lorem ipsum dolor

Max Container 1280px
Main Content 960px
Content Area 640px