厳選・オープン・無料

Column

新しい金融プロダクトを構築・資金調達するための、全国免許を持つ銀行。

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

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

📦 パックの中身を見る →

01

デザイン DNA

フィンテック銀行インフラAPIスケール

銀行版Stripe

02

カラー

#121620Ink
#7C7F88Ink soft
#F6F6F8BG
#FFFFFFBG soft
#7EADFFMuted
rgba(227, 228, 232, 1)Line

単一のブルーアクセントを持つ、クリーンで高コントラストの中立色。

03

タイポグラフィ

geometric-sans · monospace

04

余白

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

8px基本ユニット

05

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

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

1px solid #E3E4E8

rgba(1, 24, 33, 0.05) 0px 0px 0px 1px · rgba(17, 26, 74, 0.1) 0px 1px 3px 0px

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

12カラムグリッド

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.76, 0, 0.24, 1)easing

微細な透過度フェード。

微細なカラートランジション。 · 即座のレスポンス。

08

コンポーネント

09

文体と禁止事項

10

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

Column — 桌面首屏（hero）
桌面首屏（hero）
Column — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Column — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Column — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Column — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Column — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Column — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Column — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Column — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Column — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Column — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Column — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Column — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Column — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Column — 移动首屏
移动首屏

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

11

System Prompt

デザインは、プレミアムで開発者中心のフィンテックプラットフォームです。主要カラーは、ライトグレー（#F6F6F8）の背景、深いネイビー（#121616）のテキスト、鮮やかなブルー（#7EADFF）のアクセントです。タイポグラフィは、見出しと本文に幾何学的なsans-serif、コードスニペットにmonospaceフォントを使用します。重要な禁止事項は以下の通りです：重いドロップシャドウは避け、遊び心の強いタイポグラフィは避け、複雑な装飾要素は避け、低コントラストは避け、明るいまたはネオンカラーは避け、過度に丸みのある形状は避けます。

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

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

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

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