name: design-system description: Prowl 앱의 디자인 시스템 (Liquid Glass + 골드 액센트) user-invocable: false

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 사용, 레이아웃 요소에는 지양

TopRank Skills

design-system

name: design-system description: Prowl 앱의 디자인 시스템 (Liquid Glass + 골드 액센트) user-invocable: false

Prowl Design System

1. Base Colors (Liquid Glass 기반 반투명)

2. Accent (골드 / 고양이 눈)

3. 라이트 테마 (폴백)

4. 효과