---
title: "Column design system"
variant: extended
source: https://column.com/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/column-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Column · Design System

> Calm banking infrastructure, made tangible through product UI.

**Theme:** light · **Industry:** fintech · **Source:** https://column.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Column pairs a restrained, light canvas and precise typography with a dotted world-map hero that signals global financial infrastructure. Product-interface mockups, customer proof, and a long dark infrastructure section make the technical offering concrete without making the page feel dense.

## North star

Keep the canvas quiet and spacious, then use real-feeling financial product UI and disciplined navy typography to make infrastructure understandable.

## Overview

The page uses a cool near-white canvas (#f6f6f8) as its main field, with a subtle dotted world map and pale blue-green tones carrying the hero imagery rather than competing with the message. Dark navy headings (#111a4a) establish a strong reading anchor; muted gray supports secondary copy and navigation. A single dark, full-width infrastructure section (#011821) creates a clear change of pace, while green highlights mark selected status and product details. SuisseIntl supplies the clean, humanist sans-serif voice, with mono captions and code labels adding a developer-facing layer. Content aligns to a spacious central grid, generally left-aligned, and alternates explanatory copy with product UI, customer proof, and technical diagrams. Cards and buttons have softly rounded corners; fine borders and restrained shadows separate interface mockups from the quiet canvas. The overall effect is precise and approachable, not ornamental.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Cloud Canvas | `#f6f6f8` | `--color-cloud-canvas` | surface | Primary page canvas and broad light section background, including the hero. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Raised cards, interface panels, and reversed text on dark or navy controls. |
| Column Navy | `#111a4a` | `--color-column-navy` | brand | Primary headings, key text, and the solid Sign up button. |
| Quiet Gray | `#7c7f88` | `--color-quiet-gray` | neutral | Secondary copy, subdued links, and supporting interface labels. |
| Deep Harbor | `#011821` | `--color-deep-harbor` | brand | Full-width dark infrastructure section and its contrasting content. |
| Ledger Green | `#44b48b` | `--color-ledger-green` | accent | Positive statuses and selected highlights in product details and technical visuals. |
| Soft Divider | `#e3e4e8` | `--color-soft-divider` | neutral | Fine section, card, and control boundaries against light surfaces. |
| Mist Panel | `#eeeff2` | `--color-mist-panel` | surface | Pale card and section surfaces that add subtle separation from the canvas. |
| Slate Ink | `#3b3e47` | `--color-slate-ink` | neutral | Occasional supporting text where primary navy would be too emphatic. |
| Signal Orange | `#ec652b` | `--color-signal-orange` | accent | Small accent detail in interface or decorative artwork; not a dominant page color. |
| Dotfield Gray | `#cfd0d8` | `--color-dotfield-gray` | neutral | Pale dotted or gradient artwork detail, not a primary text or surface color. |
| Coral Glow | `#f2936b` | `--color-coral-glow` | accent | Warm gradient or illustration detail; keep confined to decorative artwork. |
| Mint Highlight | `#94efb7` | `--color-mint-highlight` | accent | Bright green detail in technical or product artwork, not a broad background. |
| Sky Signal | `#88deeb` | `--color-sky-signal` | accent | Cool cyan highlight within product visuals and decorative gradients. |
| Ice Wash | `#e2f0f7` | `--color-ice-wash` | surface | Very pale blue gradient or illustration color, not a core section surface. |
| Violet Trace | `#9f7aee` | `--color-violet-trace` | accent | Limited gradient and technical-artwork accent; avoid using as a general interface color. |

### Semantic aliases

`--color-canvas` → `#f6f6f8` (Cloud Canvas) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#011821` (Deep Harbor) · `--color-surface-3` → `#eeeff2` (Mist Panel) · `--color-text` → `#111a4a` (Column Navy) · `--color-text-muted` → `#7c7f88` (Quiet Gray) · `--color-text-subtle` → `#ffffff` (Paper White) · `--color-border` → `#e3e4e8` (Soft Divider) · `--color-accent` → `#44b48b` (Ledger Green) · `--color-accent-2` → `#ec652b` (Signal Orange) · `--color-accent-3` → `#94efb7` (Mint Highlight)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111a4a` | `#f6f6f8` | 15.31:1 | AAA |
| `#111a4a` | `#ffffff` | 16.53:1 | AAA |
| `#111a4a` | `#011821` | 1.1:1 | fail |
| `#111a4a` | `#eeeff2` | 14.38:1 | AAA |
| `#7c7f88` | `#f6f6f8` | 3.71:1 | AA-large |
| `#7c7f88` | `#ffffff` | 4:1 | AA-large |
| `#7c7f88` | `#011821` | 4.55:1 | AA |
| `#7c7f88` | `#eeeff2` | 3.48:1 | AA-large |
| `#ffffff` | `#f6f6f8` | 1.08:1 | fail |
| `#ffffff` | `#011821` | 18.2:1 | AAA |

### Gradients

- `radial-gradient(circle, rgba(255, 255, 255, 0.075) 0px, rgba(255, 255, 255, 0.075) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(125deg, rgb(214, 86, 32) -3.16%, rgb(159, 122, 238) 14.55%, rgb(69, 117, 205) 32.26%, rgb(113, 210, 240) 49.97%, rgb(68, 180, 139) 67.68%, rgb(244, 223, 105) 85.39%)`
- `radial-gradient(circle at 1px 1px, rgb(207, 208, 216) 1px, rgba(0, 0, 0, 0) 1px)`
- `radial-gradient(rgba(113, 210, 240, 0.15) 25%, rgba(113, 210, 240, 0) 70%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SFMono | `--font-mono` | system | 400 | Code samples, compact captions, and technical labels. | IBM Plex Mono |
| SuisseIntl | `--font-body` | webfont | 300, 500, 400, 600 | Headings, body copy, navigation, links, and buttons. | Inter |
| Inter | `--font-inter` | webfont | 500, 600, 400 | Some product-interface headings and compact UI labels. | Inter |

- **SFMono:** Use monospaced lettering at compact sizes; retain normal weight and avoid decorative styling.
- **SuisseIntl:** Use clean sans-serif forms, restrained medium headings, light body copy, and mostly sentence case.
- **Inter:** Use sparingly for denser product UI; keep labels and interface text crisp and unembellished.

### Type scale — Major Third (ratio ≈ 1.257, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 500 | 1.1 | -0.02em | — | SuisseIntl | Hero headline; concise, prominent statement aligned to the content column. |
| h2 | 28px | 500 | 1.1 | -0.01em | — | SuisseIntl | Major section headings and key explanatory statements. |
| h3 | 24px | 600 | 1.5 | -0.03em | — | Inter | Product and feature subheadings, including denser interface content. |
| h4 | 20px | 500 | 1.1 | 0 | — | SuisseIntl | Smaller feature titles and supporting content headings. |
| body | 16px | 300 | 1.38 | 0 | — | SuisseIntl | Explanatory paragraphs, product descriptions, and customer context. |
| caption | 12px | 400 | 1.5 | 0 | — | SFMono | Compact mono labels, code details, and technical annotations. |
| nav | 14px | 500 | 1 | 0 | — | SuisseIntl | Header navigation and primary menu labels. |
| link | 14px | 300 | 1.5 | 0 | — | SuisseIntl | Secondary navigation, inline references, and footer links. |
| code | 12px | 400 | 1.5 | 0 | — | SFMono | API snippets and developer-facing examples. |

OpenType features in use: `"salt" 2`, `"cv11"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48 px.
- Section rhythm 140px · element gap 4px · card padding — · max content width 1072px.

Use a centered, spacious content grid with a measured page maximum of 1072px. The hero is left-aligned and paired with a large full-bleed dotted map and floating transaction UI. Follow with proof and product stories, then create contrast with a dark infrastructure band. Keep reading columns clear, alternate copy and interface-led areas, and reserve a substantial vertical pause between major sections. Avoid crowding the logo strip and footer navigation.

## Shape & elevation

- Radius: button `8px` · card `8px` · badge `5px` · nav `8px` · link `8px` · xs `5px` · sm `6px` · md `8px` · lg `12px` · pill `9999px`
- Shadow `inset` (other): `rgba(17, 26, 74, 0.1) 0px 1px 3px 0px, rgba(17, 26, 74, 0.05) 0px 1px 0px 0px, rgba(255, 255, 255, 0.5) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.5) 0px 1px 4px 0px inset`
- Shadow `hairline` (text): `rgba(1, 24, 33, 0.05) 0px 0px 0px 1px`
- Shadow `hairline-2` (button): `rgba(255, 255, 255, 0) 0px 1px 1px 0px, rgba(87, 90, 100, 0.12) 0px 0px 0px 1px`
- Shadow `inset-2` (other): `rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset`
- Shadow `xl` (card): `rgba(0, 0, 0, 0.02) 0px 40px 32px 0px, rgba(0, 0, 0, 0.03) 0px 22px 18px 0px, rgba(0, 0, 0, 0.03) 0px 12px 10px 0px, rgba(0, 0, 0, 0.04) 0px 7px 5px 0px, rgba(0, 0, 0, 0.07) 0px 3px 2px 0px`
- Shadow `md` (link): `rgba(0, 0, 0, 0.05) 0px 4px 8px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.1) 0px 1px 1px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Most page areas remain flat, with fine borders defining cards and controls. Interface cards lift gently from the canvas through restrained shadows and white surfaces. Keep the hero transaction panel and API examples visually distinct, but avoid heavy shadows or deep stacked-card effects.

## Imagery

The hero relies on a dotted world map rather than photography, using cool, pale blue-green tones behind the headline and a transaction card. Product mockups, account activity, API snippets, and diagrams appear as interface-led illustrations throughout. Keep these visuals crisp, lightly layered, and legible; use colored gradients and brighter accents mainly inside artwork, not as broad page fills.

## Components

### Announcement strip

A narrow blue-toned message band above the navigation, with centered announcement copy and a small directional cue.

### Header navigation

Column wordmark at left, compact SuisseIntl navigation across the center, and sign-in plus a softly rounded Get started control at right.

### Hero

Left-aligned headline, supporting copy, FDIC label, and paired actions over a dotted world map with a floating transaction interface.

### Primary and secondary buttons

Use a navy #111a4a primary with white text and a white or near-white secondary control; both use an 8px radius.

### Product interface card

White, softly rounded financial UI panels with compact labels, transaction rows, status colors, and developer-oriented details.

### Infrastructure section

A full-width #011821 band containing tightly structured technical content, diagrams, links, and selected bright accents.

### Customer logo strip

A low-profile row of customer marks beneath the hero, spaced evenly and kept visually secondary.

### Measured component styles

- **Primary button** (“Sign up”): background #111a4a · text #ffffff · radius 8px · padding 0px 16px · 500 16px SuisseIntl · shadow rgb(17, 26, 74) 0px 0px 0px 1px, rgba(0, 0, 0, 0.25) 0px 2px 4px 0px, rgba(0, 0,
- **Secondary button** (“Get started”): background #fbfbfc · text #232730 · radius 8px · padding 0px 16px · 500 16px SuisseIntl · shadow rgba(255, 255, 255, 0) 0px 1px 1px 0px, rgba(87, 90, 100, 0.12) 0px 0px 0px 1px
- **Link** (“ACH”): transparent background · text #000000 · radius 8px · padding 8px · 400 16px SuisseIntl
- **Card** (“curl 'https://api.column.com/transfers/a”): transparent background · text #000000 · border 1px solid · radius 8px · padding 0px · 400 16px SuisseIntl · shadow rgba(0, 0, 0, 0.02) 0px 40px 32px 0px, rgba(0, 0, 0, 0.03) 0px 22px 18px 0px, rg
- **Badge** (“Revolving”): background #808b90 · text #021721 · radius 5px · padding 0px 6px · 500 11px Inter
- **Navigation item** (“Products Developers Blog Company”): transparent background · text #12161e · radius 0px · padding 0px · 400 16px SuisseIntl

## Do

- Use #f6f6f8 as the dominant page canvas.
- Anchor key headings and primary actions in #111a4a.
- Keep large areas open and align copy consistently to the content grid.
- Use dotted maps and product UI to explain financial infrastructure.
- Reserve #011821 for a distinct technical section.
- Use green, cyan, orange, and violet accents sparingly inside interface details or artwork.

## Don't

- Do not turn the page into a dark theme; dark color is a section-level contrast.
- Do not use bright accent colors as broad page backgrounds.
- Do not crowd the hero with extra copy or competing visual elements.
- Do not replace the dotted map and UI-led imagery with generic lifestyle photography.
- Do not use heavy shadows or thick borders on every card.
- Do not center every section; preserve the page's strong left-aligned reading flow.

## Agent prompt

Build a new fintech infrastructure page in Column’s visual style. Use Cloud Canvas (#f6f6f8) for the main background, Column Navy (#111a4a) for headings and the primary action, and Quiet Gray (#7c7f88) for supporting text. Keep the layout spacious and centered within the measured 1072px content width, with left-aligned editorial copy. Create a hero that pairs a clear headline with dotted-map artwork and a believable transaction interface card. Use Paper White (#ffffff) panels, fine Soft Divider (#e3e4e8) borders, and restrained shadows. Add a contrasting Deep Harbor (#011821) technical section, with Ledger Green (#44b48b) and other bright accents confined to status details or artwork. Set body and headings in a SuisseIntl-like sans serif; use mono labels for code. Favor legibility, restrained hierarchy, and generous section pauses.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned hero copy over a full-bleed dotted world map, with a transaction UI card to the right. | Primary signup action, Documentation action, FDIC trust label | Dotted map artwork, Floating transaction card, Customer logo strip |
| 2 | stats | Wide, light section with a large left-aligned trust statement and concise supporting proof. | Scale-led credibility, Customer reassurance | Minimal text treatment, Open light canvas |
| 3 | product-showcase | Product story and supporting financial interface arranged in a spacious multi-column composition. | Customer case study, Feature exploration | Transaction UI, Account details, Product tabs |
| 4 | feature-grid | Long, full-width dark section with a structured multi-column arrangement of technical capabilities. | Capability discovery, Developer-oriented links | Technical diagrams, Code and account UI, Green and cyan highlights |
| 5 | category-nav | Light section with a two-column arrangement of audience categories and a concise value proposition. | Audience selection, Use-case discovery | Category links, Compact feature list, Light cards |
| 6 | footer | Spacious closing area with a start-building callout, resource links, and multi-column footer navigation. | Get started conversion, Documentation discovery, Contact sales | CTA text block, Link columns, Developer resources |

## Source CSS custom properties (selected)

```css
--space-auto: auto;
--space-px: 1px;
--space-0: 0px;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-3-5: 0.875rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-7: 1.75rem;
--space-8: 2rem;
--space-9: 2.25rem;
--space-10: 2.5rem;
--space-11: 2.75rem;
--space-12: 3rem;
--space-14: 3.5rem;
--space-16: 4rem;
--space-18: 4.5rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--space-32: 8rem;
--space-36: 9rem;
--space-40: 10rem;
--space-44: 11rem;
--space-48: 12rem;
--space-52: 13rem;
--space-56: 14rem;
--space-60: 15rem;
--space-64: 16rem;
--space-72: 18rem;
--space-80: 20rem;
--space-96: 24rem;
--space-npx: -1px;
--space-n0-5: -0.125rem;
--space-n1: -0.25rem;
--space-n1-5: -;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/column-com