큐레이션 · 오픈 · 무료

MetaMask

기술적 신뢰성과 표현력 넘치고 대담한 브랜딩의 균형을 맞춘 견고하고 독특한 암호화폐 지갑 인터페이스.

web3wallet
MetaMask 스크린샷
↓ 디자인 시스템 다운로드 (10 MB)OpenDesign 에서 열기

원본 사이트: https://metamask.io

📦 팩 내용 보기 →

01

디자인 DNA

cryptowalletweb3onchainprivacy

기술적 정밀함과 친근하고 장난스러운 미학을 결합한, 탈중앙화 금융으로의 대담하고 기하학적인 관문.

02

컬러

#0A0A0AInk
#3D065FInk soft
#FFF0E6BG
#E5FFC3BG soft
#F7F9FCBG quiet
#573D46Muted
rgba(10,10,10,0.1)Line

부드러운 파스텔 위에 표현력 넘치고 채도 높은 색상을 사용하여 시각적 흥미를 높이는 대담하고 대비가 높은 팔레트.

03

타이포그래피

geometric-sans · monospace

헤드라인은 임팩트를 위해 극도로 타이트한 line-height와 letter-spacing을 사용합니다. · 본문은 표준 weight로 높은 가독성을 유지합니다. · UI 레이블과 내비게이션은 medium weight를 사용합니다.

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

예측 가능하고 조화로운 간격을 위한 4px 기본 격자와 선형 스케일.

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

최소화하여, 배경색 대비와 강한 타이포그래피에 의존하여 구분합니다.

rgb(204, 204, 204) 0px 0px 2px 2px · rgb(128, 128, 128) 0px 0px 5px 0px

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

중심에 정렬된, 컬럼 중심 레이아웃으로 큰 표현형 히어로 섹션과 격자 기반 기능 쇼케이스를 특징으로 합니다.

07

모션과 인터랙션

137msmicro
367mssmall
550msmedium
cubic-bezier(0.4, 1.35, 0.5, 0.97)easing

장난스러운 느낌을 위한 transform의 탄력 있고 바운스 있는 easing. · 요소 전환을 위한 매끄러운 opacity 페이드. · 순차적 진입 애니메이션을 위한 easing된 지연.

상호작용 요소에 미세한 transform과 색상 변화. · 표준 focus 상태 외에 최소한의 시각적 피드백.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

MetaMask — 桌面首屏（hero）
桌面首屏（hero）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
MetaMask — 移动首屏
移动首屏

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

11

System Prompt

기술적으로 신뢰할 수 있으면서도 친근하고 장난기 있는 느낌의 대담하고 표현력 넘치는 Web3 제품 사이트를 설계하세요. 부드러운 피치(#FFF0E6)와 라임(#E5FFC3) 배경의 핵심 팔레트와 높은 대비를 위한 깊은 보라(#3D065F) 및 어두운 청록(#013330)을 사용하세요. 타이포그래피는 거대한 헤드라인용 초볼드 기하학적 디스플레이 폰트와 본문용 깔끔한 기하학적 sans-serif의 혼합이어야 합니다. 핵심 인터랙션은 탄력 있고 유연하게 느껴져야 합니다. 중요: 헤드라인에 절대 얇은 폰트를 사용하지 마세요; 항상 알약 모양 버튼을 사용하세요; 기본 다크 모드를 피하세요; 레이아웃은 여백이 넉넉하고 텍스트가 크게 구성되도록 하세요; 카드에 무거운 그림자를 추가하지 마세요; 색상이 화려하고 대비가 높도록 하세요.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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