큐레이션 · 오픈 · 무료

Superlist

AI와 음성이 지원되는 작업, 노트 및 계획을 위한 통합 앱.

01

디자인 DNA

흩어진 목록을 하나의 우아한 인터페이스로 통합하는 세련된 디지털 명령 센터.

02

컬러

주요 작업과 강조를 위한 선명한 오렌지 악센트를 사용한 다크 모드 우선.

03

타이포그래피

geometric-sans · humanist-sans · monospace

• display70px · 600
• heading48px · 500
• body16px · 400

큰 디스플레이 헤딩에는 좁은 음수 자간을 사용합니다. · 강조를 위해 볼드 웨이트와 본문에는 가벼운 웨이트를 혼합합니다. · 모든 중요한 텍스트에 높은 대비(어두운 배경에 흰색)를 보장합니다.

04

여백

히어로 섹션에 넉넉한 패딩을 포함한 4px 그리드의 일관된 사용.

05

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

구분을 위해 rgba(255,255,255,0.08)를 사용하는 미묘한 1px 테두리.

0px 10px 15px 0px rgba(0, 0, 0, 0.08) · 0px 1px 1px 0px rgba(0, 0, 0, 0.1) · inset 0px 0.5px 0px 0px rgba(255, 255, 255, 0.45)

06

레이아웃

전체 너비의 어두운 히어로와 스택형 기능 섹션이 있는 중앙 정렬 콘텐츠.

07

모션과 인터랙션

hover 시 색상 전환 · 부드러운 페이드인

색상 변화와 미묘한 불투명도 변화. · 즉각적인 시각적 피드백.

08

컴포넌트

• button 대담한 텍스트가 있는 알약 모양 버튼, 주로 선명한 오렌지 악센트를 사용합니다.
• card 미묘한 테두리와 부드러운 그림자가 있는 어두운 카드, 둥근 모서리(20px)를 특징으로 합니다.
• chip 스크린샷에서 두드러지게 나타나지 않습니다.
• input 어두운 배경을 가진 깔끔하고 미니멀한 입력 필드.
• hero 어두운 배경에 중앙 정렬된 대형 타이포그래피와 그 아래 큰 제품 미리보기.

09

보이스와 금지 목록

• 톤 자신감 있고, 현대적이며, 매우 생산적.
• 헤드라인 통합을 강조하는 짧고 임팩트 있는 구문.
• CTA 직접적이고 행동 지향적인 문구, 예: '무료로 가입하세요'.

• 밝은 배경을 사용하지 마세요 — 스크린샷은 어두운 몰입형 인터페이스를 보여줍니다.
• 둥근 세리프 폰트를 사용하지 마세요 — 스크린샷은 헤딩용 기하학적 산세리프를 보여줍니다.
• 전체 페이지에 단일 열 레이아웃을 사용하지 마세요 — 스크린샷은 다양한 레이아웃을 보여줍니다.
• 미묘하고 대비가 낮은 버튼을 사용하지 마세요 — 스크린샷은 선명하고 채도가 높은 악센트 버튼을 보여줍니다.
• 과도한 드롭 그림자를 사용하지 마세요 — 스크린샷은 부드럽고 미묘한 고도감을 보여줍니다.
• 작고 비좁은 간격을 사용하지 마세요 — 스크린샷은 넉넉한 패딩과 여백을 보여줍니다.
• 피하기: 복잡한 레이아웃
• 피하기: 흐릿하거나 파스텔 팔레트
• 피하기: 복잡하고 다층적인 네비게이션

10

팩 안의 실제 스크린샷

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

11

System Prompt

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