← OpenDesign
큐레이션 · 오픈 · 무료
Getdooapp
깔끔한 타이포그래피와 고delivr 디바이스 목업을 통해 전달되는, 더 나은 습관을 만들기 위한 미니멀 알림 앱입니다.
Productivity App UI Clean Calm Product
01
디자인 DNA
생산성 알림 단순함 카드 습관
일상 업무를 위한 차분하고 체계적인 디지털 노트북입니다.
02
컬러
#5550CAAccent
#383938Ink
#6E6D7AInk soft
#FFFFFFBG
#F7F7F7BG soft
#E7EFF5BG quiet
rgba(110,109,122,1.0)Line
깔끔한 화이트 배경에 딥 바이올렛 악센트와 무드 있는 슬레이트 텍스트.
03
타이포그래피
humanist-sans
display 65px · 400heading 39px · 400body 16px · 400제목에 네거티브 자간을 사용하여 타이트하고 현대적인 느낌을 줍니다. · 가볍고 통기 좋은 외관을 유지하기 위해 400 웨이트를 일관되게 유지합니다. · 제목과 본문 사이에 충분한 수직 여백을 확보합니다.
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
주요 섹션 사이에 넓은 패딩 블록(130px)을 사용하는 여유로운 수직 간격입니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 30px
pill · 39px
섹션 구분을 위한 섬세한 상단 테두리(1px solid #6E6D7A).
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
여유로운 마진과 고화질 디바이스 목업을 사용하는 단일 열 중앙 정렬 레이아웃.
07
모션과 인터랙션
200ms micro
250ms small
1000ms medium
ease-in-out easing
인터랙티브 요소의 불투명도 및 변환 트랜지션. · 내비게이션 링크의 hover 상태에 대한 부드러운 트랜지션.
링크와 버튼의 섬세한 불투명도 또는 색상 트랜지션. · 표준 포인터 커서 외의 최소한의 시각적 피드백.
08
컴포넌트
button 흰색 텍스트와 그림자 없는 둥근 모양의 솔리드 퍼플(#5550CA) 버튼입니다. card 명시적으로 컴포넌트로 사용되지 않으며, 콘텐츠는 디바이스 목업에 의존합니다. chip 존재하지 않습니다. input 앱 목업 내의 미니멀 검색 입력 필드입니다. hero 단일 CTA와 그 아래 큰 디바이스 쇼케이스가 있는 중앙 정렬 텍스트 히어로입니다.
09
보이스와 금지 목록
톤 격려하는, 도움이 되는, 약간 캐주얼한 어조. 헤드라인 짧고 직접적이며 이점을 강조하는 문구. CTA '다운로드'와 같은 단순하고 행동을 유도하는 동사. 버튼에 무거운 드롭 섀도우를 사용하지 마십시오 — 스크린샷은 플랫하고 솔리드한 둥근 버튼을 보여줍니다. 본문에 전체 대문자를 사용하지 마십시오 — 스크린샷은 기능과 내비게이션에 문장 대소문자를 사용합니다. 주요 인터페이스에 어두운 배경을 사용하지 마십시오 — 스크린샷은 깨끗한 화이트(#FFFFFF) 배경을 보여줍니다. 고대비 흑색 텍스트를 사용하지 마십시오 — 스크린샷은 주요 텍스트에 더 부드러운 다크 그레이(#383938)를 사용합니다. 콘텐츠 표시에 복잡한 그리드를 사용하지 마십시오 — 스크린샷은 단순한 단일 열 중앙 정렬 레이아웃을 보여줍니다. 다양한 색상을 사용하지 마십시오 — 스크린샷은 팔레트를 화이트, 그레이, 그리고 단일 바이올렛 악센트로 제한합니다. 피하기: 지나치게 기술적인 전문 용어를 피할 것. 피하기: 공격적이거나 과장된 마케팅 언어를 피할 것. 피하기: 여러 CTA가 경쟁하는 복잡한 레이아웃을 피할 것.
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 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
이것은 미니멀 생산성 앱 랜딩 페이지입니다. 주요 배경은 텍스트가 소프트 다크 그레이(#383938)이고 CTA 버튼에 단일 딥 바이올렛(#5550CA) 악센트가 사용된 순백(#FFFFFF)입니다. 타이포그래피는 humanist-sans 카테고리(Avenir Next/Nunito Sans)로 가벼운 웨이트와 제목에 네거티브 자간을 사용합니다. 주요 디자인 규칙에는: 둥근 모양 버튼 사용, 여유로운 수직 여백 유지, 시각적 관심을 위해 고delivr 디바이스 목업에 의존하기가 포함됩니다. 다크 모드, 무거운 섀도우 또는 복잡한 레이아웃은 사용하지 마십시오. 인터페이스를 가볍고 차분하게 유지하며, 알림을 통한 습관 구축이라는 제품의 핵심 가치 제안에 집중하십시오.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 여백과 명확한 타이포그래피를 우선시하여 차분하고 체계적인 브랜드 아이덴티티를 전달하는, 깔끔하고 현대적인 제품 랜딩 페이지 디자인의 교과서적인 예시입니다.