Spendwell Complete Design System

Spendwell is a corporate card and spend management platform. TWK Lausanne typography, solar-yellow CTAs, blue primary accents. This reference covers the marketing site and the product dashboard.

Marketing Website

-- Next.js + Tailwind + Radix UI on Vercel

Overview

Spendwell is a corporate card and spend management platform used by 50,000+ businesses. The marketing site uses TWK Lausanne typography, blue primary, and solar-yellow CTA accents.

185

Marketing Screens

50K+

Businesses

Next.js

Framework

Vercel

Hosting

Colors

Primary & CTA

Blue

#0066FF

Blue Dark

#0052CC

Blue Light

#E6F0FF

Solar

#F5C518

Solar Hover

#E6B800

Neutrals

White

#FFFFFF

Gray 50

#F9FAFB

Gray 200

#E5E7EB

Gray 400

#9CA3AF

Gray 500

#6B7280

Gray 900

#111827

Black

#000000

Typography

TWK Lausanne (WELTKERN) primary, Burgess (Colophon Foundry) serif for editorial.

The finance platform

headline-l64px700

Save time. Save money.

headline-m48px700

Corporate cards that work

headline-s36px700

Automate expense management

headline-xs24px700

Spendwell is the ultimate platform for modern finance teams.

body-m18px400

Join 50,000+ businesses saving time and money.

body-s16px400

Banking services provided by Sutton Bank, Mkindred FDIC.

body-xs14px400

Buttons

Pill-shaped with bold labels. Solar yellow CTA, blue primary, outlined secondary, ghost links.

Email Capture Form

Hero Section

Trusted by 50,000+ businesses

The finance platform that saves you time and money

Corporate cards, expense management, bill payments, accounting, and more -- all on one platform.

Pricing Cards

Starter

Spendwell

Free / month

For small teams getting started with corporate cards.

Unlimited cards
1.5% cashback
Receipt matching
Basic integrations

Growth

Spendwell Plus

$15 / user / mo

Advanced controls and automation for growing companies.

Everything in Spendwell, plus:
Custom approval workflows
Advanced spend policies
Multi-entity support

Enterprise

Custom

Full customization and dedicated support for large orgs.

Everything in Plus, plus:
Dedicated account manager
SSO & SCIM
SLA guarantees

Testimonials

Spendwell has completely transformed how we manage expenses. Our month-end close went from 12 days to 3.

Jane Reynolds

CFO, TechCorp

We saved over $400K in our first year on Spendwell. The automated controls prevent overspending before it happens.

Michael Kim

VP Finance, GrowthCo

Footer

App / Dashboard

Product portal -- Inter + Slate neutrals + Green primary

Overview

The Spendwell product dashboard is a data-rich financial application using slate neutrals, fintech-standard green primary, and Inter for maximum legibility.

114

UI Screens

Components

4.9/5

iOS Rating

Themes

Colors & Status

Primary & Secondary

Green

#1DB954

Green Dark

#17A347

Green Light

#E8F8EE

Blue

#2B6CB0

Blue Light

#EBF4FF

Status

Success

#22C55E

Warning

#EAB308

Error

#EF4444

Info

#3B82F6

Pending

#F97316

Slate Neutrals

Slate 50

#F8FAFC

Slate 200

#E2E8F0

Slate 400

#94A3B8

Slate 500

#64748B

Slate 700

#334155

Slate 900

#0F172A

Typography

Inter for UI text, SF Mono/Fira Code for financial figures.

Page Title 24px / 700

Section Heading 20px / 700

Body text for descriptions 15px / 400

Table cells and form labels 13px / 400

Column headers 12px / 600

$124,892.50 Monospace / Financial

Buttons

6px border-radius (not pills). Green primary for positive actions, red for destructive.

Form Controls

Inputs

Card name

Spending limit

Toggles

Require receipt for purchases over $75

Auto-lock card on policy violation

Filter Chips

All transactions Pending review Missing receipt Over budget

Sidebar Navigation

Dark sidebar (slate-900) with green active indicator and red badge counts.

Home

Total Spend

$84,230

+12.5%

Savings

$3,450

Cashback

Active Cards

6 teams

Pending

Needs approval

Data Tables

Financial data tables with sortable columns, filter toolbar, monospace amounts, and hover states.

Date	Merchant	Cardholder	Status	Amount
Mar 28, 2026	Amazon Web Services	Sarah Chen	Approved	$2,340.00
Mar 27, 2026	Delta Airlines	James Park	Pending	$892.50
Mar 27, 2026	WeWork	Maria Lopez	Approved	$450.00
Mar 26, 2026	Uber Eats	Alex Kim	Declined	$67.80

Metric Cards

Total Spend

$124,892

+12.5%

Savings

$8,430

+23.1%

Active Cards

156

12 teams

Out of Policy

Needs attention

Approval Workflow

Sarah Chen

Engineering

$2,340.00

Merchant: Amazon Web Services

Category: Cloud Infrastructure

Date: Mar 28, 2026

James Park

Sales

$892.50

Merchant: Delta Airlines

Category: Travel

Expense Cards

✈

$892.50

Delta Airlines

Travel Pending

💻

$2,340.00

Amazon Web Services

Software Approved

🍔

$67.80

Uber Eats

Meals Declined

🎨

$1,200.00

Figma Inc.

Software In Review

Dark Theme

Dark mode with slate-900 backgrounds. Status colors remain consistent.

Spend

$124,892

+12.5%

Savings

$8,430

+23.1%

Cards

156

Active

CSS Tokens Reference

Complete token set for both website and app

All CSS Variables

Copy-paste ready. Website tokens and app tokens combined in one block.

/* =============================================
   Spendwell DESIGN SYSTEM — COMPLETE TOKENS
   ============================================= */

:root {
  /* ---- WEBSITE ---- */

  /* Primary Blue */
  --Spendwell-blue: #0066FF;
  --Spendwell-blue-dark: #0052CC;
  --Spendwell-blue-light: #E6F0FF;

  /* Solar CTA */
  --Spendwell-solar: #F5C518;
  --Spendwell-solar-hover: #E6B800;
  --Spendwell-solar-light: #FFF9E0;

  /* Gray Scale (Website) */
  --gray-50: #F9FAFB;
  --gray-100: #F3F4F6;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-600: #4B5563;
  --gray-700: #374151;
  --gray-800: #1F2937;
  --gray-900: #111827;

  /* Website Typography */
  --font-primary: 'TWK Lausanne', system-ui, sans-serif;
  --font-serif: 'Burgess', Georgia, serif;
  --text-headline-l: 4rem;
  --text-headline-m: 3rem;
  --text-headline-s: 2.25rem;
  --text-headline-xs: 1.5rem;
  --text-body-m: 1.125rem;
  --text-body-s: 1rem;
  --text-body-xs: 0.875rem;

  /* ---- APP / DASHBOARD ---- */

  /* Primary Green (OKLCH) */
  --app-green: #1DB954;
  --app-green-dark: #17A347;
  --app-green-light: #E8F8EE;

  /* Secondary Blue */
  --app-blue: #2B6CB0;
  --app-blue-light: #EBF4FF;

  /* Status Colors */
  --status-success: #22C55E;
  --status-success-bg: #F0FDF4;
  --status-warning: #EAB308;
  --status-warning-bg: #FEFCE8;
  --status-error: #EF4444;
  --status-error-bg: #FEF2F2;
  --status-info: #3B82F6;
  --status-info-bg: #EFF6FF;
  --status-pending: #F97316;
  --status-pending-bg: #FFF7ED;

  /* Slate Scale (App) */
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* Dark Theme */
  --dark-bg: #0F172A;
  --dark-surface: #1E293B;
  --dark-border: #334155;

  /* App Typography */
  --font-app: 'Inter', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', monospace;

  /* ---- SHARED ---- */

  /* Spacing Scale */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-24: 6rem;    /* 96px */

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms 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.

Spendwell Complete Design System

Marketing Website

Overview

Colors

Primary & CTA

Neutrals

Typography

Buttons

Navigation

Email Capture Form

Hero Section

The finance platform that saves you time and money

Pricing Cards

Testimonials

Footer

Products

Solutions

Resources

Company

App / Dashboard

Overview

Colors & Status

Primary & Secondary

Status

Slate Neutrals

Typography

Buttons

Form Controls

Inputs

Toggles

Filter Chips

Sidebar Navigation

Data Tables

Metric Cards

Approval Workflow

Expense Cards

Dark Theme

CSS Tokens Reference

All CSS Variables

Tailwind Mapping

Spendwell Complete Design System

Marketing Website

Overview

Colors

Primary & CTA

Neutrals

Typography

Buttons

Navigation

Email Capture Form

Hero Section

The finance platform that saves you time and money

Pricing Cards

Testimonials

Social Proof Bar

Footer

Products

Solutions

Resources

Company

App / Dashboard

Overview

Colors & Status

Primary & Secondary

Status

Slate Neutrals

Typography

Buttons

Form Controls

Inputs

Toggles

Filter Chips

Sidebar Navigation

Data Tables

Metric Cards

Approval Workflow

Expense Cards

Dark Theme

CSS Tokens Reference

All CSS Variables

Tailwind Mapping