厳選・オープン・無料

Modern Treasury

開発者向けの決済オーケストレーションAPI。

01

デザイン DNA

お金の流れを扱うための、クリーンな建築設計図。

02

カラー

信頼感を演出する単一のグリーンアクセントを持つ、ハイコントラストの中性色。

03

タイポグラフィ

grotesque-sans · humanist-sans · monospace

• display48px · 500
• h232px · 400
• body16px · 400
• caption14px · 400

04

余白

4px グリッド

05

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

1px solid rgba(21, 21, 21, 0.8)

inset 0 0 0 1px rgb(21, 21, 21) · 0 20px 25px -5px lab(0 0 0 / 0.04) · 0 4px 6px -1px rgba(0, 0, 0, 0.1)

06

レイアウト

テキストブロックの最大幅を680pxに制限した、中央配置のコンテンツ。

07

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

カラートランジション · background-color トランジション · border-color トランジション · fill トランジション

スムーズなカラートランジション · 即座のフィードバック

08

コンポーネント

• button 角が小さく丸められた長方形。暗い背景に明るいテキスト、またはボーダー付きのアウトラインを使用。
• card 微細なパディングと角丸を持つ、単色のカラーブロック。
• chip 等幅フォントのテキストと明るい背景を持つ、小さな長方形ラベル。
• input 微細なボーダーを持つ、クリーンな長方形フィールド。
• hero 明確なCTAを伴う、中心配置の大規模タイポグラフィ。

09

文体と禁止事項

• トーン プロフェッショナルで、開発者中心、かつ効率的。
• 見出し 短く、行動を促す宣言。
• CTA 直接的で、歓迎するような言葉遣い。

• ソフトで丸みを帯びた「フレンドリー」な形状を使わない — スクリーンショットには鋭角で長方形のUIコンポーネントが示されている
• 明るい赤や青などのプライマリカラーを使わない — スクリーンショットには黒、白、グリーンという抑制されたパレットが示されている
• 装飾的なセリフフォントを使わない — スクリーンショットにはクリーンでモダンなサンセリフタイポグラフィが示されている
• 賑やかな多色グラデーションを使わない — スクリーンショットには単色ブロックとシンプルなグリッド背景が示されている
• 遊び心のある、あるいはカートゥーン風のイラストを使わない — スクリーンショットには技術的な図表とクリーンなデータ可視化が示されている
• 過度なドロップシャドウを使わない — スクリーンショットには最小限の奥行きを持つフラットなサーフェスが示されている
• 避ける: マーケティング用語
• 避ける: 曖昧な約束

10

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

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

11

System Prompt

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