# Column · Design system migration spec

> Source: https://column.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of high-end fintech design, balancing professionalism with a modern, developer-friendly aesthetic.

## 1. Identity DNA

Column operates as the financial infrastructure layer—the Stripe for banking. Its design system treats trust as a structural material, building a clean, high-contrast environment where every element earns its place through clarity and restraint.

**One-liner:** A nationally chartered bank for building and funding new financial products.
**Keywords:** fintech · banking · infrastructure · API · scale
**Analogy:** Stripe for banking

## 2. Color

The palette is governed by a principle of clean, high-contrast neutrals. A single bright blue accent provides the necessary visual interest within a sea of light grays and deep navies.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F6F6F8` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--ink` | `#121620` | body text |
| `--ink-soft` | `#7C7F88` | secondary text |
| `--muted` | `#7EADFF` | placeholder |
| `--line` | `rgba(227, 228, 232, 1)` | divider |

**Color principle:** Clean, high-contrast neutrals with a single blue accent.

The system's discipline lies in its restriction to a single accent color, ensuring visual noise never competes with transactional clarity.

## 3. Typography

A professional, geometric sans-serif carries the entire typographic voice, used in regular and bold weights for a tone that is authoritative without being heavy.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.05 | 500 | -1px | Hero headlines |
| body | 16px | 1.5 | 400 | 0px | Body text |

## 4. Spacing

An 8px base unit establishes a consistent spatial rhythm across all components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 8px base unit

## 5. Surfaces

Depth is communicated through subtle, layered shadows rather than heavy drop shadows. Borders are crisp 1px lines, reinforcing the system's engineered precision.

- **Radius:** sm 3px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - rgba(1, 24, 33, 0.05) 0px 0px 0px 1px
  - rgba(17, 26, 74, 0.1) 0px 1px 3px 0px
- **Borders:** 1px solid #E3E4E8

## 6. Layout

A 12-column grid provides the skeleton, with ample white space enforcing a clear information hierarchy. The layout prioritizes scannability and direct access to function.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** 12-column grid

## 7. Motion & Interaction

Motion is minimal and purposeful, existing solely to clarify state changes. Subtle opacity fades and immediate feedback are the primary tools, all handled via CSS transitions.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.76, 0, 0.24, 1)`
- **Patterns:**
  - Subtle opacity fades.

- **Hover:** Subtle color transitions.
- **Click:** Immediate response.
- **Transition:** CSS transitions on colors and opacity.
- **Keyboard:** Standard focus outlines.

## 8. Voice & Don'ts

The editorial voice is professional and authoritative, mirroring the platform's function. Headlines are short, punchy, and value-oriented, while calls to action are clear and direct.

- **Tone:** Professional and authoritative.
- **Headline style:** Short, punchy, and value-oriented.
- **CTA style:** Clear and direct.
- **Avoid:** Jargon / Vague promises / Complex language

### Don'ts
- ❌ 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.

What this system deliberately omits is as defining as what it includes: no decorative patterns, no italicized text, and no playful flourishes.

## System Prompt (paste into AI tool)

```
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.
```