厳選・オープン・無料

Mastercard

グローバル金融ユーティリティのための、清潔で中立的なインターフェース。

01

デザイン DNA

デジタルコマースのための普遍的なゲートウェイ。

02

カラー

最大限の可読性と中立性を実現するための、高コントラストの絶対的なモノクローム。

03

タイポグラフィ

transitional-serif

• body16px · 400

テキストは厳密にトランジショナル・セリフ書体で設定する。 · ウェイトは常に400とする。 · テキストサイズは固定的に16pxとする。

04

余白

清潔で標準的な垂直リズム。

05

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

シンプルな、塗りつぶしの1px黒いボーダー。

06

レイアウト

標準的な、フルワイドのコーポレートレイアウト。

07

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

ステータス変更のための、繊細なフェードとトランジション。

テキストリンクのアンダーラインまたは不透明度の変更。 · 標準的なシステムフィードバック。

08

コンポーネント

• button シンプルなテキストリンクまたは標準システムボタン。
• card 細いボーダーで定義されたコンテンツブロック。
• input 黒いボーダーを持つ標準システムインプット。
• hero 最小限のテキストとブランドマークを備えた、大きく清潔なエリア。

09

文体と禁止事項

• トーン 権威があり、明確で中立的。
• 見出し 直接的で宣言的。
• CTA 明確で実行可能なテキストリンク。

• サンセリフ書体を使用しない — スクリーンショットではトランジショナル・セリフ書体が使用されている。
• カラーバックグラウンドを使用しない — スクリーンショットでは無地の白いバックグラウンドが使用されている。
• ドロップシャドウを使用しない — スクリーンショットではフラットでボーダーで定義された要素が使用されている。
• 角丸を使用しない — スクリーンショットでは鋭利な0pxの角が使用されている。
• 鮮やかなアクセントカラーを使用しない — スクリーンショットでは厳密なモノクロームパレットが使用されている。
• 太いフォントウェイトを使用しない — スクリーンショットでは一貫した400ウェイトが使用されている。
• 避ける: スラング
• 避ける: 過度にカジュアルな言葉
• 避ける: 曖昧な表現

11

System Prompt

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