큐레이션 · 오픈 · 무료

Shortwave

AI 기반 이메일 자동화 및 팀 협업 플랫폼

productivityemail

Shortwave 스크린샷

↓ 디자인 시스템 다운로드 (26 MB)OpenDesign 에서 열기

원본 사이트: https://www.shortwave.com

📦 팩 내용 보기 →

01

디자인 DNA

AI 이메일자동화생산성협업에이전트

팀 구성원처럼 작동하는 지능형 이메일 비서

02

컬러

#356affAccent

#ffffffInk

#a1a1a1Ink soft

#161620BG

#1e1e2eBG soft

#0f0f16BG quiet

#dededeMuted

rgba(53, 106, 255, 1)Line

깊은 네이비 배경에 높은 대비의 흰색 텍스트와 포커스 영역을 위한 선명한 블루 강조 색상을 사용합니다

03

타이포그래피

humanist-sans · monospace

display52px · 600
h234px · 600
body16px · 400
small13px · 400

모든 인터페이스 텍스트에는 humanist-sans를 사용합니다 · 헤드라인은 큰 크기에서 더 촘촘한 자간을 적용합니다 · 본문 텍스트는 일관된 0.2px 자간을 유지합니다

04

여백

4px

8px

16px

24px

32px

48px

64px

72px

80px

96px

프리미엄 느낌을 위한 넉넉한 수직 간격의 8px 기본 단위

05

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

sm · 4px

md · 8px

lg · 12px

xl · 32px

pill · 999px

낮은 불투명도의 1px 실선 테두리 색상

0 4px 24px rgba(0, 0, 0, 0.3)

06

레이아웃

1200container

12columns

24pxgutter

768 / 1024breakpoints

히어로는 중앙 정렬 단일 컬럼, 기능 섹션은 2컬럼

07

모션과 인터랙션

200msmicro

300mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

인터랙티브 요소의 부드러운 색상 트랜지션 · 미묘한 backdrop-filter 블러 효과

0.2s ease-in-out으로 색상 및 배경색 트랜지션 · 즉각적인 시각적 피드백

08

컴포넌트

button 솔리드 강조색 채움 또는 미묘한 테두리가 있는 둥근 필 버튼
card 미묘한 테두리와 둥근 모서리(12-32px)가 있는 다크 카드
chip 테두리 외곽선이 있는 필 모양 태그
input 플레이스홀더 텍스트와 전송 아이콘이 있는 큰 둥근 입력 필드
hero 그라디언트 AI 텍스트, 부제목 및 입력 필드 쇼케이스가 포함된 중앙 정렬 헤드라인

09

보이스와 금지 목록

톤 효율성과 지능을 강조하는, 전문적이면서도 친근한 어조
헤드라인 이점 중심의 진술과 직접적인 행동 동사
CTA '무료로 시작하기'와 같이 명확하고 마찰이 적은 행동 유도

밝은 배경을 사용하지 않습니다 — 스크린샷은 일관된 다크 네이비 테마를 보여줍니다
장식적 세리프 폰트를 사용하지 않습니다 — 스크린샷은 깔끔한 산세리프 타이포그래피를 보여줍니다
따뜻한 색상 팔레트를 사용하지 않습니다 — 스크린샷은 쿨 블루와 그레이만 사용합니다
히어로 섹션에 복잡한 다중 컬럼 레이아웃을 사용하지 않습니다 — 스크린샷은 중앙 정렬된 단일 컬럼 포커스를 보여줍니다
좁고 비좁은 간격을 사용하지 않습니다 — 스크린샷은 넉넉한 패딩과 간격을 보여줍니다
전체적으로 그라디언트 텍스트 효과를 사용하지 않습니다 — 스크린샷은 'AI' 하이라이트에만 그라디언트를 사용합니다
피하기: 전문 용어가 가득한 기술적 언어
피하기: 지나치게 캐주얼하거나 장난스러운 어조
피하기: 공격적인 판매 언어

10

팩 안의 실제 스크린샷

Shortwave — 桌面首屏（hero） — 桌面首屏（hero）

Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Shortwave — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Shortwave — 移动首屏 — 移动首屏

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

11

System Prompt

Shortwave는 AI 기반 이메일 자동화 및 팀 협업 SaaS 플랫폼입니다. 포지셔닝: 지능형 자동화 기능을 갖춘 프리미엄 생산성 도구. 핵심 색상: 깊은 네이비 배경(#161620, #0f0f16), 흰색 텍스트(#ffffff), 그레이 강조(#a1a1a1), 선명한 블루 강조(#356aff). 폰트 카테고리: 모든 인터페이스 요소에 humanist-sans 사용, 주요 타입페이스는 Poppins. 레이아웃: 넉넉한 여백의 중앙 정렬 히어로 섹션과 2컬럼 기능 그리드. 중요 주의사항: 밝은 배경 절대 사용 금지(다크 테마 유지), 장식적 타이포그래피 사용 금지(깔끔한 산세리프 유지), UI 요소를 빽빽하게 배치하지 않음(넉넉한 간격 유지), 따뜻한 색상 사용 금지(쿨 블루 팔레트 유지), 복잡한 애니메이션 사용 금지(미묘한 인터랙션 유지), 인터페이스를 복잡하게 만들지 않음(집중적이고 미니멀한 접근 방식 유지).

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

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

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

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