Design System Preview
CAPCOM (lorem ipsum) — lorem ipsum

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

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Section Colors(lorem ipsum dolor sit)
GAME
lorem ipsum
PRESS
lorem ipsum dolor
IR
lorem ipsum
EVENT
lorem ipsum
Game Blue
#0063a2
lorem ipsum dolor sit
Press Teal
#3a6565
lorem ipsum dolor
IR Purple
#6a458d
IR / lorem ipsum
Event Cyan
#008fa1
lorem ipsum
Text & Links
Text Primary
#333333
lorem ipsum dolor
Text Sub
#555555
lorem ipsum dolor
Link Blue
#0044ab
lorem ipsum dolor
Copyright Gray
#cccccc
lorem ipsum dolor
Surface & Border
Background
#ffffff
lorem ipsum
Light Gray BG
#f4f4f4
lorem ipsum / lorem
Footer Button BG
#f2f2f2
lorem ipsum dolor
Dark BG
#141414
lorem ipsum dolor
Border
#d8d8d8
lorem ipsum dolor
Border Sub
#888888
lorem ipsum dolor
Semantic(lorem ipsum)
Danger
#cc3333
lorem / lorem
Success
#2e8b57
lorem / lorem
Warning
#d4920a
lorem / lorem
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — Game Page Title (h1)
32px / 700 / line-height: normal (~1.4) / letter-spacing: normallorem ipsum dolor
lorem ipsum dolor — Corporate Top h1
14px / 700 / line-height: 1.0 / letter-spacing: normallorem ipsum dolor sit
lorem ipsum — Section Title
14px / 700 / line-height: 1.5 / white on section colorlorem ipsum dolor
lorem ipsum / lorem ipsum dolor — Nav Text
13px / 700 / line-height: 1.5 / letter-spacing: -2pxlorem ipsum dolor
lorem ipsum dolor — Body (14px). lorem ipsum dolor sit amet consectetur. line-height 1.0 lorem ipsum dolor.
14px / 400 / line-height: 1.0 / letter-spacing: normallorem
lorem / lorem ipsum — Subtext Bold
14px / 700 / line-height: normal / color: #555555lorem ipsum dolor
lorem ipsum dolor sit — Banner Caption
13px / 400 / line-height: 1.0 / color: #ffffff on darklorem ipsum dolor sit
lorem ipsum dolor — News Link
12px / 700 / color: #0044ablorem ipsum dolor
© CAPCOM CO., LTD. ALL RIGHTS RESERVED.
14px / 400 / color: #cccccclorem ipsum
03 / Article — lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur

lorem ipsum

lorem ipsum dolor sit amet, lorem ipsum dolor sit 2,000 lorem ipsum

lorem ipsum 2026.06.15 / lorem ipsum dolor

lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing elit 2,000 lorem ipsum dolor sit amet consectetur. lorem ipsum dolor 2004 lorem 1 lorem ipsum, 20 lorem ipsum dolor sit amet consectetur adipiscing elit sed.

lorem ipsum dolor sit

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

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

lorem ipsum dolor
2026.06.15 lorem “lorem ipsum dolor sit”lorem ipsum dolor sit amet consectetur
2026.06.12 IR 2026 lorem 3 lorem lorem ipsum dolor sit amet
2026.06.10 lorem ipsum lorem ipsum dolor 2026 lorem ipsum dolor sit amet
2026.06.08 lorem “lorem ipsum dolor”lorem ipsum dolor sit amet 1 lorem 6,000 lorem ipsum
2026.06.05 lorem “lorem lorem lorem”lorem ipsum dolor sit amet consectetur
04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary (Game Blue)
lorem ipsum dolor
Primary (Press Teal)
IR / lorem ipsum
Primary (IR Purple)
lorem ipsum
Primary (Event Cyan)
lorem ipsum dolor
News Link
border 2px #888 / radius 4px
lorem ipsum dolor
Footer Button
bg #f2f2f2 / height 48px
lorem ipsum dolor
Section Bar
radius 0 / full-width
lorem ipsum
Danger(lorem ipsum)
05 / Cards

lorem ipsum dolor sit

960 x 540
lorem

lorem ipsum dolor sit amet

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

2026.06.15
lorem ipsum
960 x 540
lorem ipsum dolor

2026 lorem 3 lorem lorem ipsum dolor sit

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

2026.06.12
lorem ipsum
960 x 540
lorem ipsum

lorem ipsum dolor 2026 lorem ipsum

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

2026.06.10
lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum — border: 1px solid #d8d8d8, radius: 4px
lorem ipsum — border: 2px solid #0063a2 (Game Blue)
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: 2px solid #cc3333 (Danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor(lorem)
Level 1
0 2px 4px rgba(0,0,0,0.1)
Level 2
0 4px 12px rgba(0,0,0,0.15)
Level 3
0 8px 24px rgba(0,0,0,0.2)
Focus Ring
#0063a2 (Game Blue)
08 / Layout

lorem ipsum dolor & lorem ipsum dolor

Main Container 960px
Article Content 640px
News List 960px
Game Grid (3col) 960px
Spacing Scale（4px grid）
4px
8px
15px
20px
40px
60px
Border Radius
0px
4px