---
name: Column
description: "This site is a great example of high-end fintech design, balancing professionalism with a modern, developer-friendly aesthetic."
version: alpha

colors:
  background: "#F6F6F8"
  primary: "#121620"
  secondary: "#7C7F88"
  neutral: "#7EADFF"
  bg-soft: "#FFFFFF"
  line: "rgba(227, 228, 232, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.05
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 3px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

A nationally chartered bank for building and funding new financial products.

*Stripe for banking*

## Colors

Clean, high-contrast neutrals with a single blue accent.

- **Background (`#F6F6F8`)** — uses `bg` token
- **Primary text (`#121620`)** — uses `ink` token
- **Secondary text (`#7C7F88`)** — uses `ink-soft` token
- **Muted (`#7EADFF`)** — uses `muted` token
- **Borders (`rgba(227, 228, 232, 1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

## Layout

12-column grid

*Rhythm:* 8px base unit

## Elevation & Depth

- rgba(1, 24, 33, 0.05) 0px 0px 0px 1px
- rgba(17, 26, 74, 0.1) 0px 1px 3px 0px
- Borders: 1px solid #E3E4E8

## Shapes

- `sm`: 3px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Minimalist, text or ghost buttons.
- **card:** Subtle shadow and border.
- **chip:** Simple, rounded tags.
- **input:** Standard form elements.
- **hero:** Split layout with headline and illustration.

## Do's and Don'ts

**Don't:**
- Don't use decorative patterns — screenshot shows a clean, dot-based world map.
- Don't use heavy drop shadows — screenshot shows very subtle, layered box shadows.
- Don't use italicized text — screenshot shows only regular and bold weights.
- Don't use multiple accent colors — screenshot shows a blue-based palette.
- Don't use rounded cards — screenshot shows sharp or slightly rounded corners.
- Don't use overly playful typography — screenshot shows a professional, geometric sans-serif.

---

## System Prompt (paste into AI agent)

```
The design is a premium, developer-focused fintech platform. Key colors are a light gray (#F6F6F8) background, deep navy (#121616) text, and a bright blue (#7EADFF) accent. The typography uses a geometric sans-serif for headlines and body, with a monospace font for code snippets. Critical donts include: avoid heavy drop shadows, avoid playful typography, avoid complex decorative elements, avoid low contrast, avoid bright or neon colors, and avoid overly rounded shapes.
```