루미너스 다크 벤토

# 루미너스 다크 벤토 — web 디자인 팩

## 이 스타일의 정체성
딥 차콜 배경 위에 비대칭 크기의 벤토 타일이 모듈러로 배열된다. 각 타일은 1px 발광 보더와 미세한 인너 그라디언트로 배경에서 떠 보인다. 큰 피처 타일 안에는 실제 제품 UI 스크린샷이 들어가고(아이콘·일러스트 없이), 자홍-인디고 라디얼 글로우가 타일 뒤에서 은은히 새어 나온다. 마이크로모션이 인터페이스의 속도감을 연출한다. 한눈에 "어두운 캔버스에 빛나는 벤토 그리드의 제품 페이지"로 읽혀야 한다.

## 색
- 배경: `#08080b` (딥 차콜, 거의 검정)
- 표면(타일): `#101015` — 타일 안쪽은 미세한 인너 그라디언트 `linear-gradient(180deg, #16161d 0%, #0e0e12 100%)`
- 텍스트: `#f4f4f6` / 보조 `#a0a0aa` / 미세 `#62626c`
- 발광 보더: `1px solid rgba(255,255,255,0.10)`, 상단 가장자리는 `rgba(255,255,255,0.18)`로 더 밝게 — 빛이 위에서 닿는 느낌
- 강조색 2개: `#c026d3`(자홍) · `#6366f1`(인디고) — 라디얼 글로우와 1차 CTA에만
- 라디얼 글로우: `radial-gradient(circle, rgba(192,38,211,0.22) 0%, rgba(99,102,241,0.14) 40%, transparent 70%)` — 타일 뒤·히어로 상단에 블러 처리된 발광. 면적은 절제, 텍스트 대비를 깨지 않게.
- 본문 텍스트 대비는 WCAG AA(4.5:1) 이상 유지 — `#f4f4f6` on `#101015`는 통과.

## 타이포그래피
- 디스플레이/헤딩/본문: `Inter, "Geist 대체", -apple-system, sans-serif` (Inter = Google Fonts 공개)
- 코드/메트릭 라벨: `Geist Mono 대체로 JetBrains Mono, ui-monospace, monospace`
- H1: `clamp(2.5rem, 5vw, 4.2rem)`, weight 600, letter-spacing `-0.03em`, line-height 1.06
- H2: `clamp(1.5rem, 2.6vw, 2.1rem)`, weight 600, letter-spacing `-0.02em`, line-height 1.18
- 타일 제목: `1.125rem`, weight 600, line-height 1.3
- 본문: `0.9375rem`, weight 400, line-height 1.6, 색 `#a0a0aa`
- 라벨/eyebrow: `0.75rem`, weight 500, letter-spacing `0.06em`, 대문자, 색 `#a0a0aa`
- 디스플레이는 600 웨이트까지만 — 900 블랙 헤드라인은 쓰지 않는다.

## 레이아웃 / 그리드
- 콘텐츠 최대 폭 `1180px`, 좌우 패딩 `24px`
- 벤토 그리드: 6열 베이스. 타일을 `2x2`, `4x2`, `3x1`, `2x1` 등 비대칭 크기로 섞는다 — 모든 타일을 같은 크기로 두지 않는다.
- 타일 간격(gap): `16px`
- 브레이크포인트: `<768px` 1열 스택 / `768–1024px` 2~3열 / `>1024px` 6열 벤토
- 섹션 수직 간격 `96px` (balanced)
- 큰 피처 타일(4x2 이상)에는 제품 UI 스크린샷, 작은 타일에는 메트릭 숫자 또는 짧은 텍스트.

## 형태 / 질감
- radius: 타일 `16px`, 버튼 `10px`, 내부 스크린샷 `8px`
- 보더: `1px solid rgba(255,255,255,0.10)` — 발광 보더. 굵게 하지 않음.
- 그림자: 타일에 `0 1px 0 rgba(255,255,255,0.04) inset`(상단 림 라이트) + `0 8px 24px rgba(0,0,0,0.4)`(부유). 번지는 컬러 글로우 섀도는 금지, 글로우는 별도 라디얼 레이어로.
- 제품 UI 스크린샷: 8px radius, 1px 보더, 듀오톤 없이 실제 다크 UI처럼.
- 아이콘: 1.5px stroke 라인 아이콘, 단색 `#f4f4f6`. 채워진 아이콘·이모지·일러스트 금지.
- 버튼: 1차 CTA는 인디고→자홍 미세 그라디언트 허용(버튼 한정), 그 외는 `#101015` 배경 + 발광 보더.

## 모션
- snappy. 트랜지션 `180ms cubic-bezier(0.16,1,0.3,1)`.
- 호버: 타일 발광 보더가 `rgba(255,255,255,0.10) → rgba(255,255,255,0.22)`로 밝아지고 `translateY(-3px)`. 인너 글로우 살짝 강화.
- 커서 추적: 큰 피처 타일은 커서 위치를 따라 미세 라디얼 하이라이트가 움직인다(`radial-gradient` 위치 갱신).
- 스크롤 진입: 타일이 `opacity 0→1` + `scale(0.98→1)`, 200ms, 행 단위로 40ms씩 stagger.
- `prefers-reduced-motion: reduce` 시 transform·커서 추적 제거, opacity만.

## 하지 말 것
- 모든 벤토 타일을 같은 크기로 두지 말 것 — 비대칭 크기 혼합이 정체성.
- 라디얼 글로우를 페이지 전면에 풀블리드로 깔지 말 것 — 타일 뒤·히어로 상단에 절제해서.
- 번지는 컬러 드롭섀도(보라 글로우 섀도) 금지 — 발광은 1px 보더와 별도 라디얼 레이어로만.
- 둥근 모서리를 과하게(28px+) 키우지 말 것. 보더를 2px+로 굵게 하지 말 것.
- 이모지·정체불명 일러스트·blob 도형·채워진 아이콘 금지.
- 텍스트 대비를 글로우로 깨지 말 것 — 본문은 항상 AA 이상.
- 자홍·인디고를 넓은 텍스트·면에 칠하지 말 것 — 글로우와 1차 CTA에 한정.

## 적용 예
- **히어로**: 딥 차콜 배경, 상단 중앙 뒤로 자홍-인디고 라디얼 글로우. 좌측 정렬 H1 + 보조 텍스트 + 인디고 CTA. 그 아래 첫 벤토 행이 바로 시작 — 큰 피처 타일에 제품 UI 스크린샷.
- **벤토 그리드**: 6열에 `4x2` 피처 타일(스크린샷) + `2x2` 메트릭 타일(큰 숫자 + 라벨) + `2x1` 텍스트 타일을 비대칭으로 조합. 각 타일 1px 발광 보더, 16px radius, 호버 시 보더 밝아지며 들림.
- **푸터**: 배경 그대로 딥 차콜. 발광 보더 1px 상단 분할선. 링크를 등폭 라벨로 정렬, 라디얼 글로우는 쓰지 않음.