Prowl Design System
UI 작업 시 아래 디자인 시스템을 반드시 참조하여 일관된 스타일을 유지합니다.
1. Base Colors (Liquid Glass 기반 반투명)
macOS vibrancy를 통해 데스크톱이 블러되어 비치는 투명 배경을 사용합니다.
| 용도 |
Tailwind Token |
값 |
| Deep Background |
prowl-bg |
transparent |
| Surface |
prowl-surface |
rgba(255, 255, 255, 0.06) |
| Card |
prowl-card |
rgba(255, 255, 255, 0.04) |
| Border |
prowl-border |
rgba(255, 255, 255, 0.08) |
| Border Hover |
prowl-border-hover |
rgba(255, 255, 255, 0.15) |
2. Accent (골드 / 고양이 눈)
| 용도 |
Tailwind Token |
색상 코드 |
| Primary Accent |
accent |
#f59e0b |
| Accent Hover |
accent-hover |
#fbbf24 |
| Accent Muted |
accent-muted |
#b45309 |
3. 라이트 테마 (폴백)
| 용도 |
Tailwind Token |
색상 코드 |
| Surface Light |
surface-light |
#fafafa |
| Card Light |
card-light |
#ffffff |
4. 효과
| 용도 |
Tailwind Token |
값 |
| Glow Accent |
shadow-glow-accent |
0 0 20px rgba(245, 158, 11, 0.15) |
| Glow Success |
shadow-glow-success |
0 0 10px rgba(34, 197, 94, 0.2) |
| Glow Error |
shadow-glow-error |
0 0 10px rgba(239, 68, 68, 0.2) |
5. Liquid Glass (macOS Vibrancy)
Apple Liquid Glass 트렌드에 맞춘 투명 배경 시스템입니다.
Electron 윈도우 설정
| 속성 |
값 |
설명 |
vibrancy |
"under-window" |
macOS 네이티브 블러로 데스크톱이 비침 |
visualEffectState |
"active" |
비활성 윈도우에서도 투명 효과 유지 |
backgroundColor |
"#00000000" |
투명 배경 |
레이아웃 투명도
| 요소 |
클래스 |
설명 |
html, body |
background: transparent !important |
전체 배경 투명 |
| 루트 컨테이너 |
bg-transparent |
vibrancy가 보이도록 |
| 사이드바 |
bg-white/[0.02] |
극미세 반투명 레이어 |
| 헤더/보더 |
border-white/[0.06] |
반투명 화이트 보더 |
주의사항
- 레이아웃 요소에
backdrop-blur 추가 시 vibrancy 위에 이중 blur가 걸려 어두워짐
- CSS
backdrop-blur는 팝업/플로팅 요소에만 사용 (macOS vibrancy와 분리된 레이어)
- 솔리드 배경(
#0d0d0d 등)은 vibrancy를 완전히 차단하므로 사용 금지
6. 3D 글래스 카드
카드 컴포넌트에 입체감을 부여하는 CSS 3D 효과입니다.
클래스: .glass-card-3d
/* 기본 상태 */
transform: perspective(800px) rotateX(1deg);
box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.06) inset;
/* hover 상태 */
transform: perspective(800px) rotateX(0deg) translateY(-2px);
box-shadow: 0 8px 30px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.1) inset;
border-color: rgba(255,255,255,0.12);
적용 패턴
<div class="glass-card-3d rounded-lg bg-prowl-card backdrop-blur-xl border border-white/[0.06]">
카드 내용
</div>
적용 대상
- Settings 섹션: Night Watch, Notifications, Links 카드
- Version History 섹션: 현재 버전 헤더, 각 릴리스 카드
7. 컴포넌트 클래스 (globals.css)
| 클래스 |
용도 |
.glass-card-3d |
3D 입체 글래스 카드 (perspective + hover tilt) |
.job-card |
작업 카드 (hover 시 bg-white/[0.02]) |
.btn-icon |
아이콘 버튼 (hover 시 text-gray-200) |
.btn-primary |
프라이머리 버튼 (bg-blue-500 text-white) |
.btn-ghost |
고스트 버튼 (text-gray-400 → hover text-gray-200) |
.input-field |
인풋/셀렉트 (bg-white/[0.04] backdrop-blur-sm) |
.log-viewer |
터미널 로그 뷰어 (bg-black/40 backdrop-blur-md) |
.toggle-switch |
토글 스위치 (on: bg-green-500) |
.app-header |
헤더 (bg-white/[0.03] backdrop-blur-xl) |
.skeleton |
로딩 스켈레톤 |
.section-title |
섹션 제목 (tracking-wider text-gray-500) |
.empty-state |
빈 상태 안내 |
8. 적용 규칙
- Liquid Glass 우선: 배경은 반투명, macOS vibrancy로 데스크톱이 비침
- 커스텀 토큰 사용: prowl 계열 토큰으로 반투명 색상 통일
- 하드코딩 금지: 색상 값을 직접 입력하지 않고 반드시 Tailwind 토큰 사용
- 반투명 보더:
border-white/[0.06] ~ border-white/[0.08] 범위 사용
- accent 활용: 강조 요소에
accent 계열 사용
- 3D 카드: Settings, Version History 등 카드형 UI에
.glass-card-3d 적용
- backdrop-blur 주의: 팝업/플로팅 요소에만
backdrop-blur-xl 사용, 레이아웃 요소에는 지양
1---2name: design-system-53description: Prowl 앱의 디자인 시스템 (Liquid Glass + 골드 액센트)4---5
6# Prowl Design System
7
8UI 작업 시 아래 디자인 시스템을 반드시 참조하여 일관된 스타일을 유지합니다.
9
10## 1. Base Colors (Liquid Glass 기반 반투명)
11
12macOS vibrancy를 통해 데스크톱이 블러되어 비치는 투명 배경을 사용합니다.
13
14| 용도 | Tailwind Token | 값 |
15|------|---------------|----|
16| Deep Background | `prowl-bg` | `transparent` |
17| Surface | `prowl-surface` | `rgba(255, 255, 255, 0.06)` |
18| Card | `prowl-card` | `rgba(255, 255, 255, 0.04)` |
19| Border | `prowl-border` | `rgba(255, 255, 255, 0.08)` |
20| Border Hover | `prowl-border-hover` | `rgba(255, 255, 255, 0.15)` |
21
22## 2. Accent (골드 / 고양이 눈)
23
24| 용도 | Tailwind Token | 색상 코드 |
25|------|---------------|-----------|
26| Primary Accent | `accent` | `#f59e0b` |
27| Accent Hover | `accent-hover` | `#fbbf24` |
28| Accent Muted | `accent-muted` | `#b45309` |
29
30## 3. 라이트 테마 (폴백)
31
32| 용도 | Tailwind Token | 색상 코드 |
33|------|---------------|-----------|
34| Surface Light | `surface-light` | `#fafafa` |
35| Card Light | `card-light` | `#ffffff` |
36
37## 4. 효과
38
39| 용도 | Tailwind Token | 값 |
40|------|---------------|----|
41| Glow Accent | `shadow-glow-accent` | `0 0 20px rgba(245, 158, 11, 0.15)` |
42| Glow Success | `shadow-glow-success` | `0 0 10px rgba(34, 197, 94, 0.2)` |
43| Glow Error | `shadow-glow-error` | `0 0 10px rgba(239, 68, 68, 0.2)` |
44
45## 5. Liquid Glass (macOS Vibrancy)
46
47Apple Liquid Glass 트렌드에 맞춘 투명 배경 시스템입니다.
48
49### Electron 윈도우 설정
50
51| 속성 | 값 | 설명 |
52|------|-----|------|
53| `vibrancy` | `"under-window"` | macOS 네이티브 블러로 데스크톱이 비침 |
54| `visualEffectState` | `"active"` | 비활성 윈도우에서도 투명 효과 유지 |
55| `backgroundColor` | `"#00000000"` | 투명 배경 |
56
57### 레이아웃 투명도
58
59| 요소 | 클래스 | 설명 |
60|------|--------|------|
61| `html, body` | `background: transparent !important` | 전체 배경 투명 |
62| 루트 컨테이너 | `bg-transparent` | vibrancy가 보이도록 |
63| 사이드바 | `bg-white/[0.02]` | 극미세 반투명 레이어 |
64| 헤더/보더 | `border-white/[0.06]` | 반투명 화이트 보더 |
65
66### 주의사항
67
68- 레이아웃 요소에 `backdrop-blur` 추가 시 vibrancy 위에 이중 blur가 걸려 어두워짐
69- CSS `backdrop-blur`는 **팝업/플로팅 요소**에만 사용 (macOS vibrancy와 분리된 레이어)
70- 솔리드 배경(`#0d0d0d` 등)은 vibrancy를 완전히 차단하므로 사용 금지
71
72## 6. 3D 글래스 카드
73
74카드 컴포넌트에 입체감을 부여하는 CSS 3D 효과입니다.
75
76### 클래스: `.glass-card-3d`
77
78```css
79/* 기본 상태 */
80transform: perspective(800px) rotateX(1deg);
81box-shadow: 0 4px 16px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.06) inset;
82
83/* hover 상태 */
84transform: perspective(800px) rotateX(0deg) translateY(-2px);
85box-shadow: 0 8px 30px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.1) inset;
86border-color: rgba(255,255,255,0.12);
87```
88
89### 적용 패턴
90
91```html
92<div class="glass-card-3d rounded-lg bg-prowl-card backdrop-blur-xl border border-white/[0.06]">
93 카드 내용
94</div>
95```
96
97### 적용 대상
98
99- Settings 섹션: Night Watch, Notifications, Links 카드
100- Version History 섹션: 현재 버전 헤더, 각 릴리스 카드
101
102## 7. 컴포넌트 클래스 (globals.css)
103
104| 클래스 | 용도 |
105|--------|------|
106| `.glass-card-3d` | 3D 입체 글래스 카드 (perspective + hover tilt) |
107| `.job-card` | 작업 카드 (hover 시 `bg-white/[0.02]`) |
108| `.btn-icon` | 아이콘 버튼 (hover 시 `text-gray-200`) |
109| `.btn-primary` | 프라이머리 버튼 (`bg-blue-500 text-white`) |
110| `.btn-ghost` | 고스트 버튼 (`text-gray-400` → hover `text-gray-200`) |
111| `.input-field` | 인풋/셀렉트 (`bg-white/[0.04] backdrop-blur-sm`) |
112| `.log-viewer` | 터미널 로그 뷰어 (`bg-black/40 backdrop-blur-md`) |
113| `.toggle-switch` | 토글 스위치 (on: `bg-green-500`) |
114| `.app-header` | 헤더 (`bg-white/[0.03] backdrop-blur-xl`) |
115| `.skeleton` | 로딩 스켈레톤 |
116| `.section-title` | 섹션 제목 (`tracking-wider text-gray-500`) |
117| `.empty-state` | 빈 상태 안내 |
118
119## 8. 적용 규칙
120
1211. **Liquid Glass 우선**: 배경은 반투명, macOS vibrancy로 데스크톱이 비침
1222. **커스텀 토큰 사용**: prowl 계열 토큰으로 반투명 색상 통일
1233. **하드코딩 금지**: 색상 값을 직접 입력하지 않고 반드시 Tailwind 토큰 사용
1244. **반투명 보더**: `border-white/[0.06]` ~ `border-white/[0.08]` 범위 사용
1255. **accent 활용**: 강조 요소에 `accent` 계열 사용
1266. **3D 카드**: Settings, Version History 등 카드형 UI에 `.glass-card-3d` 적용
1277. **backdrop-blur 주의**: 팝업/플로팅 요소에만 `backdrop-blur-xl` 사용, 레이아웃 요소에는 지양
majiayu000