큐레이션 · 오픈 · 무료

Relief

부채를 줄이고 더 빠르게 부채 없는 상태가 되도록 돕는 금융 앱입니다.

01

디자인 DNA

부채를 탐색하는 사람들에게 차분하고 안전한 항구.

02

컬러

따뜻한 오프화이트와 다양한 블루를 조합한 차분하고 신뢰감 있는 팔레트로 안도감과 안전함을 전달합니다.

03

타이포그래피

humanist-sans · monospace

• display49px · 800
• display31px · 700
• display20px · 700
• body18px · 400
• body16px · 400
• body14px · 400

04

여백

4px 그리드 기반의 일관된 간격으로, 14px, 21px, 28px, 56px와 같은 값을 활용합니다.

05

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

주로 테두리가 없으며, 배경색 대비에 의존합니다.

0px 7px 0px 0px rgba(154, 207, 246, 0.5) · 0px 3px 0px 0px rgba(0, 0, 0, 0.05) · 6px 6px 44px 0px rgba(22, 31, 53, 0.1)

06

레이아웃

중앙 정렬된 히어로 레이아웃에서 2열 피처 섹션으로 전환됩니다.

07

모션과 인터랙션

인터랙티브 요소에 대한 hover 전환

hover 시 미세한 전환 효과 · 스크린샷에서 눈에 띄는 클릭 상태 변경 없음

08

컴포넌트

• button 단색 블루 채우기와 뚜렷한 3D 오프셋 그림자를 가진 알약 모양 기본 버튼.
• card 다크 블루 배경과 5점 만점 평점을 가진 후기 카드.
• chip 사용자 신뢰를 보여주는 아바타가 있는 둥근 태그.
• input 깔끔하고 둥근 입력 필드.
• hero 모바일 앱 목업과 부유하는 3D 요소가 있는 일러스트레이션 히어로 섹션.

09

보이스와 금지 목록

• 톤 지지적이고 격려하며 직접적입니다.
• 헤드라인 '부채에서 벗어나도록 도와드리겠습니다'와 같은 직접적이고 행동 지향적인 문구.
• CTA '안도감 얻기' 또는 '내 저축 보기'와 같이 명확하고 간결합니다.

• 히어로에 어두운 배경을 사용하지 마세요 — 스크린샷은 구름이 있는 연한 블루 배경을 보여줍니다.
• 버튼에 날카롭고 직사각형 모서리를 사용하지 마세요 — 스크린샷은 완전히 둥근 알약 모양 버튼을 보여줍니다.
• 기본 버튼에 플랫 디자인을 사용하지 마세요 — 스크린샷은 뚜렷한 3D 그림자 오프셋이 있는 버튼을 보여줍니다.
• 복잡한 내비게이션 메뉴를 사용하지 마세요 — 스크린샷은 로고와 단일 CTA만 있는 미니멀 상단 바를 보여줍니다.
• 여러 고대비 색상을 사용하지 마세요 — 스크린샷은 주로 블루와 오프화이트로 제한된 팔레트를 보여줍니다.
• 히어로에 밀집된 다중 열 레이아웃을 사용하지 마세요 — 스크린샷은 중앙 정렬된 단일 열 초점을 보여줍니다.
• 피하기: 지나치게 기술적인 금융 전문 용어
• 피하기: 공격적이거나 긴박한 어조
• 피하기: 복잡한 문장 구조

10

팩 안의 실제 스크린샷

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

11

System Prompt

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