← OpenDesign
큐레이션 · 오픈 · 무료
Mem
개인 AI 기반 메모 애플리케이션을 위한 깨끗하고 따뜻하며 지능적인 SaaS 랜딩 페이지입니다.
productivity notes
01
디자인 DNA
AI 우선 지식 관리 미니멀리즘 따뜻한 친근한
당신의 필요를 예측하는 우아하고 따뜻한 디지털 노트입니다.
02
컬러
#100F31Ink
#FCF8F1BG
#707070Muted
rgba(16, 15, 49, 0.15)Line
따뜻한 오프화이트 배경과 깊은 네이비 타이포그래피의 조합으로 차분하고 읽기 좋은 경험을 제공합니다.
03
타이포그래피
humanist-sans · monospace
display 80px · 400heading 32px · 400body 16px · 400
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
4px 기본 단위와 넉넉한 padding으로 설정된 일관된 수직 리듬입니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 60px
pill · 100px
주요 인터랙티브 요소에 1px solid #100F31 테두리
none
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
비대칭 히어로 레이아웃을 가진 중앙 정렬 컨테이너입니다.
07
모션과 인터랙션
220ms micro
400ms small
800ms medium
cubic-bezier(0.25, 0.1, 0.25, 1) easing
부드러운 전환 효과
hover 시 미묘한 불투명도 또는 색상 변화. · 즉각적인 시각적 피드백.
08
컴포넌트
button 100px border-radius와 다크 네이비 테두리를 가진 알약 모양 아웃라인 버튼입니다. card 부드러운 그림자가 있는 원형 이미지 컨테이너로 암시됩니다. chip 해당 없음 input 둥근 모서리와 오렌지 focus ring을 가진 검색바입니다. hero 왼쪽의 큰 타이포그래피와 오른쪽의 겹쳐진 원형 요소로 구성된 분할 레이아웃입니다.
09
보이스와 금지 목록
톤 유용하고 친근하며 자신감 있는 어조. 헤드라인 직접적이고 혜택을 강조하는 스타일 (예: 'All in one place for everything on your mind'). CTA 'Mem 다운로드'나 '영상 보기'와 같이 명확한 행동 지향적 라벨. 흰색 배경을 사용하지 마세요 — 스크린샷은 따뜻한 크림(#FCF8F1) 배경을 보여줍니다. 버튼에 밝은 기본 블루를 사용하지 마세요 — 스크린샷은 네이비 테두리의 아웃라인 버튼을 보여줍니다. 헤드라인에 무거운 고딕체를 사용하지 마세요 — 스크린샷은 가벼운 두께의 humanist-sans를 사용합니다. 컨테이너에 날카로운 모서리를 사용하지 마세요 — 스크린샷은 알약 모양 버튼과 원형 이미지 요소를 보여줍니다. primary 인터페이스로 다크 모드를 사용하지 마세요 — 스크린샷은 명확히 라이트 테마를 보여줍니다. 긴 헤드라인에 중앙 정렬 텍스트를 사용하지 마세요 — 스크린샷은 왼쪽 정렬 히어로 텍스트를 보여줍니다. 피하기: 지나치게 전문적인 용어 피하기: 공격적인 영업 언어 피하기: 복잡한 비유
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(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
Mem은 개인 지식 관리를 위한 깨끗하고 따뜻하며 AI 중심의 SaaS 애플리케이션입니다. 차분하고 읽기 좋은 경험을 위해 따뜻한 크림 배경(#FCF8F1)과 깊은 네이비(#100F31) 타이포그래피를 사용합니다. humanist-sans 폰트 계열과 넉넉한 간격, 알약 모양 UI 컴포넌트에 기반한 디자인입니다. 핵심 디자인 규칙: 흰색 배경 회피, 강렬한 기본 블루 버튼 회피, 중앙 정렬 대신 왼쪽 정렬 및 혜택 중심 헤드라인 사용. 전체적인 미학은 미니멀리즘, 친근함, 그리고 명확성과 사용 편의성에 중점을 둡니다.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 사이트는 AI를 핵심 가치 제안으로 활용하는, 깨끗하고 따뜻하며 친근한 SaaS 랜딩 페이지의 훌륭한 예시입니다.