厳選・オープン・無料

Safe

オンチェーン資産のための、セキュアでモジュラースマートウォレットインフラストラクチャ。

web3wallet
Safe のスクリーンショット
↓ デザインシステムをダウンロード (14 MB)OpenDesign で開く

オリジナル: https://safe.global

📦 パックの中身を見る →

01

デザイン DNA

セキュリティインフラストラクチャマルチシグスマートウォレットオンチェーン

クリーンでクリニカルなインターフェースで表現された、デジタル資産のための産業グレードの金庫。

02

カラー

#12FF80Accent
#1A1A1AInk
rgba(26,26,26,0.6)Ink soft
#F5F5F5BG
#FFFFFFBG soft
#999999Muted
rgba(26,26,26,0.1)Line

ネオングリーンアクセントでAnchorされた高コントラストのライトUI。

03

タイポグラフィ

geometric-sans · sans-serif

プライマリフォントは、大きなディスプレイサイズでタイトなトラッキングを持つジオメトリックサンセリフです。 · テキストカラーは、ライト背景に対してほぼ純黒（#1A1A1A）です。 · セカンダリテキストは、視覚的な階層構築のために不透明度を下げて使用します。

04

余白

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

寛大な垂直パディングと一貫した4pxグリッドベースの間隔。

05

サーフェス (角丸 / 影 / 罫線)

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

構造的な区切りのために、 subtleな黒または白の1px細いボーダー。

0px 4px 4px 0px rgba(0,0,0,0.06)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

最大幅を持つ中央揃えコンテンツから、フルワイドのダークセクションへと移行。

07

モーションとインタラクション

150msmicro
200mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

UI要素のsubtleなフェードイン · ボタンとリンクのホバーにおけるスムーズなトランジション · データプレゼンテーションのためのカスケードアニメーション

ボタンの背景色シフト；テキストリンクの不透明度変化。 · subtleなスケールまたは不透明度の調整。

08

コンポーネント

09

文体と禁止事項

10

パック内の実スクリーンショット

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

実ページから取得 · 実 computed styles

11

System Prompt

このデザインは、セキュアでハイエンドのフィンテックインフラストラクチャプラットフォーム（Safe）を表しています。明るい色のUI（#F5F5F5背景）をベースに、鮮やかなネオングリーンアクセント（#12FF80）でAnchorしています。タイポグラフィはジオメトリックサンセリフで、大きな見出しにはタイトなトラッキングを使用し、大胆で権威のある雰囲気を作り出しています。レイアウトは中央揃えでゆったりとしており、明るいヒーローからより深くデータが豊富なセクションへと移行します。主な制約：プライマリヒーローにダークモードは決して使用せず、常にピル型ボタンスタイルを使用し、黒（#1A1A1A）とネオングリーンの高コントラストなペアリングを維持すること。

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

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

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

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