# Design Reference - Column
> Architectural blueprint on white marble. Subtle background patterns convey structure beneath a pristine, luminous surface, punctuated by precise, high-contrast markers.

## Source
- Original site: https://column.com
- Captured: 2026-04-11T18:51:18.967Z

## Tags
- clean
- technical
- corporate
- minimal
- structured
- secure
- precise
- authoritative

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Ink Blue | `#011821` | neutral | Primary text color for headings and body copy, grounding the design. |
| Code Black | `#000000` | neutral | Used for critical text elements and strong outlines, providing maximum contrast and emphasis. |
| Ghost White | `#ffffff` | neutral | Primary background for pages and cards, fostering a sense of openness and purity. |
| Fog Gray | `#f6f6f8` | neutral | Secondary background for sections and subtle content groupings, almost imperceptibly off-white to provide visual separation. |
| Steel Gray | `#e3e4e8` | neutral | Subtle borders and separators, defining boundaries without starkness. |
| Charcoal Text | `#232730` | neutral | Text on lighter backgrounds for softer contrast than pure black, often used in navigation and body text. |
| Slate Text | `#7c7f88` | neutral | Contextual body text and secondary labels, offering readability without competing with primary elements. |
| Graphite | `#12161` | neutral | Darker shades for text and icons, particularly on hero sections, for depth. |
| Deep Plum | `#111a4a` | brand | Brand accent for interactive elements, icons, and significant textual highlights, establishing Column's brand identity. |
| Action Orange | `#ec652b` | accent | Primary call-to-action buttons and key interactive states, drawing immediate attention. |
| Soft Horizon Gradient | `#d65620` | brand | Decorative background for banners, imbuing sections with a sense of expansive, technological potential. |
| Faded Grid Blue | `#023247` | brand | Illustrative elements and background patterns, adding a subtle technical depth. |
| Success Moss | `#44b48b` | semantic | Status indicators and affirmation icons, providing a clear visual cue for positive outcomes. |
| Radial Twilight Gradient | `#771c86` | brand | Subtle, localized background gradient to highlight specific sections with a deep, cosmic feel. |
| Info Blue | `#7ea7e9` | semantic | Informational graphics and secondary accents, providing a cooler tonal balance. |
| Callout Cyan | `#167e6c` | accent | Highlight elements and secondary interactive states, offering a complementary accent to the orange. |
| Notification Teal | `#88deeb` | accent | Subtle highlights and supporting iconography, a brighter counterpart to Callout Cyan. |

## Typography
- role: Primary typeface for all main content, headings, and UI elements. Its clean, slightly compressed letterforms convey efficiency and sophistication. Weight 600 at 48px headlines commands attention with quiet confidence; weight 300 for subheadings at 28px adds a subtle, approachable gravity. The variable letter-spacing (up to -0.03em at larger sizes) tightens display text for visual impact.; sizes: 11px, 12px, 14px, 16px, 18px, 20px, 24px, 28px, 40px, 48px, 52px, 60px; family: SuisseIntl; weight: 300, 400, 500, 600; weights: 300, 400, 500, 600; lineHeight: 1.00, 1.10, 1.30, 1.33, 1.38, 1.40, 1.43, 1.50; substitute: Inter; letterSpacing: -0.03em, -0.02em, -0.01em; fontFeatureSettings: "salt" 2
- role: Monospaced font for code snippets, financial figures, and technical labels, ensuring precise alignment and clarity for data-driven content. Its consistent width emphasizes the accuracy inherent in banking operations.; sizes: 10px, 12px; family: SFMono; weight: 400; weights: 400; lineHeight: 1.50; substitute: IBM Plex Mono; letterSpacing: normal; fontFeatureSettings: "cv11"; "salt" 2
- role: Secondary typeface, primarily for detailed body text and supporting UI elements. Provides similar legibility to SuisseIntl but with slightly more open letterforms at smaller sizes, aiding readability in high-information densities.; sizes: 10px, 12px, 14px, 16px, 20px, 24px; family: Inter; weight: 400, 500, 600; weights: 400, 500, 600; lineHeight: 1.00, 1.10, 1.14, 1.33, 1.50; letterSpacing: -0.03em, -0.02em; fontFeatureSettings: "cv11"
- role: Specialized monospaced font for technical outputs and code display within the UI, complementing SFMono for specific interactive code contexts. Its presence reinforces the developer-centric aspect of Column.; sizes: 10px, 12px, 14px; family: SuisseIntlMono; weight: 400; weights: 400; lineHeight: 1.50; substitute: IBM Plex Mono; letterSpacing: normal; fontFeatureSettings: "cv11"; "salt" 2

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "cards": "8px",
      "subtle": "2px",
      "buttons": "8px",
      "default": "8px"
    },
    "elementGap": "",
    "sectionGap": "48px",
    "cardPadding": ""
  },
  "radius": {
    "cards": "8px",
    "subtle": "2px",
    "buttons": "8px",
    "default": "8px"
  }
}
```

## Component Patterns
- name: CTA Button Group
- name: Account Balance Card
- name: Testimonial + Feature Badge Card
- name: Primary Navigation Link; role: Navigation
- name: Ghost Button - Inverted; role: Secondary interaction in dark contexts
- name: Ghost Button - Light; role: Secondary interaction in light contexts
- name: Nav Button - Light Text; role: Interaction in transparent sections
- name: Card - Callout Orange; role: Prominent information highlight
- name: Badge - Transparent; role: Categorization or small label
- name: Secondary Button - Outlined; role: Alternative interaction

## Do
- Use `Fog Gray` (#f6f6f8) for secondary section backgrounds to create subtle visual breaks, not just `Ghost White` (#ffffff).
- Apply `SuisseIntl` with a negative letter-spacing (-0.02em to -0.03em) for all headlines 28px and larger, tightening the text for a refined, modern feel.
- Borders on interactive elements should primarily use `Steel Gray` (#e3e4e8), providing definition without harshness.
- All cards and buttons should consistently use an `8px` border-radius for a soft, approachable geometry, except when specific components dictate otherwise.
- Emphasize critical actions with the `Action Orange` (#ec652b) background, reserving `Deep Plum` (#111a4a) primarily for non-primary interactive elements and brand accents.
- Use `SFMono` or `SuisseIntlMono` at 10-12px for all numerical data and code snippets to ensure alignment and technical precision.
- Enhance surface depth with the subtle card shadow: `rgba(17, 26, 74, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(255, 255, 255, 0.5) 0px 0px 0px 1px inset`.

## Don't
- Do not use generic blue for primary interactive elements; save `Info Blue` (#7ea7e9) for graphics and non-actionable information to prevent dilution of `Deep Plum` and `Action Orange`.
- Avoid arbitrary uses of vivid colors; `Success Moss` (#44b48b) and `Notification Teal` (#88deeb) are reserved for semantic feedback, not decorative elements.
- Do not deviate from the `8px` default border-radius for primary UI elements across buttons and cards; exceptions are only for badges or specific component variants.
- Do not apply heavy, opaque box-shadows; the system relies on subtle, layered shadows to suggest depth and elevation.
- Avoid using `Code Black` (#000000) for large blocks of text; opt for `Ink Blue` (#011821) or `Charcoal Text` (#232730) for better readability and a softer appearance.
- Do not introduce new typefaces; `SuisseIntl` is for visual impact and headings, `Inter` for general readability, and monospaced fonts for technical context.
- Do not break the established vertical rhythm of 48px `sectionGap` and `24px` `elementGap` in content arrangements; maintain spaciousness.