Column

Overview

Column is a nationally chartered bank platform engineered for developers and builders to create new financial services at scale. The design system embodies **Institutional Minimalism**—a refined aesthetic that marries the precision of fintech with the gravitas of traditional banking. The visual language prioritizes clarity over decoration: clean typography, restrained color palette (navy, white, and strategic accent blue), and generous whitespace create an environment where complex financial operations feel approachable and trustworthy. The brand personality is direct, competent, and human-centered; it speaks to builders with respect for their intelligence and time. Voice example: "Move, hold, and lend the dollar at scale—no legacy friction, no hidden complexity."

The UI philosophy rejects both the cold austerity of enterprise software and the playful informality of consumer apps. Instead, Column adopts a **precision-first** approach: every pixel serves a function, every interaction is predictable, and every color choice signals intent. The design system is built for extensibility—developers must be able to compose reliable, consistent interfaces across dozens of financial products without reinventing the wheel. Tone is confident but never arrogant; helpful but never patronizing. The system communicates through restraint: a single accent blue (#0c6997) on CTAs, a dark navy (#0b1b34) for secondary actions, and a red (#d80027) reserved exclusively for errors and critical warnings.

Colors

Column's color system operates on a principle of **semantic clarity**: every color carries institutional meaning. The primary accent blue (#0c6997) appears exclusively on primary call-to-action buttons, active states, and brand-critical interactive elements—it signals "this is the main action." The secondary navy (#0b1b34) grounds the interface with authority and is used for secondary buttons, headers, and structural elements that establish hierarchy. The error red (#d80027) is reserved strictly for destructive actions, validation failures, and critical alerts; it must never appear in decorative contexts. The surface stack (white #ffffff down to #e3e9f2) provides subtle depth without visual noise: use surface-container-lowest (#f9fafb) for card backgrounds, surface-container (#eff1f5) for

Typography

The type system uses SuisseIntl as the primary typeface—a geometric sans-serif that conveys both precision and approachability. Display (60px, 600 weight, -0.02em tracking) is reserved for hero headlines and major page titles; it must never be used in body copy or UI labels. Headline-lg (52px, 600 weight) anchors major sections; headline-md (36px, 600 weight) breaks up content hierarchically. Title-lg (24px, 600 weight) is the workhorse for card titles and subsection headers. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry all narrative content; use body-lg for introductory paragraphs and body-md for standard body text. Label-md (14px, 500 weight, 0.01em tracking) is mandatory for button text, form labels, and UI microcopy; label-sm (12px, 500 weight, 0.02em tracking) for h

Layout

Column uses a 12-column grid system with a maximum container width of 1280px; this allows flexible layouts that scale from mobile (single column) to desktop (multi-column) without awkward breakpoints. The gutter between grid columns is 24px; maintain this spacing consistently across all breakpoints. Whitespace is semantic: use lg spacing (40px) to separate major sections, md spacing (24px) for component padding and section margins, sm spacing (12px) for internal component spacing, and xs spacing (4px) for micro-interactions like icon-to-text gaps. The page rhythm follows a 8px baseline grid—all measurements should be multiples of 8px (8, 16, 24, 32, 40, 48, 56, 64, etc.). Cards and containers use md spacing (24px) for internal padding; buttons use 12px vertical and 24px horizontal padding.

Elevation & Depth

Depth in Column is achieved through subtle shadows and strategic layering, never through color darkening or blur effects. The elevation system has three tiers: Level 1 (sm shadow: 0 1px 2px rgba(0, 0, 0, 0.06)) is used for cards, input fields, and subtle surface separation—it's barely perceptible and used for the majority of UI elements. Level 2 (md shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) is applied to modals, dropdowns, and elevated cards that need to feel distinctly above the base surface; use this sparingly. Level 3 (lg shadow: 0 8px 24px rgba(0, 0, 0, 0.12)) is reserved for full-page overla

Shapes

Column adopts **Architectural Precision** as its shape philosophy: rounded corners are minimal and functional, never decorative. Buttons use lg radius (1rem / 16px) to signal interactivity and create a subtle softness that feels approachable without sacrificing professionalism. Cards and containers use md radius (0.75rem / 12px) for a slightly sharper appearance that reinforces structure and hierarchy. Input fields use DEFAULT radius (0.5rem / 8px) to feel compact and form-like. Badges and pills use full radius (9999px) to create a distinct visual category separate from structural elements. Th

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. Primary buttons (button-primary) use the accent blue (#0c6997) background with white text, 48px height, 12px vertical and 24px horizontal padding, and lg radius (16px). On hover, the background darkens to #0a5278 with a 200ms ease-out transition; on active/pressed, it darkens further to #083d56. Secondary buttons (button-secondary) use the navy background (#0b1b34) with the same dimensions and padding; hover state is #081428. Ghost buttons (button-ghost) use a semi-transparent white background (rgba(255, 255, 255, 0.5)) with dark text (#232730), useful for tertiary actions or light backgrounds; hover state increases opacity to rgba(255, 255, 255, 0.7). All buttons must have a minimum tou

Do's and Don'ts

**Do**

• Do use the primary blue (#0c6997) exclusively for primary CTAs, active states, and focus indicators—never use it for decorative elements or secondary actions.
• Do maintain the 8px baseline grid for all spacing measurements; every margin, padding, and dimension should be a multiple of 8px (8, 16, 24, 32, 40, 48, 56, 64, etc.).
• Do apply sm elevation shadow (0 1px 2px rgba(0, 0, 0, 0.06)) to cards and surfaces by default; reserve md and lg shadows for modals and critical overlays only.
• Do use SuisseIntl at 600 weight for all headlines and titles; never use 400 weight for headings—it reads as body text and breaks hierarchy.
• Do ensure all interactive elements have a minimum touch target of 48×48px and a clear focus state with 3px box-shadow using primary color at 10% opacity.
• Do left-align all body text and paragraph content; center alignment is forbidden except for hero headlines and single-line labels.
• Do transition all color and shadow changes over 200ms using ease-out timing to create smooth, predictable interactions.
• Do reserve the error red (#d80027) strictly for destructive actions, validation errors, and critical alerts; never use it for informational or success states.

**Don't**

• Don't use gradients, blur effects, or glassmorphism—Column's aesthetic is flat, precise, and institutional; visual depth comes from shadows and layering only.
• Don't mix font families within a single component or section; SuisseIntl is the primary typeface for all UI and body text.
• Don't create custom button styles or colors; all buttons must use one of the defined button components (primary, secondary, or ghost) with their exact specifications.
• Don't apply border-radius greater than 50% of an element's smallest dimension; a 40px-tall button should never have more than 20px radius.
• Don't use center-aligned body text or paragraph content; it reduces readability and violates the institutional minimalism aesthetic.
• Don't apply multiple shadows to a single element; each component should have exactly one shadow value from the elevation scale.
• Don't use the secondary navy (#0b1b34) for primary CTAs or interactive highlights; it is reserved for secondary actions and structural elements only.
• Don't forget to include focus states with 3px box-shadow on all interactive elements; keyboard navigation must be fully supported and visually distinct.