---
version: alpha
name: "다크 테크·정밀한 발광"
colors:
  background: "#0b0f14"
  surface: "#131b24"
  text: "#e6edf3"
  muted: "#9aa7b4"
  accent: "#5cc8ff"
  on-accent: "#0b0f14"
  line: "#263442"
typography:
  display: { fontFamily: "Pretendard, JetBrains Mono", fontSize: 30px, fontWeight: 700, lineHeight: 1.3 }
  headline: { fontFamily: "Pretendard, JetBrains Mono", fontSize: 22px, fontWeight: 700, lineHeight: 1.35 }
  body: { fontFamily: "Pretendard", fontSize: 16px, fontWeight: 400, lineHeight: 1.7 }
  label: { fontFamily: "Pretendard", fontSize: 13px, fontWeight: 600, lineHeight: 1.4 }
rounded:
  sm: 6px
  md: 8px
  lg: 10px
spacing:
  unit: 8px
  content-max: 1200px
---

## Overview

짙은 무채색 바탕에 얇은 경계선과 절제된 가장자리 빛을 놓아 정밀한 제품 이미지를 만든다. 단순한 다크 모드 설정과 달리 제품 장면·타이포그래피·광원의 일관된 연출을 포함한다.

## Colors

- background #0b0f14 — 바탕
- surface #131b24 — 표면
- text #e6edf3 — 글자
- muted #9aa7b4 — 흐린 글자
- accent #5cc8ff — 강조
- on-accent #0b0f14 — 강조 위 글자
- line #263442 — 선
- 명암비: 글자/바탕 16.27:1 · 글자/표면 14.69:1 · 흐린 글자/바탕 7.83:1 · 흐린 글자/표면 7.08:1 · 강조 위 글자/강조 10.21:1

## Typography

- display: Pretendard, JetBrains Mono, 30px, 굵기 700
- headline: Pretendard, JetBrains Mono, 22px, 굵기 700
- body: Pretendard, 16px, 굵기 400
- label: Pretendard, 13px, 굵기 600
- 한국어 본문은 낱말 단위로 줄을 바꿉니다(word-break: keep-all).

## Layout

- 기본 간격 단위: 8px
- 본문 최대 폭: 1200px

## Elevation & Depth

- 그림자: 0 0 0 1px #263442, 0 0 24px rgba(92,200,255,.18)
- 표면: 불투명
- 어두운 바탕 위에 가는 선과 약한 빛 번짐으로 층을 나눕니다.

## Shapes

- 모서리: 작은 요소 6px · 중간 8px · 큰 요소 10px
- 선 두께: 1px

## Components

- 주 버튼(Primary (filled) button)
- 카드(Card)
- 입력창(Text field (input))
- 토스트(Toast)
- 부품의 모서리·선·그림자는 Shapes 절과 Elevation & Depth 절의 값을 씁니다. 색은 Colors 절의 역할을 따릅니다.
- 움직임: 값이 바뀔 때 숫자와 선이 짧게 빛나는 반응만 씁니다.

## Do's and Don'ts

Do
- 한국어 본문은 낱말 단위로 줄을 바꿉니다(word-break: keep-all).
- 글자와 바탕의 명암비는 4.5:1 이상으로 합니다.
- 폭 390px 화면에서 가로 스크롤 없이 읽힙니다.
- 모든 조작은 키보드로도 할 수 있고, 초점 표시가 보입니다.
- 움직임 줄이기 설정에서는 움직임 없이 결과만 보여 줍니다.
- 외부 글꼴과 스크립트를 CDN 에서 불러오지 않고 파일로 함께 둡니다. 글꼴은 이용 조건을 확인한 것만 씁니다.
- 예시 데이터에는 예시임을 표시하고, 실제로 제공하지 않는 기능·통계·후기를 넣지 않습니다.
- 실명·연락처·주소 같은 개인정보를 예시에 넣지 않습니다.

Don't
- 빛 번짐을 본문 글자에 넣지 않습니다.
- 이 스타일에서 살펴볼 점: 어두운 회색끼리의 대비와 작은 보조 글자를 확인한다. 중요한 상태를 빛이나 색만으로 전달하지 않는다.