01 — HERO

NIGHT_CITY // 2077

JACK IN.
WAKE UP.

네온 마젠타 + 시안 + vaporwave grid 호라이즌. 인디 게임, 일렉트로닉 뮤직, 이스포츠, NFT/Web3 톤이에요. 다크가 메인, 라이트는 synthwave bright 버전.

02 — TYPOGRAPHY

DISPLAY_XL

DISPLAY XL

DISPLAY

Display Default

TITLE_LG

Title LG

TITLE

Title default

BODY

Body 1rem regular. The quick brown fox jumps over the lazy dog.

MONO

$ ./jack_in --target=netrunner.shard
03 — BUTTONS

모든 버튼은 네온 outline + hover 시 fill + glow. Magenta(primary) + Cyan(default) 듀얼.

04 — FORM

USER_ID

PAYLOAD

UPLOAD · 72%

05 — TAGS
DEFAULT ACCENT ONLINE UNSTABLE CRITICAL INVERTED
06 — CARDS

DEFAULT

Neon edge.

상단 magenta→cyan 스트라이프 + 1px 보더 — Cyberpunk 시그니처.

DECRYPT →

ACCENT

Full gradient.

Magenta → Purple → Cyan 그라데이션 — 강조 카드.

DECRYPT →

INVERTED

Reverse field.

반전 surface — text/bg 스왑.

DECRYPT →
07 — STATS

XP

12,489

↑ 18% this week

STREAK

42d

PERSONAL_BEST

PING

12ms

↓ 4ms YESTERDAY

08 — ARTICLE

TRANSMISSION · 042

The future is electric.

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

참고: Wikipedia — Synthwave

09 — SIGNATURE

Cyberpunk 시그니처: RGB chromatic aberration + neon outline + vaporwave grid 배경.

CHROMATIC

RGB split

text-shadow: 2px 0 magenta, -2px 0 cyan — CRT 시대 RGB 분리 효과.

NEON_GLOW

box-shadow blur

box-shadow: 0 0 16px var(--neon) — 모든 인터랙티브 요소에 글로우.

GRID_BG

Vaporwave horizon

repeating-linear-gradient 40px 그리드 + radial glow at bottom.

이 디자인, 내 프로젝트에 바로 쓸 수 있어요

크리에이터OS가 있으면 말 한마디로, 없어도 2단계면 즉시 적용돼요.

Creator OS 사용 중이라면

에이전트에게 말 한마디면 끝

테마 선택·CSS 세팅까지 자동이에요. 코드 한 줄 안 봐도 돼요.

"Cyberpunk 스타일로 게임 랜딩 만들어줘"
Creator OS 시작하기 →
직접 적용하고 싶다면

2단계로 즉시 적용

① <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">