Paystream Design System

Extracted from — Website + App/Portal tokens and components

Website Colors

Brand

#003087

Paystream Blue

#012169

Dark Blue

#009cde

Light Blue

#ffc439

Gold

Primary

#000000

primary-main

#333333

primary-hover

#696969

primary-active

#ffffff

primary-contrast

Secondary (Action Blue)

#0065f2

secondary-main

#0038ba

secondary-hover

#3db5ff

secondary-active

#002991

medium-contrast

Featured / Promotion

#60cdff

featured

#008cff

featured-hover

#0057d9

promotion

#b8e9ff

promotion-mod

#e3f7ff

promotion-light

Backgrounds

#f0f2f9

bg-main

#f5f7fa

bg-alt

#ffffff

surface

#edf0f2

selected-range

Status

#008556

success

#e6faee

success-medium

#ffaa00

warning

#fff5e1

warning-medium

#c31526

error

#f7d0d1

error-medium

Links

#0065f2

link-main

#0038ba

link-hover

#3db5ff

link-active

Typography

Paystream uses custom proprietary fonts: PaystreamDisplay-Black for display/headings and PaystreamText-Regular/Medium/Bold for body text. Letter spacing is tight throughout (negative tracking).

Display Large

Pay your way

Family	PaystreamDisplay-Black
Size	4.25rem / 68px
Line height	5.125rem / 82px
Tracking	-0.04em

Display

Send money

Family	PaystreamDisplay-Black
Size	4rem / 64px
Line height	4.375rem / 70px
Tracking	-0.04em

Display Small

Digital wallet

Family	PaystreamDisplay-Black
Size	2.5rem / 40px
Line height	2.75rem / 44px
Tracking	-0.04em

Heading Large

Explore features

Family	PaystreamDisplay-Black
Size	2rem / 32px
Line height	2.25rem / 36px
Tracking	-0.02em

Heading Small

Account settings

Family	PaystreamDisplay-Black
Size	1.5rem / 24px
Line height	2rem / 32px
Tracking	-0.02em

Title Large

Transaction details

Family	PaystreamText-Medium
Size	1.25rem / 20px
Line height	1.5rem / 24px
Tracking	-0.01em

Title

Payment method

Family	PaystreamText-Medium
Size	1rem / 16px
Line height	1.25rem / 20px
Tracking	-0.01em

Body Large

Shop millions of items and pay over time with no late fees.

Family	PaystreamText-Regular
Size	1rem / 16px
Line height	1.25rem / 20px
Tracking	0em

Body

Send and receive money from friends and family with ease.

Family	PaystreamText-Regular
Size	0.875rem / 14px
Line height	1.125rem / 18px
Tracking	-0.02em

Caption

Terms and conditions apply. See details.

Family	PaystreamText-Regular
Size	0.75rem / 12px
Line height	1rem / 16px
Tracking	-0.01em

Spacing Scale

Paystream uses a comprehensive spacing scale from 0 to 1200 (0rem to 6rem), plus semantic aliases.

2px

--sys-space-25

4px

--sys-space-50 / xs

6px

--sys-space-75

8px

--sys-space-100 / sm

12px

--sys-space-150 / md

16px

--sys-space-200 / lg

20px

--sys-space-250

24px

--sys-space-300 / xl

32px

--sys-space-400 / jumbo

40px

--sys-space-500

48px

--sys-space-600

64px

--sys-space-800

80px

--sys-space-1000

96px

--sys-space-1200

Border Radius

2px
tiny

4px
xs

6px
sm

8px
md

12px
lg

24px
xl

32px
jumbo

40px
xjumbo

50%
full

Buttons use jumbo (32px) radius for pill shape. Cards typically use xl (24px). Inputs use md (8px).

Elevation / Shadows

Level 10 1px 12px 0.08

Level 20 2px 14px 0.1

Level 30 2px 18px 0.1

QR Code4px 4px 28px 6px

Buttons

Paystream buttons use full pill shapes (border-radius: 32px) with medium font weight. Primary CTAs are black; secondary CTAs use the action blue.

Primary (Black)

Secondary (Blue)

Outline

Ghost (Text Link)

Danger

Input Fields

Text Inputs

Height: 48px | Radius: 8px | Border: 1px solid #696969 | Focus: 2px solid #0065f2 with 3px ring

Checkboxes

Remkindred me

Send me promotional emails

Agree to Terms of Service

Radio Buttons

Paystream Balance

Credit or Debit Card

Bank Account

Toggle Switches

Notifications enabled Dark mode

Cards

Cards use border-radius: 16-24px, white surface, subtle border, and elevation on hover.

Send Money

Transfer funds to friends and family instantly with no fees when using your Paystream balance.

Request Money

Split bills, collect group payments, or request what you're owed with a simple link.

Pay Later

Shop now and pay over time with Pay in 4. No late fees, no impact to credit score.

Motion & Animation

Hover over each card to see the timing in action.

Hover

0.1s ease

Move

0.2s cubic-bezier(0.2,0,0,1)

Arrive

0.5s cubic-bezier(0.05,0.7,0.1,1)

Duration Tokens

hover	0.1s	Button hover, link hover
action	0.2s	Click feedback, toggle
arrive	0.5s	Panel enter, modal open
depart	0.3s	Panel exit, modal close
enter-small	0.2s	Tooltip, dropdown
enter-large	0.5s	Full-screen overlay
move-large	0.8s	Page transition

App / Portal Colors

The Paystream dashboard uses a lighter, more neutral brushwork with blue as the primary action color.

Interactive / Action

#0065f2

primary action

#0038ba

action hover

#000000

secondary btn

#333333

secondary hover

Backgrounds

#f5f7fa

app-bg

#ffffff

surface

#f0f2f9

hover-bg

#edf0f2

border

Text Hierarchy

#000000

text-primary

#333333

text-secondary

#696969

text-tertiary

#999999

text-disabled

App Layout

Paystream dashboard uses a sidebar + main content layout with a fixed header.

Dashboard

Paystream Balance

$1,234.56

This Month

$3,891.20

Sidebar: 240px wide, #ffffff bg, 1px solid #edf0f2 right border. Active item: #e3f7ff bg, #0065f2 text.

App Buttons

Primary Action (Blue)

Secondary (Outline Blue)

Danger / Destructive

Data Tables

Date	Description	Amount	Status
Mar 7, 2026	Payment to John Smith	-$125.00	Completed
Mar 6, 2026	Refund from Amazon	+$49.99	Processing
Mar 5, 2026	Subscription - Netflix	-$15.99	Completed
Mar 4, 2026	Payment from Client	+$2,500.00	Pending
Mar 3, 2026	Failed Transfer	-$300.00	Failed

Header: #f5f7fa bg | Row border: 1px solid #edf0f2 | Row hover: #f0f2f9 | Cell padding: 12px 16px

Form Controls

Search Input

Select / Dropdown

Last 30 days

Toggle with Label

Email notifications

Two-factor auth

Badges & Status Indicators

Completed Pending Failed Processing Draft

Pill shape (border-radius: 62px), 4px 12px padding, 12px font. Each status uses its medium color as background and its medium-contrast as text color.

Alerts & Toasts

Inline Alerts

Your payment of $125.00 was sent successfully.

Transaction failed. Please try again or use a different payment method.

Your account requires verification to increase sending limits.

A new version of the Paystream app is available.

Toast Notifications

Money sent to John Smith

Payment could not be processed

Modals / Dialogs

Overlay: rgba(0,0,0,0.55) | Border radius: 24px | Padding: 32px | Shadow: 0 2px 18px rgba(0,0,0,0.1)

Tabs & Progress

Tab Bar

All Activity

Payments

Requests

Invoices

Progress Bar

Account verification: 75% complete

Upload progress: 40%

Tooltips

Background: #000000 | Color: #ffffff | Radius: 8px | Padding: 8px 12px | Font: 12px

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	`—`	`—`	`0.5rem`	`—`	`—`
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-sm 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.

Paystream Design System

Website Colors

Brand

Primary

Secondary (Action Blue)

Featured / Promotion

Backgrounds

Status

Links

Typography

Display Large

Display

Display Small

Heading Large

Heading Small

Title Large

Title

Body Large

Body

Caption

Spacing Scale

Border Radius

Elevation / Shadows

Buttons

Primary (Black)

Secondary (Blue)

Outline

Ghost (Text Link)

Danger

Input Fields

Text Inputs

Checkboxes

Radio Buttons

Toggle Switches

Cards

Send Money

Request Money

Pay Later

Navigation

Top Navigation Bar

Motion & Animation

Duration Tokens

App / Portal Colors

Interactive / Action

Backgrounds

Text Hierarchy

App Layout

Dashboard

App Buttons

Primary Action (Blue)

Secondary (Outline Blue)

Danger / Destructive

Data Tables

Form Controls

Search Input

Select / Dropdown

Toggle with Label

Badges & Status Indicators

Alerts & Toasts

Inline Alerts

Toast Notifications

Modals / Dialogs

Confirm Payment

Tabs & Progress

Tab Bar

Progress Bar

Tooltips

Tailwind Mapping