큐레이션 · 오픈 · 무료

Aave

모바일 뱅킹 앱을 사용하듯 수익률을 얻는 것을 간단하게 만드는 탈중앙화된 저축 플랫폼.

01

디자인 DNA

접근성과 신뢰에 중점을 둔, DeFi를 위해 조정된 깔끔하고 현대적인 핀테크 은행 지점.

02

컬러

부드러운 오프화이트 표면 위의 대비가 높은 블랙 잉크와, 주요 조치를 위한 단일의 강조된 라벤더 악센트.

03

타이포그래피

geometric-sans · mono

• display72px · 500
• headline40px · 500
• body16px · 400
• caption14px · 500

대형 디스플레이 텍스트에는 타이트한 자간 (-3.6px)을 사용합니다. · 기본 본문 텍스트는 두께 400을 사용해야 합니다. · 헤드라인은 두께 500을 사용합니다.

04

여백

8px 기본 그리드, 섹션 사이에 넉넉한 padding으로 수직으로 쌓임.

05

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

rgba(0, 0, 0, 0.06)를 사용하는 매우 미묘한 1px 테두리.

0 6px 20px rgba(0, 0, 0, 0.05) · 0 0 0 1px rgba(0, 0, 0, 0.06)

06

레이아웃

중앙 정렬 싱글 컬럼 히어로, 접힌 부분 아래의 기능 카드용 2컬럼 그리드로 전환.

07

모션과 인터랙션

인터랙티브 요소의 미묘한 색상 및 불투명도 전환 (0.15s). · 스케일링이나 이동을 위한 transform 전환 (0.2s ease-out).

버튼과 링크의 미묘한 배경색 또는 불투명도 변화. · 즉각적인 피드백, 아마도 약간의 스케일 또는 불투명도 감소.

08

컴포넌트

• button 대비가 높은 주요 버튼 (라벤더 배경, 화이트 텍스트)과 미묘한 보조 버튼 (연한 라벤더 배경, 보라색 텍스트). 완전히 둥근 모양 (pill 형태).
• card 매우 미묘한 배경 위에 부드럽고 약간 둥근 카드 (반지름 12-20px), 최소한의 테두리.
• chip 두드러지게 특징 지어지지 않지만, 태그 유형 요소는 저조도 라벤더 배경을 사용합니다.
• input 제공된 스크린샷에는 보이지 않습니다.
• hero 거대한 72px 디스플레이 글꼴, 설명적인 부제목, 그리고 나란히 놓인 두 개의 CTA가 있는, 중앙 정렬되고 텍스트가 많은 히어로.

09

보이스와 금지 목록

• 톤 자신감 있고 명확하며 약간 기술적이지만 접근성이 높음.
• 헤드라인 간결하고 강렬하며 이점 중심의 진술 ('모든 사람을 위한 저축', '최고의 빌드').
• CTA 행동 지향적이고 플랫폼에 맞는 ('iOS에서 다운로드', 'Aave 사용').

• 세리프 글꼴을 사용하지 마세요 — 스크린샷에는 모든 텍스트에 기하학적 산세리프가 사용됩니다.
• 다크 모드를 기본으로 사용하지 마세요 — 스크린샷에는 주로 화이트와 라이트 그레이 인터페이스가 보입니다.
• 주요 요소에 날카롭고 사각진 모서리를 사용하지 마세요 — 스크린샷에는 크게 둥근 pill 모양과 부드러운 반지름이 보입니다.
• 악센트용 고대비, 채도 높은 빨강 또는 초록을 사용하지 마세요 — 스크린샷에는 저조도 라벤더가 주요 악센트로 사용됩니다.
• 모든 텍스트를 중앙 정렬하지 마세요 — 스크린샷에는 본문 및 기능 설명에 왼쪽 정렬이 사용됩니다.
• 깊이감을 위해 drop shadow를 사용하지 마세요 — 스크린샷에는 분리를 위해 매우 미묘하고 불투명도가 낮은 테두리 또는 평탄한 색상 차이가 사용됩니다.
• 피하기: 컨텍스트 없이 지나치게 밀집된 금융 전문 용어를 피합니다.
• 피하기: 불필요한 아이콘이나 테두리로 인터페이스를 복잡하게 하지 않습니다.
• 피하기: 공격적 또는 네온 색상 팔레트를 피합니다.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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