Design System Preview

lorem ipsum dolor sit
lorem ipsum

“lorem”lorem“lorem ipsum”lorem, lorem ipsum dolor sit

Cygames lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit computed style lorem(2026-05-09 lorem)lorem ipsum, lorem, lorem ipsum dolor, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

View All Titles Company Info
01 / Colors
Color Palette

lorem ipsum dolor

Brand — Monochrome Core
Black
#000000
CTA lorem / lorem ipsum dolor / lorem ipsum dolor
White
#ffffff
lorem ipsum / lorem ipsum dolor sit
Accent
Navy Blue
#27455c
lorem ipsum dolor / lorem ipsum dolor sit
Forest Green
#468254
lorem ipsum dolor / lorem ipsum dolor
Neutral
Dark Charcoal
#3f3e3e
lorem ipsum dolor / lorem ipsum dolor sit
Medium Gray
#cccccc
lorem ipsum / lorem ipsum
Light Gray
#f5f5f5
lorem ipsum dolor(lorem ipsum)
Semantic(lorem ipsum)
Danger
#dc2626
lorem / lorem(lorem)
Success
#468254
lorem / lorem(lorem ipsum dolor sit)
Warning
#d97706
lorem / lorem(lorem)
02 / Typography
Typography

lorem ipsum dolor sit

“lorem”lorem“lorem ipsum”lorem
lorem ipsum dolor sit
60px / 900 / line-height 1.15 / Noto Sans JPpaltHero Display
lorem ipsum dolor sit amet consectetur — Hero Slider
30px / 700 / line-height 1.0 / Noto Sans JPSlider
News — Section H2 (EN)
26.7px / 700 / line-height 1.15 / Inter (Cygames Sans )EN
Cygames lorem ipsum dolor sit — Section H2 (JP)
30.9px / 700 / line-height 1.33 / Noto Sans JPJP H2
Game Titles — Section Label
15px / 700 / Inter (Cygames Sans )Label
lorem ipsum dolor sit amet lorem ipsum — H3 Item Title
20.6px / 700 / Noto Sans JPpaltH3
lorem ipsum dolor sit amet — H3 Sub
16px / 700 / line-height 1.3 / Noto Sans JPSub
lorem ipsum dolor — Cygames lorem“lorem ipsum dolor sit amet consectetur”lorem, lorem / lorem / lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor YakuHanJPs lorem ipsum dolor sit amet, “”lorem()lorem ipsum dolor sit amet.
16px / 400 / line-height 1.75 / Noto Sans JPBody
lorem ipsum — Nav / Link
14px / 700 / Noto Sans JPNav
Copyright © Cygames, Inc. All Rights Reserved. — Small / Caption
12px / 400 / line-height 1.5 / color #3f3e3e
03 / Content
News

lorem ipsum / lorem ipsum dolor

Cygames lorem ipsum, lorem ipsum dolor sit

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

lorem ipsum dolor sit amet consectetur

UI lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur“lorem”lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur.

YakuHanJPs + palt: lorem ipsum“”lorem()lorem ipsum dolor sit, lorem ipsum dolor sit amet font-feature-settings: "palt" lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing elit.

※ lorem ipsum dolor Cygames Sans(lorem ipsum dolor)lorem ipsum dolor Inter lorem ipsum dolor.

Game Title Visual
Console
2026.05.09
lorem ipsum dolor sit amet lorem ipsum lorem ipsum dolor sit amet
Game Title Visual
Mobile
2026.04.28
lorem lorem ipsum dolor sit lorem ipsum“lorem ipsum”lorem
Game Title Visual
Info
2026.04.15
Cygames lorem / lorem ipsum dolor sit amet
Cygames in Numbers
lorem ipsum Cygames
4,000+
lorem ipsum
30+
lorem ipsum dolor sit
2011
lorem
6
lorem
04 / Buttons
Buttons

lorem ipsum dolor sit

On Dark Background
View All Titles
Primary CTA — White / radius 5px
Company Info
Ghost — transparent + white border
On Light Background
lorem ipsum dolor
Primary CTA — Black #000 / radius 5px
lorem ipsum dolor
Primary CTA — Black #000 / radius 5px
Utility
lorem ipsum Cookie lorem ipsum
Cookie Accept — #000 / radius 4px
Category Badges
Console Mobile Info New
05 / Cards
Cards

lorem ipsum dolor sit

News Image
Console
2026.05.01
lorem ipsum dolor sit amet consectetur lorem ipsum dolor sit amet
News Image
Mobile
2026.04.20
Hover lorem: elevation-2 + translateY(-2px)
News Image
New
2026.04.10
CygamesPictures lorem ipsum dolor sit amet
Card: bg #ffffff / radius 10px / shadow 0 2px 8px rgba(0,0,0,0.08) / category badge #468254
06 / Forms
Forms

lorem ipsum dolor

Default — border #cccccc / radius 5px
Focus — border #000000 / shadow 3px
lorem ipsum dolor sit amet consectetur
Error — border #dc2626 / shadow 3px
07 / Elevation
Depth & Elevation

lorem ipsum

Level 0: Flat
lorem — lorem(lorem ipsum dolor sit)
Elevation 1
0 2px 8px rgba(0,0,0,0.08)
Elevation 2
0 8px 24px rgba(0,0,0,0.12)
Elevation 3
0 16px 40px rgba(0,0,0,0.15)
08 / Layout
Spacing & Radius

lorem ipsum dolor & lorem ipsum

Spacing Scale (8px grid)
XS
4px
S
8px
M
16px
L
24px
XL
48px
XXL
80px
Border Radius Scale
Small
4px — Cookie CTA
Medium
5px — CTA / Input
Large
10px — Card
Pill (9999px) not used — Cygames uses subtle 5px rounding