← OpenDesign
큐레이션 · 오픈 · 무료
Things
명확성과 사용 편의성을 강조하는 프리미엄 미니멀 개인 작업 관리자.
productivity app
01
디자인 DNA
미니멀 기능적 명료 프리미엄
차분하고 정돈된 작업 공간.
02
컬러
#4F91FBAccent
#303336Ink
#F2F5F7BG
#55606EMuted
rgba(0, 15, 36, 0.46)Line
부드럽고 중립적인 배경 위에 고대비 텍스트를 배치하고, 기능적인 블루 악센트 하나를 사용합니다.
03
타이포그래피
humanist-sans
display 56px · 800heading 32px · 700body-lg 20px · 400body 16px · 400caption 14px · 400디스플레이 제목은 자간을 좁게 잡은 웨이트 800을 사용합니다. · 본문 텍스트는 최대 가독성을 위해 웨이트 400을 사용합니다. · 링크는 밑줄 없이 블루 악센트 색상을 사용합니다.
04
여백
4px
8px
12px
16px
24px
32px
48px
64px
80px
차분하고 숨 쉬 듯 여백이 있는 레이아웃을 만들기 위한 넉넉한 화이트스페이스
05
표면 (라운드 / 그림자 / 경계선)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(0, 15, 36, 0.1)
0 4px 12px rgba(0, 15, 36, 0.08)
06
레이아웃
1200 container
12 columns
24px gutter
768 / 1024 breakpoints
넓은 마진을 가진 중앙 정렬 싱글 칼럼 레이아웃
07
모션과 인터랙션
200ms micro
300ms small
600ms medium
cubic-bezier(0.25, 0.1, 0.25, 1.0) easing
부드러운 페이드인 · 미묘한 hover 상태 전환
미묘한 색상 변화 또는 불투명도 변경 · 즉각적인 시각적 피드백
08
컴포넌트
button 단단한 블루 배경을 가진 부드럽게 둥근 알약 모양 card 미묘한 테두리와 둥근 모서리를 가진 흰색 배경 chip 미니멀한 둥근 태그 input 미묘한 테두리를 가진 깔끔하고 미니멀한 입력 필드 hero 중앙 정렬 아이콘, 크고 굵은 제목, 설명적인 부제목, 단일 CTA
09
보이스와 금지 목록
톤 전문적이고 도움이 되며 절제된 헤드라인 직설적이고 설명적인 CTA 명확하고 행동 지향적인 다크 모드를 사용하지 마세요 — 스크린샷은 밝은 회색 배경(#F2F5F7)을 보여줍니다. 장식용 세리프 서체를 사용하지 마세요 — 스크린샷은 모든 텍스트에 humanist-sans를 사용합니다. 여러 밝은 악센트 색상을 사용하지 마세요 — 스크린샷은 기능적인 악센트로 블루(#4F91FB) 하나만 사용합니다. 빽빽하고 답답한 간격을 사용하지 마세요 — 스크린샷은 넉넉한 수직 및 수평 마진을 보여줍니다. 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 부드럽고 미묘한 그림자를 보여줍니다. 공격적이고 각진 border-radius를 사용하지 마세요 — 스크린샷은 최대 18px까지 부드럽고 둥근 모서리를 보여줍니다. 피하기: 과도한 구두점 피하기: 대문자 남용 피하기: 지나치게 캐주얼한 표현
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
Things 웹사이트는 부드러운 밝은 회색 배경(#F2F5F7)과 짙은 차콜 텍스트(#303336)를 중심으로 차분하고 미니멀한 디자인을 사용합니다. 링크와 상호작용 요소에는 기능적인 블루 악센트(#4F91FB)가 사용됩니다. 타이포그래피는 humanist-sans-serif 서체로 구성되어 있으며, 메인 디스플레이 제목에는 굵은 웨이트 800, 본문 텍스트에는 표준 웨이트 400을 사용합니다. 레이아웃은 싱글 칼럼이며 숨 쉬 듯 여백이 넉넉하여, 명확성과 집중을 강조합니다. 핵심 제약 조건: 다크 모드를 사용하지 마세요. 세리프 타이포그래피를 도입하지 마세요. 여러 밝은 색상을 추가하지 마세요. 빽빽한 레이아웃을 피하세요. 공격적인 그림자를 피하세요. 날카롭고 각진 테두리를 피하세요.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 시각적 잡음보다 명확성과 사용 편의성을 우선시하는, 소비자 생산성 도구에 적용된 정제된 Apple 스타일 미니멀리즘의 대표적인 예시로 포함할 가치가 있습니다.