큐레이션 · 오픈 · 무료

Todoist

명확성과 단순성을 위해 설계된 세계 최고의 할 일 목록 앱.

01

디자인 DNA

삶을 위한 깔끔하고 잘 정돈된 디지털 노트

02

컬러

단일의 고채도 레드 악센트를 사용한 따뜻한 중립색

03

타이포그래피

humanist-sans · geometric-sans

• display56px · 500
• h236px · 500
• body18px · 400
• small15px · 400

주요 디스플레이 및 UI 텍스트에는 Inter를 사용합니다 · 보조 본문 텍스트에는 Graphik을 사용합니다 · 장식 또는 인용 요소에는 Caecilia를 사용합니다 · 헤드라인은 볼드체로 넓은 자간을 사용합니다 · 본문은 일반 굵기로 여유로운 행간을 사용합니다

04

여백

섹션 간 여유로운 여백을 사용한 일관된 4px 기본 그리드

05

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

1px solid rgba(37,34,30,0.18)

0px 1px 0px 0px rgba(37, 34, 30, 0.04) · 0px 14px 19px -9px rgba(37, 34, 30, 0.07) · 0px 10px 48px 0px rgba(37, 34, 30, 0.18)

06

레이아웃

여유로운 마진과 중앙 정렬된 콘텐츠 블록을 사용한 12컬럼 그리드

07

모션과 인터랙션

Transform 기반 hover 효과 · 매끄러운 배경색 트랜지션 · 상호작용 요소에 대한 미묘한 scale 애니메이션

미묘한 transform scale과 색상 밝기 증가 · 스프링 easing으로 scale 다운

08

컴포넌트

• button 주요 작업을 위한 그라데이션 배경과 미묘한 그림자가 있는 둥근 사각형
• card 미묘한 테두리와 둥근 모서리가 있는 깔끔한 화이트 컨테이너
• chip 미묘한 배경을 사용한 알약 모양의 카테고리 선택기
• input 미묘한 테두리와 둥근 모서리가 있는 깔끔한 입력 필드
• hero 굵은 헤드라인과 제품 목업이 있는 2컬럼 레이아웃

09

보이스와 금지 목록

• 톤 친근하고 접근 가능하며 자신감 있는 어조
• 헤드라인 명확성과 단순성을 강조하는 짧고 강렬한 진술
• CTA '무료로 시작하기'와 같은 직접적이고 행동 지향적인 문구

• 차가운 블루 악센트를 사용하지 마세요 — 스크린샷은 따뜻한 레드 악센트를 보여줍니다
• 어두운 배경을 사용하지 마세요 — 스크린샷은 주로 화이트/밝은 배경을 보여줍니다
• 두꺼운 테두리를 사용하지 마세요 — 스크린샷은 미묘한 1px 테두리를 보여줍니다
• 날카로운 모서리를 사용하지 마세요 — 스크린샷은 둥근 모서리(8-15px 반지름)를 보여줍니다
• 본문에 세리프 서체를 사용하지 마세요 — 스크린샷은 산세리프 서체를 보여줍니다
• 밀도 높은 텍스트 블록을 사용하지 마세요 — 스크린샷은 여유로운 여백과 짧은 단락을 보여줍니다
• 여러 개의 경쟁 악센트 색상을 사용하지 마세요 — 스크린샷은 단일 레드 악센트를 보여줍니다
• 피하기: 기술적 전문 용어 또는 복잡한 용어
• 피하기: 공격적이거나 고압적인 언어
• 피하기: 지나치게 기업적이거나 격식 있는 어조
• 피하기: 히어로 섹션의 밀도 높은 단락

10

팩 안의 실제 스크린샷

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

11

System Prompt

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