---
version: alpha
name: Column
description: Engineered banking infrastructure — Suisse Intl with mono companion, deep teal-ink canvas, a signature money-green accent, hairline borders and code-block storytelling. Developer-fintech restraint where the API is the product and the type does the talking.
colors:
  # Canvas + ink
  background: "#011821"
  surface: "#0f252d"
  surface-soft: "#172c34"
  surface-raised: "#232730"
  ink: "#ffffff"
  ink-secondary: "#A9ACB6"
  ink-muted: "#6A7E96"

  # Brand accent — money green
  primary: "#167e6c"
  primary-deep: "#0f252d"
  on-primary: "#ffffff"

  # Secondary / supporting accents
  cyan: "#0C6997"
  cyan-light: "#71d2f0"
  blue: "#5366EB"
  blue-soft: "#7ea7e9"

  # Borders + hairlines (flattened over the dark canvas)
  border: "#172c34"
  border-strong: "#354a50"
  divider: "#465962"

  # Light-section inversions
  light-bg: "#ffffff"
  light-ink: "#011821"
  light-surface: "#F0F0F0"
  light-border: "#e3e9f2"
  light-ink-secondary: "#465962"

  # Code / syntax accents
  code-green: "#167e6c"
  code-cyan: "#71d2f0"
  code-amber: "#EC652B"

typography:
  display-hero:
    fontFamily: "SuisseIntl, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "SuisseIntl, Inter, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -1px
  sub-heading:
    fontFamily: "SuisseIntl, Inter, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.6px
  card-title:
    fontFamily: "SuisseIntl, Inter, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "SuisseIntl, Inter, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "SuisseIntl, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "SuisseIntl, Inter, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "SuisseIntl, Inter, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  label-mono:
    fontFamily: "SuisseIntlMono, ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.4px
  caption:
    fontFamily: "SuisseIntl, Inter, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  mono-body:
    fontFamily: "SuisseIntlMono, ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 8px
  xl: 12px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
    borderColor: "{colors.border-strong}"
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 12px 20px
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
    borderColor: "{colors.border}"
  card-raised:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
    borderColor: "{colors.border-strong}"
  code-block:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.code-cyan}"
    typography: "{typography.mono-body}"
    rounded: "{rounded.lg}"
    padding: 16px 20px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 10px 14px
    borderColor: "{colors.border-strong}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"
  metric:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.xl}"
    padding: 32px
---

# Column Design System

## Overview

Column is a nationally chartered bank built for developers, and its website reads exactly like that thesis — banking infrastructure presented with the calm precision of an API reference. The canvas is a deep, near-black teal (`{colors.background}`), not pure black, carrying just enough blue-green warmth to feel like the inside of a terminal rather than a void. Against it, white (`{colors.ink}`) text and a single signature money-green accent (`{colors.primary}`) do all the work. There is no decoration that isn't load-bearing; the design trusts that the audience reads code for a living.

The typographic backbone is Suisse Intl, the Swiss neo-grotesque that signals institutional seriousness without coldness, paired with Suisse Intl Mono for labels, figures, and code. The pairing is the whole identity: marketing copy in the humanist sans, technical truth in the mono. Display headlines sit at large sizes with gentle negative tracking, restrained rather than aggressive — Column wants to look engineered and trustworthy, not flashy. Numbers and transaction data lean on the mono face so account balances and curl examples feel like they came straight from the ledger.

Structurally, the site is built on hairline borders and stacked surfaces rather than heavy shadows. Cards are barely-lighter teal panels (`{colors.surface}`, `{colors.surface-raised}`) separated by thin `{colors.border}` lines, and code blocks — the recurring hero element — render in the deepest surface with cyan and green syntax accents. Storytelling happens through real API requests and JSON responses shown inline, so the developer audience sees the product working before they read a single benefit. Sections occasionally invert to a light background for contrast, but the dark, monochromatic teal world is the home base.

**Key Characteristics:**
- Deep teal-ink canvas (`{colors.background}`) — terminal warmth, not pure black
- Suisse Intl sans paired with Suisse Intl Mono — humanist copy, mono for data and code
- Single money-green brand accent (`{colors.primary}`) used sparingly for CTAs and emphasis
- Hairline borders and stacked teal surfaces instead of heavy shadows
- Code blocks and JSON responses as primary storytelling elements
- Restrained negative tracking on display type — engineered, not loud
- Occasional light-section inversion for rhythm against the dark base

## Colors

### Primary
- **Column Teal** (`{colors.background}`): The page canvas — deep, near-black teal with blue-green warmth.
- **White** (`{colors.ink}`): Primary text, headings, high-contrast labels.
- **Money Green** (`{colors.primary}`): The brand accent — primary CTAs, key emphasis, syntax green.

### Surfaces
- **Surface** (`{colors.surface}`): Standard card panel, one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Subtle tile / badge background.
- **Surface Raised** (`{colors.surface-raised}`): Elevated card on dark sections.
- **Primary Deep** (`{colors.primary-deep}`): Code-block background, deepest panel.

### Text
- **Ink Secondary** (`{colors.ink-secondary}`): Body copy, descriptions on dark.
- **Ink Muted** (`{colors.ink-muted}`): Tertiary metadata, captions.

### Supporting Accents
- **Cyan** (`{colors.cyan}`) / **Cyan Light** (`{colors.cyan-light}`): Secondary highlights, syntax, diagrams.
- **Blue** (`{colors.blue}`) / **Blue Soft** (`{colors.blue-soft}`): Illustration and chart accents.

### Borders
- **Border** (`{colors.border}`): Default hairline between surfaces.
- **Border Strong** (`{colors.border-strong}`): Input and button outlines.
- **Divider** (`{colors.divider}`): Visible section dividers.

### Light Inversions
- **Light Bg** (`{colors.light-bg}`): Inverted section background.
- **Light Ink** (`{colors.light-ink}`): Dark text on light sections.
- **Light Border** (`{colors.light-border}`): Hairlines on light sections.

## Typography

### Font Family
- **Primary**: `SuisseIntl`, with fallbacks `Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`
- **Monospace**: `SuisseIntlMono`, with fallbacks `ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace`
- **Roles**: Sans for all marketing and UI copy; Mono for labels, numbers, account data, and code.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 56px hero headline — restrained negative tracking |
| `section-heading` | Feature section titles |
| `sub-heading` | Card group headings, sub-sections |
| `card-title` | Individual card headings |
| `body-large` | Introductions, feature descriptions |
| `body` | Standard reading text |
| `body-small` | Compact UI text, captions |
| `button-ui` | Buttons and links |
| `label-mono` | Mono eyebrows, technical labels, tags |
| `caption` | Metadata, small print |
| `mono-body` | Code blocks, JSON, terminal output |

### Principles
- **Two faces, two voices**: Suisse Intl carries the human pitch; Suisse Intl Mono carries the machine truth — labels, balances, and code.
- **Restrained tracking**: Display sizes use gentle negative letter-spacing (around -1.6px at 56px) — engineered, never theatrical.
- **Weight discipline**: 400 for body and large display, 500 for headings/UI, 600 reserved for the rare strong emphasis.
- **Numbers in mono**: Financial figures and identifiers always render in the mono face for ledger-like legibility.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px with a 4px half-step. The scale jumps from `{spacing.xl}` (24px) to `{spacing.2xl}` (40px) for generous section breathing room.

### Grid & Container
- Max content width: approximately 1200px, centered
- Hero: left-aligned headline with adjacent code-block / product visual
- Feature sections: 2–3 column grids of bordered cards
- Code examples shown inline alongside narrative copy

### Whitespace Philosophy
- **Quiet density**: Generous vertical padding (`{spacing.3xl}`–`{spacing.4xl}`) between sections; tight, deliberate spacing inside cards.
- **Borders over shadows**: Separation comes from hairline `{colors.border}` lines and surface steps, not elevation.
- **Dark-to-light rhythm**: The teal base occasionally yields to a light-inverted section to reset the eye.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border | Page canvas, text blocks |
| Hairline (Level 1) | `1px solid {colors.border}` | Standard cards, code blocks |
| Strong Border (Level 2) | `1px solid {colors.border-strong}` | Inputs, secondary buttons, raised cards |
| Surface Step (Level 3) | Lighter surface fill (`{colors.surface-raised}`) | Featured / overlapping panels |
| Focus (Accessibility) | `2px solid {colors.primary}` outline | Keyboard focus on interactive elements |

**Depth Philosophy**: Column avoids drop shadows almost entirely. Depth is communicated by stepping up the surface color (`{colors.background}` → `{colors.surface}` → `{colors.surface-raised}`) and drawing thin borders. The effect is architectural and flat — panels read as layered sheets of teal glass rather than floating objects.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed sections, code gutters |
| `xs` | 2px | Inline code, tiny chips |
| `sm` | 4px | Small controls |
| `md` | 6px | Buttons, inputs |
| `lg` | 8px | Code blocks, list items |
| `xl` | 12px | Cards, panels |
| `pill` | 9999px | Badges, status pills |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Money-green fill, white text, `{rounded.md}`. The default CTA.
- **`button-secondary`** — Dark surface with `{colors.border-strong}` outline.
- **`button-ghost`** — Transparent over canvas, muted text — for tertiary links like "Documentation".

### Pills & Badges
- **`badge`** — Soft teal surface, green mono text, full pill. Used for status and section eyebrows.

### Cards
- **`card`** — One-step-up teal surface, hairline border, `{rounded.xl}`.
- **`card-raised`** — Brighter surface with stronger border for featured panels.
- **`metric`** — Large green display number over a dark surface.

### Code
- **`code-block`** — Deepest teal surface, cyan body text, green and amber syntax accents, hairline border. The recurring hero element showing live API requests.

### Inputs
- **`input`** — Dark surface, `{colors.border-strong}` outline, white text. Focus uses `{colors.primary}` outline.

### Navigation
- **`nav-bar`** — Transparent-on-canvas sticky header. Suisse Intl 15px weight 500 links, green primary CTA right-aligned, hairline bottom border.

## Do's and Don'ts

### Do
- Use the deep teal canvas (`{colors.background}`) as the home base, not pure black
- Pair Suisse Intl for copy with Suisse Intl Mono for labels, numbers, and code
- Reserve money green (`{colors.primary}`) for CTAs and meaningful emphasis
- Build depth with surface steps and hairline borders, not shadows
- Render financial figures and identifiers in the mono face
- Show real API requests / JSON responses as product proof

### Don't
- Don't introduce heavy drop shadows — Column is flat and architectural
- Don't overuse the green accent — it loses meaning when decorative
- Don't set body copy in the mono face — mono is for data and code only
- Don't use aggressive negative tracking — keep display type restrained
- Don't put low-contrast gray text directly on the darkest canvas — use `{colors.ink-secondary}` minimum
- Don't add warm decorative colors to UI chrome — supporting accents stay cool (cyan/blue)

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked code blocks |
| Tablet | 600–1024px | 2-column card grids begin |
| Desktop | 1024–1200px | Full multi-column layout |
| Large Desktop | >1200px | Centered, max content width |

### Collapsing Strategy
- Hero: side-by-side headline + code visual → stacked vertical
- Feature cards: 3-column → 2-column → single column
- Code blocks: maintain mono legibility, horizontal scroll if needed
- Navigation: inline links → hamburger menu
- Section padding: `{spacing.4xl}` → `{spacing.2xl}` on mobile

### Touch Targets
- Buttons use comfortable 12px vertical padding
- Nav links at 15px with adequate spacing
- Badges have 10px horizontal padding for tap comfort

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Column Teal `{colors.background}`
- Heading text: White `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Primary CTA: Money Green `{colors.primary}`
- Border (hairline): `1px solid {colors.border}`
- Code surface: `{colors.primary-deep}`
- Focus ring: Money Green `{colors.primary}`

### Example Component Prompts
- "Create a hero on deep teal `{colors.background}`. Headline at 56px Suisse Intl weight 400, letter-spacing -1.6px, color `{colors.ink}`. Subtitle at 18px weight 400, color `{colors.ink-secondary}`. Green CTA button (`{colors.primary}`, 6px radius, white text) and ghost 'Documentation' link in `{colors.ink-secondary}`."
- "Design a card: surface `{colors.surface}`, 1px solid `{colors.border}`, 12px radius, 24px padding. Title 20px Suisse Intl weight 500, body 16px weight 400 in `{colors.ink-secondary}`."
- "Build a code block: background `{colors.primary-deep}`, 13px Suisse Intl Mono, cyan `{colors.code-cyan}` text with green `{colors.primary}` and amber `{colors.code-amber}` syntax accents, 8px radius, hairline border."
- "Create a status badge: `{colors.surface-soft}` background, `{colors.primary}` mono text, 9999px radius, 4px 10px padding, 12px Suisse Intl Mono."

### Iteration Guide
1. Start from the deep teal canvas and build up surfaces by lightening, not by adding shadows
2. Keep green as the single brand accent — every other color is supporting and cool
3. Mono face for anything numeric, technical, or code; sans for everything else
4. Borders are hairline `{colors.border}`; strong borders only on interactive chrome
5. Display type uses gentle negative tracking — institutional, not theatrical

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Column. Brand names and trademarks belong to their respective owners.