Column uses a deep-navy institutional language on a near-white canvas: the page reads as a trustworthy banking product surface first, a developer playground second. Brand color is not a single hue but a coordinated pair — indigo navy #111a4a for serious structure, seafoam green #44b48b for data and code — with one warm orange (#ec652b) reserved for high-signal accent surfaces like the Brex card. Typography is dominated by SuisseIntl, a geometric grotesque used across the full weight range from 300 (links) through 600 (display), which gives the system a refined, editorial register most fintechs lack. Cards float on generous white surfaces with subtle multi-layer shadows; most UI chrome is flat, with depth appearing only where a card needs to feel like a physical object (transaction widgets, product mockups). Code and financial data live in monospace, tinted seafoam — a visual signal that this is a bank built by engineers, for engineers.
#111a4aPrimary brand color — filled CTAs, navigation active states, heading text, logo wordmark. The deep violet-tinted navy carries institutional weight without going pure black; pairs with white text for the site's most confident button
#44b48bCode and data text — the signature color for JSON keys, identifiers, and financial values in code snippets. Also used for chart data points and growth visualizations
#167e6cDarker seafoam for strokes, chart lines, and icon accents in data contexts. Anchors the seafoam scale on darker backgrounds
#94efb7Highlighted code text — string values, URLs, API endpoints in code blocks. The lightest seafoam, reads as green-tinted monospace
#023247Decorative stroke and chart accent — deep teal used in SVG illustrations and data visualizations alongside the seafoam scale
#ec652bAccent CTA fill and featured card background — one of the few saturated warm colors in the system. Appears on the Brex highlight card and select buttons to draw the eye without feeling decorative
#f2936bSoft accent surface — lighter companion to Signal Orange, used as card backgrounds where warmth is needed at lower intensity
#88deebSoft accent surface and stroke — appears as background washes behind data widgets and as decorative chart strokes
#1e4199Violet wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color
#0c6997Decorative fill — medium blue used in illustration and SVG contexts
#011821Dark surface and emphasis text — product card backgrounds, high-contrast body copy. Near-gray with a cool blue-green undertone; works as the dark-mode substrate when a section needs to invert
#3b3e47Secondary heading and body text — slightly warmer than Midnight Ink, used where pure black feels too harsh against the light canvas
#7c7f88Body and link text — the dominant muted text color (245 occurrences in body). Neutral gray-blue that reads as quiet, never washed out
#a9acb6Icon strokes, tertiary borders, placeholder text. Mid-gray that separates without competing with text
#cbcccfLightest body text — captions, disclaimers, fine print. Stays legible on white but recedes visually
#e3e4e8Card borders, input borders, divider lines. The structural hairline color — appears wherever two surfaces need to separate without shadow
#f6f6f8Page background — the dominant canvas color. Near-white with a barely-perceptible cool tint that keeps the page from feeling sterile
#ffffffCard surfaces, nav background, button fills, secondary text. The top layer of the surface stack
#232730Nav icons, dark icon strokes — slightly bluer than pure black, used in icon contexts where Slate Ink would be too warm
#12161eDeep icon strokes and nav elements. Near-black with a blue undertone that matches the indigo navy family
#000000Maximum contrast text, dark fills in illustrations. Used sparingly — Indigo Navy or Slate Ink carry most text work
60px · 600 · 1 · -0.6px trackingThe quick brown fox jumps
52px · 600 · 1.1 · -1.56px trackingThe quick brown fox jumps
48px · 500 · 1.1 · -0.96px trackingThe quick brown fox jumps
40px · 500 · 1.1 · -0.8px trackingThe quick brown fox jumps
28px · 500 · 1.1 · -0.28px trackingThe quick brown fox jumps
24px · 500 · 1.1The quick brown fox jumps
20px · 500 · 1.1 · -0.2px trackingThe quick brown fox jumps
18px · 400 · 1.33 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface — used for all headings, body, buttons, nav, links, and card text. The custom geometric grotesque gives Column a distinctive editorial register that distinguishes it from Inter-only fintechs. Weight 600 at 52–60px for display, weight 500 for sub-headings, weight 400 for body, weight 300 for low-emphasis links.
Monospace companion to SuisseIntl — used for technical labels, API identifiers, and inline data in UI chrome. Maintains the same proportions as SuisseIntl so mono and proportional text align cleanly in mixed contexts.
Code snippet rendering — appears in JSON examples and API documentation blocks. Tinted in seafoam green scale to visually distinguish code from UI prose.
UI fallback font — used in dashboard and product surface contexts where Inter's wider character set and system familiarity take priority over brand identity.
9999px8px8px8px8px1px2px4px6px8px12px16px20px24px32px40px48px64px72px80px96px100px140px144px145px157px288pxBackground: #111a4a (Indigo Navy). Text: #ffffff, 14px SuisseIntl weight 500, letter-spacing normal. Border: none. Radius: 8px. Padding: 12px top/bottom, 20px left/right. Arrow icon after label. Box-shadow: rgba(17,26,74,0.1) 0px 1px 3px, rgba(17,26,74,0.05) 0px 1px 0px, with inset white highlight for slight inner luminosity. Used for 'Sign up' and top-of-page conversion actions.
Background: transparent. Text: #111a4a, 14px SuisseIntl weight 500. Border: 1px solid #111a4a. Radius: 8px. Padding: 12px top/bottom, 32px left/right. No arrow by default. Used for 'Documentation' and 'Learn about our bank' — sits beside the primary without competing.
Background: rgba(255,255,255,0.25) with backdrop blur. Text: #000000, 14px SuisseIntl weight 400. Border: 1px solid #ffffff. Radius: 8px. Padding: 6px top/bottom, 12px left/right. Chevron icon for dropdowns. Frosted-glass effect sits over the hero background.
Background: rgba(255,255,255,0.5). Text: #232730, 12–14px SuisseIntl weight 400. Border: 1px solid #e3e4e8. Radius: 8px (not fully rounded). Padding: 0px vertical, 16px horizontal for compact alignment.
Background: #ec652b (Signal Orange). Text: #ffffff, 14px SuisseIntl weight 500. Border: none. Radius: 8px. Padding: 12px top/bottom, 20px left/right. Appears on the Brex highlight card and select promotional surfaces — never on the primary nav.
Background: rgba(2,50,71,0.01) (near-transparent with the faintest blue-green tint). Radius: 8px. Box-shadow: five-layer progressive shadow stack — rgba(0,0,0,0.02) at 40px/32px, 0.03 at 22px/18px, 0.03 at 12px/10px, 0.04 at 7px/5px, 0.07 at 3px/2px. Padding: 0 (content is positioned absolutely inside). No border. The shadow stack creates a diffused, hovering presence rather than a hard card edge.
Background: #ffffff. Radius: 8px. Box-shadow: rgba(30,30,44,0.15) 24px 48px 64px — a dramatic, off-axis shadow that makes the widget feel like it's floating above the hero. Inset border: 1px solid #ffffff. Padding: 12px top/bottom, 0 left/right. Contains flag icons, amount text (SuisseIntl weight 500, 16–18px), and status badges.
Background: #ffffff. Radius: 8px. Box-shadow: rgba(18,22,30,0.024) 0px 1px 4px, rgba(18,22,30,0.05) 0px 1px 0px, rgba(18,22,30,0.024) 0px 0px 0px 1px — combines a hairline border with a whisper of shadow. Padding: 12px all sides.
Background: #ffffff. Radius: 8px. Monospace: SFMono 12px, line-height 1.5. Keys tinted #167e6c (Seafoam 700), string values #94efb7 (Seafoam 400), structural brackets in #232730. The entire block reads as a data object rather than formatted prose.
Background: rgba(255,255,255,0.8) with backdrop blur(8px). Text: #000000, 10–12px SuisseIntl weight 400. Radius: 9999px (full pill). Padding: 4px 12px. Semi-transparent so it floats over the hero gradient without blocking it.
Background: rgba(0,0,0,0) (transparent, sits over light backgrounds). Text: #000000 or #111a4a, 12px SuisseIntl weight 500, uppercase, letter-spacing slightly expanded. Small green or blue dot prefix for category color. Radius: 0 (no rounding — reads as a label, not a chip).
Background: #ffffff or transparent. Individual logos rendered as flat monochrome SVG at 16–20px height, #000000 or #7c7f88. Spacing: 48px between logos. No card chrome — logos sit directly on the canvas with whitespace as separator.
Background: #ec652b (Signal Orange) for the primary featured card, or #ffffff for secondary. Radius: 8px. Contains SwissIntl amount text at 24px weight 500, small chart line in white at 60% opacity, and account metadata in 12px weight 400. The orange variant is the system's most saturated surface — used at most once per page.
Four-column grid with no dividers. Each stat: number in #167e6c (Seafoam 700) at 28px SuisseIntl weight 500, label in #7c7f88 at 14px weight 400 below. 48px row gap. The seafoam number color ties the stats to the data/code visual language.
#f6f6f8Base page background — the near-white cool-tinted surface that fills the viewport.
#ffffffTop of the surface stack — content cards, transaction widgets, code blocks all sit here.
#ffffff80Translucent layer for nav pills, badges, and overlays that need to hint at background content beneath.
#88deebDecorative background wash — used as soft accent behind data sections and chart areas.
#f2936bFeatured accent card background — the highest-signal warm surface, used at most once per page for the Brex highlight.
#011821Dark mode inversion — appears when a section needs to flip to dark navy for contrast.
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
rgba(30,30,44,0.15) 24px 48px 64px 0px, rgb(255,255,255) 0px 0px 0px 1px inset
rgba(18,22,30,0.024) 0px 1px 4px 0px, rgba(18,22,30,0.05) 0px 1px 0px 0px, rgba(18,22,30,0.024) 0px 0px 0px 1px
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
Full-page structure is max-width 1200px centered with generous side margins (64–80px on desktop). Hero is a split layout — headline and CTAs left-aligned at 40% width, with a floating transaction widget positioned right at 55–70% width over the halftone map background. Below the hero, sections alternate between white (#ffffff) and the light canvas (#f6f6f8) with 72px vertical gaps. Content arrangement follows a consistent 6-column grid: text blocks span 4 columns (66%), image/product cards span 5–6 columns with deliberate off-grid positioning. Feature sections use a 2-column text-left/product-right pattern. The trust stats section breaks to a full-width 4-column equal grid. Customer logos sit in a single centered row with 48px gaps. The footer is compact, 2-column layout. Navigation is a fixed top bar, 62px tall, transparent over the hero with backdrop blur, transitioning to white on scroll. No sidebar, no mega-menu — dropdowns are simple chevron menus.
Imagery is minimal and functional — Column avoids stock photography entirely. The visual language is built from three sources: (1) SVG data illustrations, specifically a dotted halftone world map rendered in indigo-to-orange-to-seafoam gradient dots that creates a global-scale atmosphere behind the hero; (2) product mockup cards — floating widgets showing account balances, transfer details, and JSON code snippets in white cards with dramatic shadows; (3) chart visualizations — candlestick or bar charts in seafoam green with thin connecting lines, used in the trust/stats section. The halftone map is the signature visual element — its gradient transitions from #d65620 (orange) through violet, blue, sky cyan, seafoam, to yellow, creating a spectrum that ties together the entire brand palette in a single decorative surface. Icons are uniformly outlined at 1.5–2px stroke weight in #232730 or #a9acb6, with filled variants for active states. No lifestyle photography, no abstract 3D renders — the restraint is deliberate, keeping focus on product and data.
## Quick Color Reference - Background: #f6f6f8 - Card surface: #ffffff - Primary text: #111a4a (Indigo Navy) - Muted text: #7c7f88 (Steel) - Accent: #ec652b (Signal Orange) — reserve for one featured surface per page - primary action: #ec652b (filled action) ## Example Component Prompts 1. Create a Primary Action Button: #ec652b background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 2. **Create a trust stats row**: Four equal columns on #f6f6f8 canvas, 48px gaps. Each stat: number at 28px SuisseIntl weight 500, #167e6c (Seafoam 700). Label below at 14px weight 400, #7c7f88. No dividers between columns. 3. **Create a code block**: #ffffff background, 8px radius, simple hairline border (rgba(18,22,30,0.024) 0 0 0 1px). Content in SFMono 12px line-height 1.5. Keys in #167e6c, string values in #94efb7, brackets and structure in #232730. Padding: 24px all sides. 4. **Create a customer logo bar**: Single horizontal row on #ffffff background. Logos at 16–20px height, monochrome in #000000 or #7c7f88. 48px gap between logos. Centered, no card chrome.
The halftone world map is Column's most distinctive decorative asset — a field of small dots arranged in a grid pattern, with each dot sized and colored according to a spectrum gradient: orange (#d65620) → violet (#9f7aee) → blue (#4575cd) → sky cyan (#71d2f0) → seafoam (#44b48b) → yellow (#f4df69). Dots are 2–4px in diameter, spaced 8–10px apart, covering a world map silhouette. The gradient creates a sense of global connectivity and financial flow without literal illustration. This gradient should not be reused on UI elements — it belongs only on the map illustration.
SuisseIntl's character variants ('salt' 2) subtly modify the typeface's default letterforms — the single-story 'a' and other alternates give the font a warmer, more editorial feel than its Swiss grotesque origins. This is a deliberate choice: most fintechs use Inter or Söhne, which read as generic and tech-forward. SuisseIntl reads as institutional and considered, like the type you'd find in a private bank's annual report. The weight range (300–600) is used fully — weight 300 appears on low-emphasis links (a deliberate softening), weight 600 only on the largest display sizes. This range gives the system tonal flexibility most single-weight systems lack.
Same navy-and-orange dual-accent palette on light backgrounds, same institutional-but-modern fintech register, similar card-driven layout with floating product widgets.
Deep navy typography on near-white canvas, restrained use of a single warm accent, developer-focused financial product language with code-adjacent typography.
Light canvas with deep navy primary text, white card surfaces with subtle shadows, and a visual language built around data and product mockups rather than photography.
Max-width centered layout, dramatic card shadows on floating product widgets, geometric grotesque typography, and the same restraint in using color as functional punctuation.
Trust-forward fintech aesthetic with a near-white canvas, deep brand text color, and a visual system that prioritizes data clarity and institutional credibility over decorative flourish.
Use the design exports or connect Musterlab to your AI.
