큐레이션 · 오픈 · 무료

Raycast

강력하고 AI 네이티브한 명령 팔레트이자 생산성 런처.

ProductivityDark ModeRefinedDeveloper Tools
Raycast 스크린샷
↓ 디자인 시스템 다운로드 (34 MB)OpenDesign 에서 열기

원본 사이트: https://raycast.com

📦 팩 내용 보기 →

01

디자인 DNA

생산성런처속도AI개발자 도구

운영 체제를 위한 고성능 지휘 센터.

02

컬러

#FFFFFFInk
#E6E6E6Ink soft
#0D0D0DBG
#111214BG soft
#1B1C1EBG quiet
#9C9C9DMuted
rgba(255, 255, 255, 0.1)Line

깊은 검은색, 선명한 흰색 텍스트, 그리고 히어로 영역에서 하나의 강렬한 빨간색 악센트를 사용하는 극단적이고 대비가 높은 다크 모드.

03

타이포그래피

humanist-sans · geometric-mono

기술 사양 및 버전 번호에는 GeistMono를 사용합니다. · 대형 디스플레이 텍스트에는 타이트한 자간(-1px)을 유지합니다. · 본문 텍스트는 어두운 배경에서의 가독성을 위해 정상 굵기(400)를 사용합니다.

04

여백

4px
8px
12px
16px
24px
32px
48px
64px
96px

일관된 4px 그리드를 사용하며, 빽빽한 다크 UI의 균형을 맞추기 위해 넉넉한 여백을 우선시합니다.

05

표면 (라운드 / 그림자 / 경계선)

sm · 6px
md · 8px
lg · 12px
pill · 999px

rgba(255, 255, 255, 0.1) 또는 어두운 회색으로 된 섬세한 1px 실선 테두리.

rgba(0, 0, 0, 0.4) 0px 1.5px 0.5px 2.5px · rgb(27, 28, 30) 0px 0px 0px 1px · rgb(7, 8, 10) 0px 0px 0px 1px inset · rgba(255, 255, 255, 0.2) 0px 1px 1px 1px inset · rgba(215, 201, 175, 0.05) 0px 0px 20px 5px

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

전체 너비의 분위기 있는 배경을 가진 중앙 정렬된 히어로 영역 다음에 구조화된 콘텐츠 블록이 배치됩니다.

07

모션과 인터랙션

200msmicro
300mssmall
800msmedium
cubic-bezier(0.23, 1, 0.32, 1)easing

hover 상태를 위한 부드러운 전환(opacity, box-shadow, transform). · 콘텐츠 등장 시의 미세한 페이드 인 효과.

버튼과 인터랙티브 요소는 0.2초 전환을 통해 opacity 또는 box-shadow가 변경됩니다. · 미세한 transform 또는 scale 효과.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Raycast — 桌面首屏（hero）
桌面首屏（hero）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Raycast — 移动首屏
移动首屏

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

Raycast는 빠르고 AI 네이티브한 명령 런처로 자리매김한 프리미엄 개발자 및 생산성 도구입니다. its 비주얼 아이덴티티는 거의 검은색(#0D0D0D)과 순백을 중심으로 한 초다크, 고대비 팔레트 위에 구축되었으며, 계층을 위해 미세한 회색 톤을 사용합니다. 타이포그래피는 UI에 깔끔한 humanist-sans(Inter)를, 기술적 세부 사양에 geometric-mono를 사용합니다. 핵심 디자인 규칙: 여러 악센트를 피하고 색상 사용에 극도의 절제를 유지; 무거운 입체감 대신 섬세한 내부 그림자와 얇은 테두리를 사용; 빽빽한 다크 표면의 균형을 맞추기 위해 넉넉한 여백을 확보. 전반적인 느낌은 세련되고, 강력하며, 성능에 집중되어 있습니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

en · zh-CN · zh-TW · ja · ko