Remit Design System

Complete design reference for Remit Payments () covering both the marketing website and the product app/dashboard. Remit is a B2B payments platform enabling businesses to pay and get paid, founded 2018 and acquired by Xero in 2025 for $2.5B.

Property	Website	App / Dashboard
Stack	WordPress + Webpack	React + Chakra UI + TypeScript
Font	PolySans (Slim 300, Median 500)	PolySans (via Chakra theme)
Primary Color	`#7849ff` (Brand Purple)
Background	`#ffffff`	`#ffffff` (content), `#f5f5f5` (shell)
Dark Mode	Full support via theme toggle	N/A observed
CDN	WordPress theme dist	`production-webcdn.`

CSS Custom Properties

/* Layout */ --header-height: 6.4rem; --wrapper-padding-mobile: 2.4rem; --wrapper-max-width: 132rem; --nav-height: calc(100vh - var(--header-height)); /* Announcement */ --announcement-height: 5.2rem; --announcement-height@desktop: 4.8rem; /* Hero */ --page-hero-padding-top: 3.6rem; --page-hero-padding-top@desktop: 5.6rem; /* Block Spacing */ --block-top-padding-mobile: 8rem; --block-headline-mb: 3.2rem; /* Transitions */ --header-transition-duration: 0.45s; --header-transition-timing-function: cubic-bezier(.77, 0, .175, 1); /* Marquee */ --marquee-duration: 10s; --marquee-play-state: running; /* Components */ --icon-size: 4rem; --columns: 1;

Website

Colors

Primary

#7849ff

Brand Purple

#6033e6

Hover

#9874ff

Medium

#bdbdff

Pale

#eaedfe

Light BG

Neutrals

#212124

Near Black

#48484b

Dark Gray

#717173

Medium

#8e8e90

Gray

#d8d8d8

Border

#ededed

Light Border

#f3f3f3

Light Gray

#fafafa

Stripe

Accents

#e6f4ff

Light Blue

#bbe0fb

Blue

#f4c466

Yellow

#ff6060

Red

#00C853

Green

Typography

PolySans — Slim (300) for body, Median (500) for headlines/buttons. Fallback: sans-serif.

Pay & get paid

H1	4.2rem+ / 500 / 1.1

Save both time and money

H2	3.2rem / 500 / 1.25

Paying shouldn't be a burden

H3-6	2rem / 500 / 1.4

Transfer funds using ACH bank transfers for free. Choose delivery speed.

Body	1.6rem / 300 / 1.5

Small 1.4rem Caption 1.2rem Button 1.4rem/500

Small	1.4rem / 300
Caption	1.2rem / 300
Button	1.4rem / 500

Spacing & Layout

Base: 0.4rem. Wrapper: 132rem. Breakpoints: 480 / 768 / 1024 / 1280 / 1440px.

4px

0.4rem base

16px

1.6rem

24px

2.4rem wrapper-mobile

32px

3.2rem headline-mb

64px

6.4rem header-height

80px

8rem block-padding-mobile

148px

14.8rem block-padding-desktop

Breakpoints

Name	Value	Nostalgias
Mobile	default	<768px
Tablet	48em	768px
Desktop	64em	1024px
Large	80em	1280px
XL	90em	1440px

Radius & Shadows

Border Radius

0.4remSmall

0.8remStandard

1.6remMedium

2remCard

5remPill

Shadows

Subtle
rgba(0,0,0,0.07)

Card Hover
rgba(0,0,0,0.1)

Header Blur
blur(2rem)

Buttons

Transition: 0.3s ease-in-out. PolySans Median 500.

Variants

Variant	BG	Text	Hover BG
Primary	#7849ff	#fff	#6033e6
Secondary	transparent	#7849ff	#6033e6 + white text
Ghost	transparent	#7849ff	underline

Inputs & Forms

Please enter a valid email

Cards

⚡

Fast Payments

Same-day and instant transfers.

💳

Pay by Card

Credit cards for vendor payments.

🌐

International

FX payments to 130+ countries.

🚀

Sync & Automate

QuickBooks and Xero two-way sync.

Pricing Cards

Go

$0 /mo

5 free ACH, 1 user

✓ Free ACH

✓ Pay by card

Recommended

Core

$20 /mo

20 free ACH

✓ Batch payments

✓ QuickBooks sync

Boost

$44 /mo

50 free ACH

✓ International

✓ Priority support

FAQ Accordion

Is Remit free to use? +

Yes, the Go plan is free with 5 ACH/month.

What payment methods? +

ACH, credit/debit cards, checks, instant, same-day, and international wire payments.

Pre-Footer CTA

100,000+ users•$100B+ payments•40M+ bills paid•2M+ vendors• 100,000+ users•$100B+ payments•40M+ bills paid•2M+ vendors

Animations

Name	Duration	Easing
Default transition	0.3s	ease-in-out
Header	0.45s	cubic-bezier(.77, 0, .175, 1)
Card hover scale	0.5s	ease-in-out (1.05)
FAQ icon rotate	0.2s	ease (45deg)
Marquee	10-20s	linear infinite

Keyframes

wave

gelatine

Dark Mode

Via data-theme-toggle. Classes: .theme--light / .theme--dark.

Background

#212124

Surface

#48484b

Header

rgba(...0.8)

Shadow

white 0.07

App / Dashboard

App Colors

Interactive

#7849ff

Active

#6033e6

Hover

rgba 0.06

Active BG

Status

#00C853

Success

#f4c466

Warning

#ff6060

Error

#7849ff

Info

Surfaces

#ffffff

Background

#f5f5f5

Shell

#fafafa

Hover Row

#ededed

Borders

App Typography

Chakra UI theme with five groupings. PolySans applied via theme config.

Group	Usage
Display	Dashboard metrics, hero numbers
Heading	Section titles, card headers
Body	Standard content, descriptions
Caption	Labels, metadata, timestamps
Link	Purple interactive text, underline on hover

Dashboard Shell

Vendors

Bills

Approvals

Payments

Financing

W-9 & 1099

Vendor	Last Payment	Balance
ODOffice Depot	Mar 15	$2,450
AWAWS	Mar 12	$8,712
GSG Suite	Mar 1	$156

Data Tables

Vendor	Last Payment	Balance	Status
SLStaples	Mar 28	$1,240	✓ Paid
FEFedEx	Mar 25	$3,890	● Pending
XEXerox	Mar 10	$567	✕ Failed

Job Layout (Forms)

Layout types: Job, Job multi-step, Resource, Resource details, Dashboard, Settings.

Add a new vendor

Vendor name

App Buttons

Chakra UI variants. Buttons accept i18n keys and analyticsProperties prop.

Status Badges

✓ Paid ● Pending ✕ Failed → Scheduled

Delivery Speed Picker

⚡ Choose delivery speed

Instant transfer

Arrives in minutes

Fastest

Same-day delivery

By 5pm ET

3 business days

Standard ACH

Payment Status Cards

✓

$1,132.00

Paid to FedEx

→

$1,132.00

From Acme Inc

Credit Card Visual

**** **** **** 4546

Business Debit Card

iOS Mobile App

iOS 17+, 4.6/5 rating. Greeting-based home, quick actions, pending cards.

9:41

Everyday Sunday

Good morning, Alex

$1,678

Pending (4)

2,000

Bills to pay

💰

Pay

📄

Add bill

💵

Get paid

⋮

Recent Activity

Office Depot

Mar 28

-$240

Acme Inc

Mar 27

+$1,132

Property	Value
Platform	iOS 17.0+
Rating	4.6/5 (1,311)
Size	111.7 MB

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	`—`	`—`	`—`	`—`	`30em (480px)`
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.