Design System Preview
BANDAI NAMCO Entertainment

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 -apple-system / system-ui(lorem ipsum dolor)lorem Arial(lorem)lorem. lorem ipsum dolor sit Google Fonts lorem Noto Sans JP lorem ipsum dolor sit.
lorem ipsum dolor sit DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
BANDAI NAMCO Red
#d60000
lorem ipsum dolor / lorem ipsum dolor
Link Blue
#024baf
lorem / lorem ipsum dolor
Highlight Yellow
#ffbf00
lorem ipsum / lorem ipsum
Pink Accent
#ffeeee
lorem ipsum dolor sit
Text
Text Primary
#333333
lorem ipsum dolor
Text Secondary
#555555
lorem ipsum dolor
Text White
#ffffff
lorem ipsum dolor / lorem ipsum dolor
Surface & Background
Hero Black
#000000
lorem ipsum / lorem ipsum dolor
Corporate Gray
#f2f2f2
lorem ipsum
Surface White
#ffffff
lorem / lorem ipsum
Dark Section
#444444
lorem ipsum dolor
Border
#6e6e6e
lorem ipsum dolor
Platform Badges
PlayStation
#003791
PS5 / PS4 lorem
Nintendo
#e60012
Switch lorem
Steam
#1b2838
Steam lorem
iOS
#7d3c98
iOS / App Store lorem
Xbox
#107c10
Xbox lorem
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor --- H2 (28px / 700)
28px / 700 / line-height: 1.25 (35px) / color: #333333lorem ipsum
lorem ipsum dolor --- H2 Category (16px / 700)
16px / 700 / line-height: 1.25 / color: #d60000lorem ipsum dolor
lorem ipsum --- H3 (16px / 700)
16px / 700 / line-height: 1.4 (22.4px) / color: #333333
Tab Label (Arial) --- Tab (16px / 700)
Arial, 16px / 700 / color: #333333 (active: #d60000)lorem ipsum
lorem ipsum dolor --- Nav (13px / 700)
13px / 700 / color: #333333lorem ipsum dolor
lorem ipsum dolor --- Body (14px). lorem ipsum dolor sit amet consectetur Web lorem ipsum dolor sit amet. letter-spacing lorem normal, palt lorem ipsum dolor sit. ABCabc 123 PAC-MAN
14px / 400 / line-height: 1.6 (22.4px) / letter-spacing: normal / palt: lorem
lorem ipsum dolor --- A (14px / 400)
14px / 400 / color: #024baf / text-decoration: underlinelorem ipsum dolor
03 / Product

lorem ipsum dolor sit amet consectetur

DB
lorem ipsum dolor Sparking! ZERO
PS5 Xbox Steam
OP
ONE PIECE ODYSSEY
PS5 PS4 Steam
GD
GUNDAM BREAKER 4
PS5 Switch Steam
PM
PAC-MAN MEGA TUNNEL BATTLE
iOS PC
04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Arrow CTA (Red)
radius: 2px / arrow
lorem ipsum
Arrow Button
radius: 2px / border #6e6e6e
lorem ipsum
Tab Active
radius: 0px / Arial / #d60000
RPG
Tab Inactive
radius: 0px / Arial
lorem ipsum dolor
Link
color: #024baf

Arrow Button Spec

Arrow CTA: bg #d60000 / text #ffffff / border-radius 2px / padding 7px 21px 7px 14px / arrow icon
Default: bg #ffffff / text #333333 / border 1px solid #6e6e6e / border-radius 2px
Tab: font-family Arial / radius 0px / padding 12px / active color #d60000

05 / Cards

lorem ipsum dolor sit

NEWS
lorem ipsum

lorem ipsum dolor

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

lorem ipsum →
EVENT
lorem ipsum

lorem ipsum dolor sit amet

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

lorem ipsum →
UPDATE
lorem ipsum dolor

lorem ipsum dolor sit

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum --- border: 1px solid #6e6e6e, radius: 2px
lorem ipsum --- border: 2px solid #d60000 (BANDAI NAMCO Red)
lorem ipsum dolor sit amet consectetur adipiscing
lorem --- border-color: #cc0000
lorem ipsum --- border: 1px solid #6e6e6e, radius: 2px
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem ipsum / lorem
Elevation 1
0px 2px 8px rgba(0,0,0,0.10)
Elevation 2
0px 4px 16px rgba(0,0,0,0.12)
Dark Overlay
rgba(0,0,0,0.7)
Focus Ring
2px solid #d60000
08 / Layout

lorem ipsum

Container Width

Max Width 1200px
Horizontal Padding 48px

Section Backgrounds

#000000
Hero Black
#f2f2f2
Corporate Gray
#ffffff
Surface
#444444
Footer Dark

Border Radius

2px (Arrow CTA)
0px (Tab)
2px (Input)
4px (Game Card)

Platform Badge System

PS5 PS4 Switch Xbox Steam PC iOS

font-size: 10px / font-weight: 700 / padding: 2px 8px / border-radius: 2px / lorem ipsum dolor sit amet consectetur