# Design Reference - Column
> Architectural blueprint on white marble with precise, high-contrast markers.

Theme: light
Industry: fintech
Captured: 2026-04-11T18:51:18.967Z

## Source
- Source: Public source
- Source URL: https://column.com
- Original site: https://column.com
- License note: Publicly visible design reference metadata. Use as inspiration and token guidance, not as copied brand assets.

## Technical Summary
A light operational system built from near-white surfaces, faint structural borders, tight sans typography, and orange/plum action hierarchy. Useful for finance, infrastructure, and data-heavy dashboards that need to feel precise without becoming visually dense.

## Tags
- fintech
- light
- technical
- structured
- precise

## Colors
| Name | Value | Token | Group | Role |
| --- | --- | --- | --- | --- |
| Ink Blue | `#011821` | `--color-ink-blue` | neutral | Primary text and headings. |
| Ghost White | `#ffffff` | `--color-ghost-white` | surface | Page and card surface. |
| Fog Gray | `#f6f6f8` | `--color-fog-gray` | surface | Secondary section background. |
| Steel Gray | `#e3e4e8` | `--color-steel-gray` | neutral | Borders and dividers. |
| Deep Plum | `#111a4a` | `--color-deep-plum` | brand | Brand accent and secondary action. |
| Action Orange | `#ec652b` | `--color-action-orange` | accent | Primary action and high-attention markers. |
| Callout Cyan | `#167e6c` | `--color-callout-cyan` | semantic | Secondary confirmation and callout state. |

## Typography
### Suisse-style Sans - `--font-suisse-style`
Compressed-feeling UI and headline typography with controlled tracking.
- Family: `Inter, ui-sans-serif, system-ui, sans-serif`
- Weights: 300, 400, 500, 600
- Sizes: 11px, 12px, 14px, 18px, 24px, 40px, 48px
- Line heights: 1, 1.1, 1.33, 1.5

### System Mono - `--font-system-mono`
Numerical values, code, balances, and transaction-like labels.
- Family: `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`
- Weights: 400
- Sizes: 10px, 12px, 14px
- Line heights: 1.5

## Spacing
- Base unit: 4px
- Density: comfortable

| Name | Value | Token |
| --- | --- | --- |
| 4 | `4px` | `--spacing-4` |
| 8 | `8px` | `--spacing-8` |
| 12 | `12px` | `--spacing-12` |
| 16 | `16px` | `--spacing-16` |
| 24 | `24px` | `--spacing-24` |
| 32 | `32px` | `--spacing-32` |
| 48 | `48px` | `--spacing-48` |
| 64 | `64px` | `--spacing-64` |

## Radius
- Default: 8px
- Controls: 8px
- Panels: 8px

## Components
### Primary action
Role: Action
- Orange fill
- 8px radius
- tight horizontal padding
- high contrast against white surfaces

### Product card
Role: Content
- White surface
- subtle border
- low shadow
- mono labels for metrics

### Technical hero
Role: Layout
- Contained 1200px width
- left-aligned text
- product screenshot or abstract diagram on the right

## Do
- Use off-white section breaks.
- Keep borders subtle and visible.
- Reserve orange for the primary action.

## Dont
- Do not use saturated colors as decoration.
- Do not add heavy shadows.
- Do not use pure black for long body copy.