designpaca/packages/skill/references/presets/dark-instrument.md

# 프리셋: dark-instrument — 계기판처럼 정확한

> 한 문장: **정밀함이 곧 신뢰인 화면.** 어둡되 분위기가 아니라 기능으로 어둡다.

## 언제 고르나

- 개발자 도구, 인프라, 데이터/모니터링, 보안, 금융 트레이딩
- 사용자가 이 화면을 **오래 본다**는 전제가 있을 때
- **쓰지 마라**: 다크가 "멋있어서" 고르는 경우. **다크 기본값은 단일 슬롭 시그니처 1위다.** 이유를 댈 수 없으면 라이트로 가라

### 다크를 정당화하는 이유의 예
- 사용자가 어두운 환경(야간 운영, 스튜디오)에서 본다
- 화면에 밝은 데이터 시각화가 있고 배경이 어두워야 대비가 산다
- 제품 자체(터미널·에디터·모니터링)가 어둡다

## 결정

### 타이포그래피
- 산세를 본문 출발점으로 두고, 정렬이 중요한 수치·ID·코드에는 tabular figure 또는 모노를 검토한다. 모든 수치·ID에 모노가 필수인 것은 아니다.
- 비율 1.200~1.250. 정보 밀도가 높으므로 위계 차이를 작게
- 숫자는 **tabular-nums** 를 켜라 (`font-variant-numeric: tabular-nums`). 수치가 흔들리면 계기판이 아니다

| 슬롯 | 무료 | 한글 |
|---|---|---|
| 본문 | IBM Plex Sans, DM Sans, Switzer | Pretendard / Spoqa Han Sans Neo |
| 수치·코드 | JetBrains Mono, IBM Plex Mono | + Pretendard |

### 색
- 순수 검정/흰색과 근접색을 모두 후보로 두고, 실제 기기·주변광·장시간 읽기에서 대비와 눈부심을 확인한다. `#0d0d0f`~`#14130f`, `#e8e4dc`~`#e6e6e9`는 출발값 예시다.
- 표면 단계를 3개로: `--surface`(가장 어두움) / `--surface-raised` / `--line`
- 강조색은 **밝고 채도 높게, 아주 좁게.** 어두운 배경에서는 작은 면적으로도 충분히 강하다
- 상태색(성공/경고/오류)을 강조색과 구분해서 정의해라. 여기서는 기능이 우선이다

### 간격
- 밀도를 높이되 **정렬을 완벽하게.** 이 프리셋에서 어긋난 1px은 즉시 보인다
- 데이터 영역과 설명 영역의 간격을 명확히 구분
- 4px 그리드를 엄격히

### 재질 (`svg-filters.md`)
- **거의 쓰지 않는다.** 어두운 배경에서 그레인은 노이즈로 보인다
- 쓴다면: 아주 미세한 스캔라인, 또는 강조 요소에만 좁은 글로우(`feGaussianBlur` + `feMerge`)
- 글래스모피즘은 성능 대비 이득이 없다. 내비게이션 바 정도까지

### 모션 (`motion.md`)
- 빠르고 정확하게. `--dur-instant`~`--dur-quick`
- 실시간 데이터의 변화는 **위치 이동이 아니라 색·굵기 변화**로 알린다(레이아웃 시프트 금지)
- 로딩은 스피너보다 스켈레톤. 무엇이 올지 미리 보여준다

## 흔한 실패

1. **배경·텍스트 대비를 기기에서 확인하지 않음** → 순수색과 근접색 모두 조건에 따라 눈부심·번짐·브랜드 인상을 만들 수 있다
2. **네온 보라/파랑 강조** → 슬롭 지문. 어두운 배경일수록 이 함정에 빠지기 쉽다
3. **테마 결정을 설명하지 않음** → 다크 전용일 수 있지만 대상 환경·브랜드·접근성·운영 이유를 기록하고, 지원하는 테마는 역할 토큰과 실제 상태를 완성한다
4. **수치에 가변폭 폰트** → 숫자가 흔들려 읽기 어렵다
5. **대비 미달** → 어두운 배경에서 `--ink-muted` 가 4.5:1 아래로 떨어지기 쉽다. 반드시 측정해라

## 리스크 후보

- 강조색을 데이터에만 쓰고 UI 전체를 무채색으로
- 히어로를 실제 제품 화면(터미널·차트)으로 대체
- 모노스페이스를 본문까지 확장