厳選・オープン・無料

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

見出しはインパクトのために極端に詰めた行の高さと文字间距を使用します。 · 本文は標準のウェイトで高い可読性を維持します。 · UIラベルとナビゲーションにはミディアムウェイトを使用します。

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

遊び心のある印象のための、トランスフォームに対する弾むような弾力的なイージング。 · 要素遷移のためのスムーズな透過フェード。 · スタガーされた出現アニメーションのための、缓やかな遅延。

インタラクティブ要素に対する微細なトランスフォームと色の変化。 · 標準のフォーカス状態以外の、最小限の視覚フィードバック。

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）を高コントラストに使用します。タイポグラフィは、巨大な見出し用のウルトラボールドな幾何学的ディスプレイフォントと、本文用のクリーンな幾何学サンセリフの組み合わせとします。主要なインタラクションは弾んで弾力性のあるものにします。重要事項：見出しに細いフォントを使用しない；常にピル形状のボタンを使用する；デフォルトのダークモードを避ける；レイアウトはゆったりと、文字は大きく；カードに重いシャドウを追加しない；色は鮮やかでコントラストの高いものにする。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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