DEFAULT
Neon edge.
상단 magenta→cyan 스트라이프 + 1px 보더 — Cyberpunk 시그니처.
DECRYPT →NIGHT_CITY // 2077
네온 마젠타 + 시안 + vaporwave grid 호라이즌. 인디 게임, 일렉트로닉 뮤직, 이스포츠, NFT/Web3 톤이에요. 다크가 메인, 라이트는 synthwave bright 버전.
DISPLAY_XL
DISPLAY
TITLE_LG
TITLE
BODY
Body 1rem regular. The quick brown fox jumps over the lazy dog.
MONO
$ ./jack_in --target=netrunner.shard모든 버튼은 네온 outline + hover 시 fill + glow. Magenta(primary) + Cyan(default) 듀얼.
USER_ID
PAYLOAD
UPLOAD · 72%
XP
12,489
↑ 18% this week
STREAK
42d
PERSONAL_BEST
PING
12ms
↓ 4ms YESTERDAY
TRANSMISSION · 042
BY V · 2077.05.22 · 4 MIN
Cyberpunk와 Synthwave는 1980년대 Blade Runner와 Miami Vice가 만든 시각 언어가 2010년대 후반 게임·뮤직·NFT 씬에서 부활한 결과예요. Magenta + Cyan 듀얼 네온, horizon grid, vaporwave 미학.
핵심 메커니즘: ① RGB chromatic aberration (text-shadow로 마젠타+시안 분리), ② 네온 outline 버튼 (hover에서 fill + glow), ③ 그리드 호라이즌 배경. 모두 CSS 기본 기능만으로 구현 — JS 의존 없음.
The sky was the color of television, tuned to a dead channel. — Gibson
Cyberpunk 시그니처: RGB chromatic aberration + neon outline + vaporwave grid 배경.
CHROMATIC
text-shadow: 2px 0 magenta, -2px 0 cyan — CRT 시대 RGB 분리 효과.
NEON_GLOW
box-shadow: 0 0 16px var(--neon) — 모든 인터랙티브 요소에 글로우.
GRID_BG
repeating-linear-gradient 40px 그리드 + radial glow at bottom.
크리에이터OS가 있으면 말 한마디로, 없어도 2단계면 즉시 적용돼요.
테마 선택·CSS 세팅까지 자동이에요. 코드 한 줄 안 봐도 돼요.
"Cyberpunk 스타일로 게임 랜딩 만들어줘"Creator OS 시작하기 →
① <head> 에 CSS 2줄
<link rel="stylesheet"
href="https://design-tokens.creator-os.app
/design-tokens.css">
<link rel="stylesheet"
href="https://design-tokens.creator-os.app
/design-components.css">
② <body> 에 테마 (다크 권장)
<body data-theme="cyberpunk-dark">