큐레이션 · 오픈 · 무료

Spark

AI 기반 명확성과 플랫폼 일관성에 초점을 맞춘 현대적인 이메일 클라이언트입니다.

productivityemail
Spark 스크린샷
↓ 디자인 시스템 다운로드 (36 MB)OpenDesign 에서 열기

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

📦 팩 내용 보기 →

01

디자인 DNA

집중생산성스마트AI크로스 플랫폼

지저분한 책상을 하나의 집중된 작업 공간으로 정리한 상태.

02

컬러

#205EFFAccent
#111111Ink
#333333Ink soft
#FBFBFDBG
#F5F5F7BG soft
#F8F8FABG quiet
#6E6E6EMuted
rgba(175,175,175,1.0)Line

깨끗하고 공기 같은 화이트에 단일한 생생한 블루 액션 컬러와 고대비 텍스트를 사용합니다.

03

타이포그래피

humanist-sans · system-sans

강조를 위한 타이트한 자간의 볼드 디스플레이 타이포그래피 · 최대 가독성을 위한 레귤러 두께 본문 텍스트 · 시스템 대체 폰트를 갖춘 기하학적 휴머니스틱 주 폰트

04

여백

4px
8px
12px
16px
24px
32px
40px
64px

8px 기본 단위와 충분한 섹션 패딩

05

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

sm · 6px
md · 16px
lg · 24px
pill · 999px

1px solid rgba(175,175,175,0.25)

0px 20px 40px 0px rgba(34,41,69,0.12) · 0px 7px 30px 0px rgba(160,165,209,0.2)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

충분한 여백의 표준 12단계 중앙 정렬 그리드

07

모션과 인터랙션

200msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

hover 시 부드러운 색상 전환 (0.3초) · 상태 변화를 위한 불투명도 페이드 · 인터랙티브 카드의 미세한 부양 효과

0.3초 전환으로 부드러운 배경색 채우기, 모킹의 약간의 스케일 변화 · 즉각적인 색상 전환과 미세한 그림자 감소

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

Spark는 현대 전문가들을 위한 스마트하고 집중적인 솔루션으로 자리매김한 생산성 중심 이메일 클라이언트입니다. 디자인 DNA는 주된 화이트(#FBFBFD) 배경과 주요 액션을 위한 단일 고채도 블루 악센트(#205EFF)로 구성된 깨끗하고 공기 같은 미학을 특징으로 합니다. 타이포그래피는 타이트한 자간(-1.5px)과 두께 800을 가진 휴머니스틱 산세리프(Sofia-Pro)를 디스플레이 헤드라인에 사용하며, 본문 텍스트에는 시스템 폰트를 사용합니다. 레이아웃은 넓은 여백(64px 패딩)과 부드러운 둥근 모서리(16-24px 반경)를 활용합니다. 핵심 주의사항: 주 인터페이스로 다크 모드를 결코 도입하지 말고, 디스플레이 타입에 세리프 폰트를 결코 사용하지 말며, 여러 경쟁적인 악센트 색상으로 컬러 시스템을 결코 분산시키지 마세요.

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

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

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

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