큐레이션 · 오픈 · 무료

Mixpanel

현대적인 엔지니어링 및 성장 팀을 위한 선제적 AI 기반 제품 분석 플랫폼.

01

디자인 DNA

제품 팀을 위한 정교하고 데이터 중심의 지휘 센터입니다.

02

컬러

화이트 배경 위의 깔끔하고 고대비의 타이포그래피와 생동감 있는 보라색 강조 그라디언트를 사용합니다.

03

타이포그래피

geometric-sans · humanist-sans · monospace

• display60px · 500
• heading36px · 500
• subheading18px · 400
• body16px · 400

헤드라인은 좁은 자간과 500 웨이트를 사용합니다. · 본문 텍스트는 높은 가독성의 humanist-sans-serif에 의존합니다. · 모노스페이스는 코드 스니펫에만 엄격히 사용합니다.

04

여백

섹션 간 넉넉한 여백을 두어 8px 기반 그리드를 적용했습니다.

05

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

카드 및 입력 필드에는 1px solid rgba(0,0,0,0.1) 테두리를 적용합니다.

rgba(0,0,0,0.05) 0px 0px 0px 1px · rgba(0,0,0,0.08) 0px 4px 16px 0px · rgba(0,0,0,0.12) 0px 8px 32px 0px

06

레이아웃

최대 너비의 중앙 정렬 컨테이너에 섹션이 쌓이고, 그리드 기반의 기능 레이아웃을 적용합니다.

07

모션과 인터랙션

인터랙티브 요소의 부드러운 hover 전환. · 모달 및 드로어 등장 시 미세한 페이드인 애니메이션.

상호작용을 나타내기 위한 미세한 색상 변화 또는 배경 변경. · 상태 변경 또는 작은 스케일 애니메이션을 통한 즉각적 피드백.

08

컴포넌트

• button 알약 형태(999px 반경)의 솔리드 주요 버튼과 화이트 배경의 고대비 잉크를 사용합니다. 보조 액션에는 고스트 버튼을 사용합니다.
• card 미세한 1px 테두리, 12px 모서리 반경, 16px-24px 패딩을 적용한 밝은 배경의 카드입니다.
• chip 카테고리화 및 필터링을 위한 작은 둥근 16px 반경 태그입니다.
• input 8px 모서리 반경과 명확한 focus 상태를 가진 깔끔한 테두리의 입력 필드입니다.
• hero 중앙 정렬된 대형 기하학적 타입의 헤드라인, 보조 설명 텍스트, 그리고 수평형 기능 토글 모음입니다.

09

보이스와 금지 목록

• 톤 자신감 있고 전문적이며, 약간의 비전을 제시하는 어조입니다.
• 헤드라인 속도, 데이터, 지능을 강조하는 직접적이고 능동적인 문장.
• CTA 행동 지향적이고 명확합니다 (예: '무료로 시작하기', '데모 예약하기').

• 장난스럽거나 둥근 디스플레이 폰트를 사용하지 마세요 — 스크린샷은 기하학적이고 중간 웨이트의 sans-serif 헤드라인을 보여줍니다.
• 네온 또는 과도하게 채도 높은 색상을 사용하지 마세요 — 스크린샷은 세련된 보라색 강조와 중성적인 어두운 팔레트의 조합을 보여줍니다.
• 카드에 두꺼운 테두리를 사용하지 마세요 — 스크린샷은 부드러운 그림자와 미세한 1px 테두리를 보여줍니다.
• 밀도 높고 비좁은 레이아웃을 사용하지 마세요 — 스크린샷은 넉넉한 여백과 명확한 수직 리듬을 보여줍니다.
• 강조를 위해 이탤릭체 텍스트를 사용하지 마세요 — 스크린샷은 대신 웨이트 변화(500 vs 400)를 보여줍니다.
• 버튼에 둥근 사각형을 사용하지 마세요 — 스크린샷은 엄격히 알약 형태(999px 반경)의 주요 CTA를 보여줍니다.
• 피하기: 전문 용어가 과도한 문장
• 피하기: 수동태
• 피하기: 지나치게 장난스러운 표현

10

팩 안의 실제 스크린샷

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

11

System Prompt

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