厳選・オープン・無料

Increase

テクノロジー企業向けエンタープライズグレードのバンキングAPI。

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

オリジナル: https://increase.com

📦 パックの中身を見る →

01

デザイン DNA

エンタープライズバンキングAPIインフラストラクチャ開発者

金融インフラ向けに精密に設計されたダッシュボード。

02

カラー

#31F2CCAccent
#1A2B3BInk
#687887Ink soft
#FFFFFFBG
#F5F6F7BG soft
#E4E5E9BG quiet
#314352Muted
rgba(26, 43, 59, 0.1)Line

信頼性を支えるディープネイビーを基調とした、清潔でプロフェッショナルなパレット。モダンなテクノロジー感を表現する鮮やかなティールとライムのグラデーションでバランスを保っています。

03

タイポグラフィ

grotesque-sans · monospace

04

余白

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

明確なビジュアル階層を実現する、一貫した4pxグリッドシステム。

05

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

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

1px solid rgba(26, 43, 59, 0.1)

rgba(12, 25, 39, 0.05) 0px 6px 8px 0px · rgba(12, 25, 39, 0.06) 0px 16px 20px 0px · rgba(12, 25, 39, 0.1) 0px 50px 60px 0px

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

12カラムグリッドを持つ最大幅のコンテナ。メインコンテンツを中央に配置します。

07

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

150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

インタラクティブ要素のホバーステートに対する滑らかなトランジション · インタラクション時の繊細な色とシャドウの変化

繊細な色のトランジション、またはわずかなシャドウの浮き上がり。 · 主に色やスケールの変化による、即座のビジュアルレスポンス。

08

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

これはエンタープライズ開発者向けに設計されたプロフェッショナルなフィンテックSaaSプロダクトです。パレットは信頼性を支えるディープネイビー(#1A2B3B)を基調とし、モダンなエネルギーを表現する鮮やかなティール(#31F2CC)とライムグリーンのグラデーションで対比させています。タイポグラフィにはグロテスクサンスをヘッドラインと本文に、コードスニペットにはモノスペースを採用しています。レイアウトはグリッドベースで、ゆったりとしており、高い可読性を持ちます。重要な制約:セリフフォントを使用せず、雑然としたUIを避け、過度に遊び心のあるオーガニックなビジュアル要素は絶対に使用しません。権威を維持するため、プライマリボタンとテキストにはディープネイビーを使用してください。

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

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

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

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