N26

シグネチャーとなるティールアクセントを用い、ユーザーを単一の主要なアクションへと誘導する、クリーンで自信に満ちたフィンテックUI。

デザイン DNA

明瞭さと信頼を優先する、現代的で親しみやすい银行支店をポケットの中に。

カラー

#088177Accent

#1B1B1BInk

#FAF8F5BG

#6D6D6DMuted

rgba(233, 233, 233, 1.0)Line

暖かみのあるオフホワイトの背景と、支配的なティールアクセントが、金融アクションに対する信頼性高くアクセシブルなコントラストを生み出します。

タイポグラフィ

余白

4px

8px

12px

16px

24px

32px

40px

48px

64px

80px

96px

余裕のあるパディングによる呼吸を整える、標準4pxベースグリッド

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

構造的な分離とインタラクティブ要素のための、繊細な1pxボーダー

レイアウト

セクション間に十分な垂直方向のホワイトスペースを持つ、中央揃えコンテナ

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

インタラクティブ要素の背景色、transform、scaleの滑らかなトランジション

滑らかなトランジションによる背景色またはカラーのシフト · 即時フィードバックのためのscaleまたはtranslate transform

コンポーネント

文体と禁止事項

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

System Prompt

N26は、フレンドリーでアクセシブルなトーンとプロフェッショナルな信頼のバランスを取る、プレミアムなフィンテックバンキングプラットフォームです。ビジュアルアイデンティティは、シグネチャーとなるティールアクセント（#088177）を暖かみのあるオフホワイト背景（#FAF8F5）に配置することで構築され、金融活動のための高コントラストでありながら歓迎的な環境を生み出しています。タイポグラフィは、読みやすさとモダンな感覚を優先するクリーンな幾何学的サンセリフで、主要なヘッドラインには大きなディスプレイサイズを使用しています。レイアウトは余裕があり中央揃えで、情報の過剰を防ぐために一貫した4pxベースグリッドと豊富なパディングに依存しています。ほぼすべてのセクションの焦点となるのは、ピル形状のボーダーラジウスを持つプライマリCTAです。インタラクションデザインは繊細で、ホバーやクリック時に滑らかな0.3sのトランジションを使用しています。重要なデザイン制約：複数の競合するアクセントカラーは決して使用しない；純粋なホワイト背景は決して使用しない；メインコンテンツカードに角のない四角形のコーナーは決して使用しない；密度が高く専門用語を多用したテキストブロックは避ける；そして、クリーンで焦点の絞られたユーザーエクスペリエンスを維持するために、セクションごとに単一で強力なプライマリCTAを維持すること。