RESEARCH

디자인 비주얼 레퍼런스

컬러 시스템 (프레젠테이션 CSS에서 추출)

토큰HexCompose용도 bg#000000Color(0xFF000000)배경 card#1c1c1eColor(0xFF1C1C1E)카드 text#f5f5f7Color(0xFFF5F5F7)주요 텍스트 muted#86868bColor(0xFF86868B)보조 텍스트 blue#2997ffColor(0xFF2997FF)통신/액센트 green#30d158Color(0xFF30D158)성공/변형 orange#ff9f0aColor(0xFFFF9F0A)경고/트리거 purple#bf5af2Color(0xFFBF5AF2)Orchestrator/융합 red#ff453aColor(0xFFFF453A)위험/오류 teal#64d2ffColor(0xFF64D2FF)Dash 모핑

타이포그래피

Sans: Inter (영문) + Noto Sans KR (한글)
Mono: JetBrains Mono
Display: 80sp/W800, Headline: 56sp/W700, Title: 28sp/W600, Body: 20sp/W400

스페이싱: card-padding 40dp, grid-gap 48dp, item-gap 8/16/24dp

보더 반경: 외부 32dp > 내부 16dp > 요소 12dp > 배지 pill

디자인 원칙

1. 다크 퍼스트 (#000 배경)

2. 글로우 하이라이트 (box-shadow rgba)

3. 그래디언트 텍스트

4. 최소 보더 (1px rgba(255,255,255,0.05))

5. 대형 타이포 (3.5~6rem)

6. 컬러 코딩 (Blue=통신, Green=변형, Purple=융합, Orange=경고)

7. 코너 반경 위계