Bankwell Design System Reference

Bankwell is a modern banking platform with the Arcadia design system — 14 color themes, 3 custom typefaces, Next.js + Tailwind CSS v4. This reference covers the marketing site and the product dashboard.

Overview

Bankwell's marketing site uses the "Arcadia" design system with 14 color themes (7 light, 7 dark), three custom typefaces, and a polished conversion-focused component library.

Color Themes

Custom Typefaces

1952px

Max Width

Next.js

Framework

Color System & Themes

14 themed brushworks with #5266eb brand blue as the unifying surface-primary across all themes. Semantic tokens map to background, surface, text, icon, and border roles.

Brand Primary

Brand Blue

#5266eb

Hover

#4355d4

Active

#3a4abc

Light

#b4bdf5

Tint

#eef0fd

Semantic Status

Error

#d03275

Success

#1a8556

Warning

#c47a0a

Info

#2b7de1

Error (dark)

#fc92b4

Success (dark)

#5cc98a

Warning (dark)

#f0b84e

Info (dark)

#7eb6ff

Light Themes

Neutral Light

background

#ffffff

surface-sec

#f7f7f8

surface-pri

#5266eb

text-pri

#0c0d0e

text-sec

#5b5e66

border

#dcdde1

Purple Light

background

#f8f5ff

surface-sec

#ede6fd

surface-pri

#5266eb

text-pri

#1e0f3d

text-sec

#6b5a8a

border

#d8cef0

Beige Light

background

#faf8f5

surface-sec

#f0ebe3

surface-pri

#5266eb

text-pri

#2b2520

text-sec

#7a7068

border

#ddd6cb

Green Light

background

#f4f9f6

surface-sec

#e0f0e8

surface-pri

#5266eb

text-pri

#0f2b1e

text-sec

#4e7a64

border

#c4ddd0

Blue Light

background

#f4f7fd

surface-sec

#e0e8fa

surface-pri

#5266eb

text-pri

#0f1c3d

text-sec

#4e628a

border

#c4d0e8

Orange Light

background

#fdf8f4

surface-sec

#f8ece0

surface-pri

#5266eb

text-pri

#3d200f

text-sec

#8a6a4e

border

#e8d4c0

Warm Neutral Light

background

#faf9f7

surface-sec

#f0eee9

surface-pri

#5266eb

text-pri

#1c1a16

text-sec

#6e6b63

border

#dddad3

Dark Themes

Neutral Dark

background

#0c0d0e

surface-sec

#1a1a1e

surface-pri

#5266eb

text-pri

#e5e5e8

text-sec

#8b8d95

border

#333338

Purple Dark

background

#110d1c

surface-sec

#1e1830

surface-pri

#5266eb

text-pri

#e2dced

text-sec

#8a80a0

border

#38304a

Beige Dark

background

#141210

surface-sec

#221f1a

surface-pri

#5266eb

text-pri

#e8e2d8

text-sec

#9a8f82

border

#3d3730

Green Dark

background

#0a1410

surface-sec

#142520

surface-pri

#5266eb

text-pri

#d8ece2

text-sec

#6ea088

border

#264038

Blue Dark

background

#0a0f1c

surface-sec

#141c30

surface-pri

#5266eb

text-pri

#d8e2f0

text-sec

#6e82a8

border

#263448

Orange Dark

background

#1c140a

surface-sec

#302214

surface-pri

#5266eb

text-pri

#f0e2d0

text-sec

#a88a6e

border

#483826

Warm Neutral Dark

background

#12110f

surface-sec

#201f1b

surface-pri

#5266eb

text-pri

#e8e5de

text-sec

#95918a

border

#3a3832

Typography

Three custom typefaces: Arcadia (body/UI), Arcadia Display (headlines), and Tiempos Headline (serif editorial).

Arcadia Display

Business banking

arcadia-display / 320 / 48px / -0.04em

Designed for startups

arcadia-display / 400 / 36px / -0.03em

Arcadia (Sans-Serif)

The quick brown fox jumps over the lazy dog — Regular 400

arcadia-body-1 / 400 / 16px

Bankwell UI element label — Medium 450

arcadia-ui-1 / 450 / 14px

Tiempos Headline (Serif)

Where ambition meets banking

tiempos-headline / 300 / 36px

Built for people who build

tiempos-headline / 400 / 28px / italic

Type Scale

Class	Size	Weight	Line Height	Tracking
arcadia-display-1	72px	320	1.0	-0.04em
arcadia-display-2	56px	360	1.05	-0.035em
arcadia-display-3	40px	400	1.1	-0.03em
arcadia-heading-1	28px	500	1.2	-0.02em
arcadia-heading-2	24px	500	1.25	-0.02em
arcadia-body-1	16px	400	1.5	-0.01em
arcadia-body-2	14px	400	1.5	-0.005em
arcadia-ui-1	14px	450	1.3	0
arcadia-ui-2	12px	450	1.3	0.01em
arcadia-caption	11px	400	1.4	0.02em

Spacing Scale

Base unit: 4px. Progressive scale from 0 to 240px.

4px

8px

12px

16px

24px

32px

48px

64px

96px

120px

160px

240px

Border Radius

32px is the signature radius for marketing buttons and hero cards.

4px

8px

16px

24px

32px *

40px

full

Grid & Layout

12-column grid, max 1952px, 6 breakpoints.

Breakpoint	Min Width	Columns	Gutter
sm	640px	4	16px
md	768px	8	16px
lg	1024px	12	24px
xl	1280px	12	24px
2xl	1536px	12	32px
3xl	1952px	12	32px

Element	Height	Notes
Navbar	72px	Compressed to 56px on scroll
Subnav	48px	Product pages
Content Max	-	1952px

Buttons (Marketing)

Pill-shaped with 32px border-radius. Hover lifts with shadow. Primary and tonal variants.

Primary

Tonal

Navigation

Sticky top nav, 72px default, 56px compressed on scroll with backdrop blur.

Bankwell

Products Solutions Pricing Resources

Pricing Cards

Three-tier: Free, Plus ($29.90/mo), Premium ($299/mo).

Free

$0 /month

For startups in their earliest stages.

FDIC-insured up to $5M
Free domestic wires
Team management
Virtual debit cards

Plus

Popular

$29.90 /month

For growing companies with sophisticated needs.

Everything in Free
Cashback rewards
Advanced approvals
Priority support

Premium

$299 /month

For scaling companies needing dedicated infrastructure.

Everything in Plus
Dedicated account manager
API access
International wires

FAQ Accordion

Is Bankwell a bank?

Bankwell is a fintech company, not a bank. Banking services provided by Choice Financial Group and Evolve Bank & Trust, Mkindreds FDIC.

What types of businesses can open an account?

How long does it take to open an account?

Loading Skeletons

Product Overview

Sidebar-driven layout with 9+ navigation sections. Clean white aesthetic with brand blue accents for interactive elements.

Accounts

Multi-account checking & savings

Transactions

Search, filter, categorize, export

Send Money

ACH, wires, checks, bill pay

Cards

Physical & virtual debit cards

Treasury

Yield on idle cash, 5.08% APY

Analytics

Cashflow, burn rate, runway

App Statistics

367

Screens

112

Components

4.9/5

iOS Rating

iOS 17.1+

Min Target

Appearance Modes

Light, dark, and system modes.

Light

Dark

System

Sidebar Navigation

Persistent 240px sidebar with company switcher, 9+ nav sections, and active state using tinted brand blue.

Home

Total Balance

$2,847,392.14

+$124,500.00 this month

Bankwell Treasury

$1,553,544.64

Earning 5.08% APY

Dashboard Layout

Element	Spec
sidebar-width	240px
main-padding	24px
header-height	56px (sticky)
content-max-width	960px (centered)
card-gap	16px

Buttons (App)

8px border-radius (more utilitarian than marketing 32px). Four variants.

Form Elements

Account Name

Amount (focused)

Routing Number (error)

Must be 9 digits.

Transaction Tables

Date	Description	Category	Status	Amount
Mar 28	AWS	Software	Cleared	-$12,847.50
Mar 27	Stripe	Revenue	Cleared	+$89,200.00
Mar 27	Gusto	Payroll	Pending	-$156,340.00

Cashflow Charts

Modals

Toast Notifications

Wire transfer sent successfully

Failed to process payment

Account statement ready

Badges & Status

Cleared Pending Failed Processing Draft

Variant	Background	Text
success	#e6f5ed	#1a8556
warning	#fef3e0	#c47a0a
error	#fce8ef	#d03275
info	#e8f1fc	#2b7de1
neutral	#ededf0	#5b5e66

Dark Theme

Near-black background (#0c0d0e) with elevated surfaces (#1a1a1e). Brand blue stays consistent.

bg-primary

#0c0d0e

bg-secondary

#1a1a1e

bg-tertiary

#26262b

text-primary

#e5e5e8

text-secondary

#8b8d95

border

#333338

Acme Corp

Home

Accounts

Transactions

Total Balance

$2,847,392.14

AWS-$12,847.50

Stripe+$89,200.00

All CSS Tokens

Complete Arcadia design tokens for both website and app. Copy-paste into your project root stylesheet.

/* ═══════════════════════════════════════════════════
   Bankwell Arcadia Design System — Complete Tokens
   ═══════════════════════════════════════════════════ */

:root {
  /* ─── Brand ─── */
  --color-brand-blue: #5266eb;
  --color-brand-blue-hover: #4355d4;
  --color-brand-blue-active: #3a4abc;
  --color-brand-blue-light: #b4bdf5;
  --color-brand-blue-tint: #eef0fd;

  /* ─── Light Theme (Neutral) ─── */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f7f7f8;
  --color-bg-tertiary: #ededf0;
  --color-surface-primary: #5266eb;
  --color-text-primary: #0c0d0e;
  --color-text-secondary: #5b5e66;
  --color-text-tertiary: #8b8d95;
  --color-border-default: #dcdde1;
  --color-border-subtle: #ededf0;

  /* ─── Dark Theme (Neutral) ─── */
  --color-dark-bg-primary: #0c0d0e;
  --color-dark-bg-secondary: #1a1a1e;
  --color-dark-bg-tertiary: #26262b;
  --color-dark-text-primary: #e5e5e8;
  --color-dark-text-secondary: #8b8d95;
  --color-dark-border: #333338;

  /* ─── Status (Light / Dark) ─── */
  --color-error: #d03275;
  --color-error-dark: #fc92b4;
  --color-error-bg: #fce8ef;
  --color-success: #1a8556;
  --color-success-dark: #5cc98a;
  --color-success-bg: #e6f5ed;
  --color-warning: #c47a0a;
  --color-warning-dark: #f0b84e;
  --color-warning-bg: #fef3e0;
  --color-info: #2b7de1;
  --color-info-dark: #7eb6ff;
  --color-info-bg: #e8f1fc;

  /* ─── Typography ─── */
  --font-sans: 'Arcadia', system-ui, sans-serif;
  --font-display: 'Arcadia Display', system-ui, sans-serif;
  --font-serif: 'Tiempos Headline', Georgia, serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  /* ─── Spacing ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;
  --space-40: 160px;
  --space-60: 240px;

  /* ─── Border Radius ─── */
  --radius-sm: 4px;
  --radius-md: 8px;    /* app buttons */
  --radius-lg: 16px;   /* modals, cards */
  --radius-xl: 24px;
  --radius-2xl: 32px;  /* marketing buttons */
  --radius-3xl: 40px;
  --radius-full: 9999px; /* pills, badges */

  /* ─── Layout ─── */
  --content-max-width: 1952px;
  --nav-height: 72px;
  --nav-height-compact: 56px;
  --subnav-height: 48px;
  --app-sidebar-width: 240px;
  --app-content-max: 960px;

  /* ─── Shadows ─── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 24px 80px rgba(0,0,0,0.15);
  --shadow-brand: 0 4px 12px rgba(82,102,235,0.3);

  /* ─── Transitions ─── */
  --transition-fast: 0.15s ease;
  --transition-default: 0.2s ease;
  --transition-slow: 0.3s ease;
}

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.website.theme.extend,
  },
};

// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.

Scope	Primary	Body Font	Radius	Shadow	Breakpoint
Website	`—`	`—`	`—`	`—`	`—`
App / Portal	`—`	`—`	`—`	`—`	`—`

Scope	Recipe	Class Pattern	Notes
Website	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Website	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
Website	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.
App / Portal	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
App / Portal	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
App / Portal	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.

Bankwell Design System Reference

Marketing Website

Overview

Color System & Themes

Brand Primary

Semantic Status

Light Themes

Dark Themes

Typography

Arcadia Display

Arcadia (Sans-Serif)

Tiempos Headline (Serif)

Type Scale

Spacing Scale

Border Radius

Grid & Layout

Buttons (Marketing)

Navigation

Pricing Cards

FAQ Accordion

Loading Skeletons

Bankwell Banking App

Product Overview

App Statistics

Appearance Modes

Sidebar Navigation

Dashboard Layout

Buttons (App)

Form Elements

Transaction Tables

Cashflow Charts

Modals

Toast Notifications

Badges & Status

Dark Theme

All CSS Tokens

Tailwind Mapping