큐레이션 · 오픈 · 무료

OpenSea

디지털 자산을 탐색하고 트레이딩하기 위한 고밀도, 다크 모드 대시보드입니다.

01

디자인 DNA

현대 시대의 활기찬 디지털 경매장

02

컬러

최대한의 데이터 가독성을 위한 어두운 회색 배경에 고대비 흰색 사용.

03

타이포그래피

grotesque-sans · monospace

• display32px · 500
• heading20px · 500
• body16px · 400
• small14px · 400
• caption12px · 400

04

여백

일관된 4px 그리드 시스템

05

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

1px solid rgba(255,255,255,0.08)

0px 1px 2px 0px rgba(0,0,0,0.03) · 0px 1px 3px 0px rgba(0,0,0,0.1) · inset 0px 0px 0px 1px rgba(255,255,255,0.08)

06

레이아웃

왼쪽 사이드바와 오른쪽 랭킹 패널을 갖춘 밀집형 데이터 대시보드.

07

모션과 인터랙션

hover 시 불투명도 페이드 · 인터랙션 시 스케일 변화 · 리니어 그라디언트 시프트

배경색 전환 및 미묘한 불투명도 변화 · 스케일이나 색상 변화를 통한 즉각적인 시각적 피드백

08

컴포넌트

• button 고대비의 알약형 기본 버튼과 직각형 보조 버튼.
• card 미묘한 테두리와 둥근 모서리를 가진 어두운 표면 카드.
• chip 필터링을 위한 미묘한 배경 채움이 있는 작은 둥근 태그.
• input 돋보이는 단축키 힌트가 있는 어두운 둥근 검색 바.
• hero 데이터가 오버레이된 추천 컬렉션을 소개하는 큰 전체 폭 캐러셀.

09

보이스와 금지 목록

• 톤 전문적이고, 데이터 기반적이며, 직설적인
• 헤드라인 주요 지표에 초점을 맞춘 굵고 간결한 스타일
• CTA 행동 지향적이고 매우 눈에 띄는 스타일

• 밝은 흰색 배경을 사용하지 않습니다 — 스크린샷은 #141415의 다크 테마를 보여줍니다.
• 세리프 타이포그래피를 사용하지 않습니다 — 스크린샷은 깔끔하고 현대적인 그로테크산스체를 보여줍니다.
• 화려한 다색 악센트를 모든 곳에 사용하지 않습니다 — 스크린샷은 양/음의 지표에만 녹색과 빨간색을 특별히 사용하는 것을 보여줍니다.
• 크고 느슨한 간격을 사용하지 않습니다 — 스크린샷은 밀집되고 정보가 많은 대시보드 레이아웃을 보여줍니다.
• 복잡하고 무거운 그림자를 사용하지 않습니다 — 스크린샷은 매우 미묘하거나 박스 그림자가 없는 것을 보여줍니다.
• 큰 반지름의 둥근 입력란을 사용하지 않습니다 — 스크린샷은 16-20px 반지름의 입력란을 보여주며, 지정되지 않는 한 완전한 알약형이 아닙니다.
• 피하기: 장난스러운 언어
• 피하기: 불필요한 감탄사 남발
• 피하기: 맥락 없는 전문 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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