Design System Preview
CyberAgent

lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt

lorem ipsum dolor CyberAgent Way
01
Colors
Brand
Brand Green
#82be28
lorem / lorem ipsum active
CTA Green
#2d8c3c
CTA lorem ipsum
Accent Blue
#3860be
lorem ipsum dolor sit
Neutral
Black
#000000
lorem ipsum / lorem ipsum
Dark Navy
#27455c
lorem ipsum / lorem
Gray
#878787
lorem ipsum dolor
Border Gray
#d0d0d0
lorem
Surface
#f2f1f1
Background
#f0f0ee
lorem ipsum
White
#ffffff
lorem ipsum
02
Typography
Menu
CA Sans / 27px / 400 / line-height 1.0
lorem ipsum
YuGothic / 18px / 700
lorem ipsum dolor sit amet“21 lorem ipsum dolor sit amet”lorem ipsum dolor, lorem ipsum dolor sit amet, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.
YuGothic / 16px / 400 / line-height 1.8
lorem ipsum
YuGothic / 16px / 400 / line-height 1.6
03
Article

21 lorem ipsum dolor sit amet

lorem ipsum

lorem ipsum dolor sit amet 1998 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor, “ABEMA”lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.

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

04
Buttons
lorem ipsum dolor
Primary
CyberAgent Way
CTA Green
English
Language
Filter Tabs
ALL 1 2 3
05
Cards

ABEMA, W lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur adipiscing elit.

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

lorem AI lorem ipsum dolor sit amet consectetur adipiscing.

Cygames, lorem ipsum dolor sit amet

lorem ipsum dolor sit RPG lorem ipsum dolor sit amet.

06
Forms
Default
Focus
Error
07
Layout
Spacing Scale
8
16
32
64
3-Layer Structure
Hero (Dark)
Content (Warm Gray)
Footer (Navy)