큐레이션 · 오픈 · 무료

Fey

복잡한 시장 데이터를 실행 가능한 투자 인사이트로 단순화하는 프리미엄 핀테크 도구.

01

디자인 DNA

현대 투자자를 위한 프라이빗 웰스 대시보드

02

컬러

짙은 근黒색 표면과 고대비 타이포그래피를 사용하여 밀집된 금융 데이터에 최대한의 집중을 둡니다.

03

타이포그래피

grotesque-sans · monospace

• display54px · 600
• headline54px · 700
• subhead18px · 400
• body16px · 400
• caption14px · 400

모든 텍스트에 Calibre 사용 · 대형 헤드라인에는 타이트한 네거티브 트래킹 사용 · 모든 본문 및 캡션 텍스트에 400 웨이트 사용

04

여백

각각의 UI 섹션과 카드 사이에 넉넉한 여백과 명확한 간격(24px)을 둡니다.

05

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

깊이감을 위해 낮은 불투명도의 흰색 rgba(255, 255, 255, 0.04)으로 미세한 1px 테두리를 사용합니다.

rgba(0, 0, 0, 0.28) 0px 14px 24px 0px · rgba(0, 0, 0, 0.66) 0px 53.1263px 86.7729px 0px

06

레이아웃

전체 폭 앱 스크린샷과 넓은 카드 레이아웃을 사용하는 중앙 정렬 단일 열 레이아웃.

07

모션과 인터랙션

호버 상태에 대한 미세한 불투명도 페이드 · 부드러운 배경 전환

인터랙티브 요소에 대한 미세한 불투명도 변화 또는 배경 전환 · 복잡한 물리적 애니메이션 없이 즉각적인 응답

08

컴포넌트

• button 고대비 배경 또는 미세한 테두리를 가진 알약 모양 버튼, 큰 반경(99px).
• card 미세한 테두리와 큰 border-radius(16px)를 가진 어둡고 반투명한 카드로 밀집된 데이터를 담습니다.
• chip 색상 텍스트와 미세한 배경을 가진 작은 알약 모양 상태 표시기.
• input 미세한 테두리와 명확한 레이블을 가진 어둡고 둥근 입력 필드.
• hero 전체 폭 고화질 제품 스크린샷과 함께 중앙 정렬된 거대한 타이포그래피.

09

보이스와 금지 목록

• 톤 권위 있고 명확하며 데이터 기반
• 헤드라인 타이트한 트래킹을 가진 짧고 단정적인 문장
• CTA 직설적이고 행동 지향적 (예: '더 알아보기', '앱')

• 밝은 네온 악센트를 사용하지 마세요 — 스크린샷은 엄격히 중립적인 근黒색 팔레트를 보여줍니다.
• 세리프 폰트를 사용하지 마세요 — 스크린샷은 일관된 휴머니스트/그로테스크산스 시스템을 보여줍니다.
• 장난스러운 일러스트레이션을 사용하지 마세요 — 스크린샷은 현실적이고 고품질의 제품 사진을 보여줍니다.
• 무거운 그림자를 사용하지 마세요 — 스크린샷은 깊이감을 위해 미세하고 큰 반경의 드롭 섀도우를 사용합니다.
• 타이트한 레이아웃을 사용하지 마세요 — 스크린샷은 모든 텍스트 블록 주위에 넉넉한 여백을 보여줍니다.
• 선명한 그라데이션을 사용하지 마세요 — 스크린샷은 단색 다크 배경과 미세한 테두리 글로우를 사용합니다.
• 피하기: 지나치게 많은 느낌표
• 피하기: 모호한 마케팅 용어
• 피하기: 맥락 없는 복잡한 금융 전문 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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