← OpenDesign
큐레이션 · 오픈 · 무료
Spark
AI 기반 명확성과 플랫폼 일관성에 초점을 맞춘 현대적인 이메일 클라이언트입니다.
productivity email
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
display 56px · 800headline 32px · 700body 20px · 400small 14px · 400강조를 위한 타이트한 자간의 볼드 디스플레이 타이포그래피 · 최대 가독성을 위한 레귤러 두께 본문 텍스트 · 시스템 대체 폰트를 갖춘 기하학적 휴머니스틱 주 폰트
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
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
충분한 여백의 표준 12단계 중앙 정렬 그리드
07
모션과 인터랙션
200ms micro
300ms small
600ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
hover 시 부드러운 색상 전환 (0.3초) · 상태 변화를 위한 불투명도 페이드 · 인터랙티브 카드의 미세한 부양 효과
0.3초 전환으로 부드러운 배경색 채우기, 모킹의 약간의 스케일 변화 · 즉각적인 색상 전환과 미세한 그림자 감소
08
컴포넌트
button 필 반경의 고대비 솔리드 주 버튼과 아웃라인된 고스트 보조 버튼 card 화이트 배경 위의 부드러운 둥근 모서리와 미세한 그림자 깊이를 가진 카드 chip 배경 그라디언트가 적용된 필 형태의 상태 배지 (예: AI 태그) input 미세한 내부 그림자가 있는 깔끔한 테두리 입력 필드 hero 왼쪽의 큰 타이포그래피, 오른쪽의 블루 방사형 그라디언트 배경 위에 떠 있는 기기 모킹으로 구성된 분할 레이아웃
09
보이스와 금지 목록
톤 전문적이고 자신감 있으며, 집중 지향적인 어조 헤드라인 마침표로 끝나는 짧고 강렬한 평서문 CTA 고대비 버튼 내의 행동 지향 동사 (구매, 다운로드, 확인) 다크 모드 레이아웃을 사용하지 마세요 — 스크린샷은 주로 밝은 배경(#FBFBFD)을 보여줍니다. 헤드라인에 세리프 타이포그래피를 사용하지 마세요 — 스크린샷은 휴머니스틱 산세리프(Sofia-Pro)를 보여줍니다. 여러 경쟁적인 악센트 색상을 사용하지 마세요 — 스크린샷은 단일 주도 블루(#205EFF)를 보여줍니다. 밀도 높은 정보 구조를 만들지 마세요 — 스크린샷은 넓은 여백과 큰 패딩(64px)을 보여줍니다. 카드에 날카로운 사각 모서리를 사용하지 마세요 — 스크린샷은 둥근 반경(16px~24px)을 보여줍니다. 강조를 위해 얇고 밝은 폰트 두께를 사용하지 마세요 — 스크린샷은 헤드라인에 볼드(800)를 보여줍니다. 피하기: 지나치게 전문적인 용어 피하기: 공격적인 판매 언어 피하기: 시각적 혼잡 피하기: 저대비 텍스트 피하기: 복잡한 중첩 메뉴 피하기: 밀도 높은 텍스트 블록
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
Spark는 현대 전문가들을 위한 스마트하고 집중적인 솔루션으로 자리매김한 생산성 중심 이메일 클라이언트입니다. 디자인 DNA는 주된 화이트(#FBFBFD) 배경과 주요 액션을 위한 단일 고채도 블루 악센트(#205EFF)로 구성된 깨끗하고 공기 같은 미학을 특징으로 합니다. 타이포그래피는 타이트한 자간(-1.5px)과 두께 800을 가진 휴머니스틱 산세리프(Sofia-Pro)를 디스플레이 헤드라인에 사용하며, 본문 텍스트에는 시스템 폰트를 사용합니다. 레이아웃은 넓은 여백(64px 패딩)과 부드러운 둥근 모서리(16-24px 반경)를 활용합니다. 핵심 주의사항: 주 인터페이스로 다크 모드를 결코 도입하지 말고, 디스플레이 타입에 세리프 폰트를 결코 사용하지 말며, 여러 경쟁적인 악센트 색상으로 컬러 시스템을 결코 분산시키지 마세요.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 절제, 명확성, 고품질 기기 모킹을 활용하여 가치를 전달하는 현대적인 SaaS 디자인의 대표적인 예시입니다.