← OpenDesign
큐레이션 · 오픈 · 무료
Amie
일정과 메모를 손쉽게 정리해 주는, 친근한 AI 기반 생산성 앱.
Calendar Consumer Friendly
01
디자인 DNA
생산적인 통합된 깔끔한 지능적인 친근한
복잡한 도구보다는 도움이 되는 친구 같은, 깔끔하고 현대적인 작업 공간.
02
컬러
#11A8FFAccent
#000000Ink
#5C5C5CInk soft
#FFFFFFBG
#A0A0A0Muted
rgba(205, 205, 205, 1)Line
단일한 강렬한 블루 악센트를 사용한 깔끔하고 고대비 팔레트로, 가독성과 프로페셔널하면서도 친근한 느낌을 보장합니다.
03
타이포그래피
humanist-sans
display 40px · 700heading 20px · 600body 16px · 400small 14px · 400
04
여백
4px
8px
12px
16px
20px
24px
28px
32px
48px
64px
96px
여유로운 padding (12px, 20px, 28px)을 사용하여 넓고 산뜻한 느낌을 만드는 기본 4단위 시스템.
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
부드러운 경계를 위해 rgba(205, 205, 205, 1)를 사용한 섬세한 1px solid 테두리.
rgba(0, 0, 0, 0.06) 0px 0px 0px 1px · rgba(0, 0, 0, 0.06) 0px 1px 1px -0.5px · rgba(0, 0, 0, 0.06) 0px 3px 3px -1.5px
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
좁고 가독성 높은 텍스트 칼럼과 사이드바 중심의 제품 UI 레이아웃을 가진, 중앙 정렬된 넓은 컨테이너.
07
모션과 인터랙션
150ms micro
300ms small
600ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
인터랙티브 요소의 color, background-color, border-color에 대한 부드러운 전환.
종종 포인터 커서와 함께 배경색 또는 텍스트 색상의 미묘한 변화. · 일반적인 버튼 누르기 동작.
08
컴포넌트
button 강렬한 블루 배경과 흰색 텍스트를 가진 알약 모양의 기본 버튼; 보조 버튼은 섬세한 테두리가 있는 흰색. card 제품 인터페이스를 소개하는 데 자주 사용되는, 섬세한 그림자와 둥근 모서리가 있는 깔끔하고 흰색 표면. chip 이 뷰에서는 두드러지게 보이지 않습니다. input 이 뷰에서는 두드러지게 보이지 않습니다. hero 강조된 악센트 문구, 두 가지 기본 액션, 그리고 큰 제품 스크린샷이 짝을 이룬 굵고 크기가 과감한 헤드라인.
09
보이스와 금지 목록
톤 친근하고, 자신감 있으며, 직설적이며, 지나치게 기술적인 전문 용어를 피합니다. 헤드라인 굵고 직접적이며, 종종 강조된 악센트 문구를 사용해 주목성을 끕니다. 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
이 사이트는 깔끔하고 친근하며 접근하기 쉬운 디자인을 가진 현대적인 SaaS 생산성 앱입니다. 주요 브랜드 색상은 흰색 배경 위의 강렬한 블루 (#11A8FF)이며, 텍스트는 검정과 회색입니다. 높은 가독성을 위해 깔끔한 휴머니스트산스 타입페이스(Inter)를 사용합니다. 레이아웃은 넓고, 산뜻한 느낌을 만들기 위해 여유로운 padding과 넓은 컨테이너를 사용합니다. 주요 인터랙션은 부드럽고 섬세한 전환을 사용합니다. 주요 지침: 어두운 배경 사용 금지, 장식적 세리프 사용 금지, 복잡한 요소나 여러 밝은 악센트 색상으로 인터페이스를 과도하게 채우지 마세요.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 앱이 친근하고 정교하면서도 실제로 잘 작동하길 원할 때의 참조.