厳選・オープン・無料

Arbitrum

プレミアムで大胆、ハイコントラストなフィンテックプラットフォームアイデンティティ。

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

オリジナル: https://arbitrum.io

📦 パックの中身を見る →

01

デザイン DNA

ブロックチェーンインフラストラクチャ金融プログラマブル経済

未来的で幾何学的な锋鋭さを持つ、大胆でハイコントラストなフィンテックダッシュボード。

02

カラー

#10E1FFAccent
#05163DInk
rgba(0, 0, 0, 0.5)Ink soft
#FFFFFFBG
#F2F2F2BG soft
rgba(0, 0, 0, 0.1)Line

ハイコントラストな大胆なタイポグラフィが支配的。深いネイビーと鮮やかな白を背景に、プライマリとなる青〜シアンのアクセントが配置されます。

03

タイポグラフィ

grotesque-sans · geometric-sans · monospace

デフォルトで全テキストは大文字 · 本文にはgeometric-sans-serifを使用 · ヒーローテキストにはboldなgrotesque-sans-serifを使用

04

余白

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

たっぷりとしたpadding(40px)とgap(16px)により、広々とした印象を生み出します。

05

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

sm · 5px
md · 5px
lg · 20px
pill · 40px

1px solid rgba(0, 0, 0, 0.1)

0px 1px 2px 0px rgba(0, 0, 0, 0.05)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

余白をたっぷりと取り、クリーンでグリッドベースのレイアウト。左揃えのヒーローが明確な階層を形成します。

07

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

220msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

すべてのインタラクティブ要素に対する滑らかなトランジション · 背景色と塗りつぶしのトランジション

控えめな背景色またはopacityの変化 · 軽微なopacityの減少による即座のフィードバック

08

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

Arbitrumのデザインは、大胆な大文字タイポグラフィと鮮やかなネイビーと白のパレットで定義される、プレミアムでハイコントラストなフィンテックアイデンティティです。プライマリアクセントは鮮やかなシアン(#10E1FF)で、深いネイビー(#05163D)の背景に対して強調に使用されます。タイポグラフィはすべてsans-serifで、ヒーローセクションにはgrotesque-sansのディスプレイフォント、本文にはgeometric-sansが使用され、すべてmedium(500)またはsemibold(600)のウェイトでデフォルトは大文字です。レイアウトは広々としてグリッドベースで、たっぷりとしたpaddingと明確な階層構造が特徴です。重要な禁止事項:ナビゲーションに小文字を使用しない、軽いフォントウェイトを使用しない、パステルのパレットを使用しない、セリフフォントを使用しない、雑然としたレイアウトを使用しない、十分なコントラストのない細いボーダーやアウトラインを使用しないこと。

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

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

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

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