CURATED · OPEN · FREE

Column

A nationally chartered bank for building and funding new financial products.

fintechbank

↓ Download design system (23 MB)Open in OpenDesign

Visit: https://column.com

📦 Browse pack contents →

Identity DNA

fintechbankinginfrastructureAPIscale

Stripe for banking

Color

#121620Ink

#7C7F88Ink soft

#F6F6F8BG

#FFFFFFBG soft

#7EADFFMuted

rgba(227, 228, 232, 1)Line

Clean, high-contrast neutrals with a single blue accent.

Typography

geometric-sans · monospace

display56px · 500
body16px · 400

Spacing

4px

8px

12px

16px

20px

24px

32px

48px

64px

96px

8px base unit

Surfaces

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

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

12-column grid

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.76, 0, 0.24, 1)easing

Subtle opacity fades.

Subtle color transitions. · Immediate response.

Components

button Minimalist, text or ghost buttons.
card Subtle shadow and border.
chip Simple, rounded tags.
input Standard form elements.
hero Split layout with headline and illustration.

Voice & Don'ts

Tone Professional and authoritative.
Headlines Short, punchy, and value-oriented.
CTAs Clear and direct.

Don't use decorative patterns — screenshot shows a clean, dot-based world map.
Don't use heavy drop shadows — screenshot shows very subtle, layered box shadows.
Don't use italicized text — screenshot shows only regular and bold weights.
Don't use multiple accent colors — screenshot shows a blue-based palette.
Don't use rounded cards — screenshot shows sharp or slightly rounded corners.
Don't use overly playful typography — screenshot shows a professional, geometric sans-serif.
Avoid: Jargon
Avoid: Vague promises
Avoid: Complex language

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

The design is a premium, developer-focused fintech platform. Key colors are a light gray (#F6F6F8) background, deep navy (#121616) text, and a bright blue (#7EADFF) accent. The typography uses a geometric sans-serif for headlines and body, with a monospace font for code snippets. Critical donts include: avoid heavy drop shadows, avoid playful typography, avoid complex decorative elements, avoid low contrast, avoid bright or neon colors, and avoid overly rounded shapes.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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