큐레이션 · 오픈 · 무료

Missive

팀 이메일 협업 도구를 위한 프로페셔널 SaaS 랜딩 페이지입니다.

01

디자인 DNA

이메일과 작업을 관리하기 위한 클린하고 효율적인 팀 콕핏입니다.

02

컬러

밝은 화이트 배경에 다크 텍스트를 사용하고, 주요 작업을 위한 단일의 선명한 블루를 적용합니다.

03

타이포그래피

transitional-serif · humanist-sans

• display48px · 400
• h232px · 400
• body16px · 400
• caption14px · 400

메인 마케팅 헤드라인에는 Tiempos Headline (트랜지셔널 세리프)을 사용합니다. · 본문 텍스트, 내비게이션, UI 요소에는 Inter (휴머니스트산스세리프)를 사용합니다. · 본문 텍스트의 웨이트는 400으로, 내비게이션 링크는 500으로 유지하여 명확한 계층을 구현합니다.

04

여백

일관된 간격을 위해 8과 16의 배수를 사용하는, 표준 4px 기본 단위를 적용합니다.

05

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

미세한 구분선 및 입력 필드에 사용되는 1px solid #E4E6E9를 적용합니다.

rgba(0, 0, 0, 0.1) 0px 0px 32px 0px

06

레이아웃

표준 상단 내비게이션 바와 화이트/그레이 섹션을 교차 배치한, 중앙 정렬된 콘텐츠 레이아웃입니다.

07

모션과 인터랙션

모든 인터랙티브 요소에 미묘한 트랜지션(0.3s opacity 또는 transform)을 적용합니다.

버튼과 링크에 opacity 또는 색상 변경 효과를 적용합니다. · 인터랙티브 요소에 즉각적인 시각적 피드백을 제공합니다.

08

컴포넌트

• button 흰색 텍스트를 사용한 둥근 모서리의 블루(#2266ED) 기본 버튼과, 화이트 배경의 다크 텍스트를 사용한 보조 버튼입니다.
• card UI 목업 및 기능 섹션을 위한, 미세한 그림자 또는 테두리가 적용된 클린한 화이트 카드입니다.
• chip 애플리케이션 인터페이스 내 카테고리 또는 상태를 표시하기 위한 작은 둥근 모서리 태그입니다.
• input 라이트 그레이 테두리와 미세한 둥근 모서리가 적용된 표준 입력 필드입니다.
• hero 크고 중앙 정렬된 세리프 폰트 헤드라인, 그리고 산스세리프 본문 텍스트와 기본/보조 CTA가 이어지는 구조입니다.

09

보이스와 금지 목록

• 톤 프로페셔널하고, 유용하며, 직접적입니다.
• 헤드라인 세리프 폰트, 큰 크기, 명확한 혜택과 가치 제안에 중점을 둡니다.
• CTA 행동을 유도하는(무료로 시작하기, 데모 시청, 회원가입) 명확하고 간결한 언어를 사용합니다.

• 다채로운 그라데이션을 사용하지 마세요 — 스크린샷에는 클린한 화이트/그레이 배경만 나타납니다.
• 무겁고 어두운 그림자를 사용하지 마세요 — 스크린샷에는 rgba(0,0,0,0.1) 0px 0px 32px와 같은 미묘하고 부드러운 그림자만 나타납니다.
• 큰 섹션에 전체 대문자를 사용하지 마세요 — 스크린샷에는 표준 문장 대소문자 또는 제목 대소문자만 나타납니다.
• 본문 텍스트에 과도하게 장식적인 폰트를 사용하지 마세요 — 스크린샷에는 클린하고 읽기 쉬운 산스세리프(Inter)만 나타납니다.
• 모든 곳에 과하고 대비가 강한 포인트 컬러를 사용하지 마세요 — 스크린샷에서는 선명한 블루를 기본 버튼과 링크에만 제한적으로 사용합니다.
• 복잡하고 지저분한 레이아웃을 사용하지 마세요 — 스크린샷에는 넉넉한 여백과 명확한 시각적 계층이 나타납니다.
• 피하기: 비속어
• 피하기: 지나치게 캐주얼한 언어
• 피하기: 전문 용어가 과도하게 포함된 설명

10

팩 안의 실제 스크린샷

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

11

System Prompt

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