Tender Design System

Marketing Website

Awwwards Site of the Day. Nuxt.js + GSAP + Rive + Matter.js. Bold display typography with 3D fintech illustrations.

Website Colors

Orange-dominant brushwork with navy (#1A1A2E) replacing black. Pastel accents for 3D elements.

Brand

Primary

#F73B20

Primary Light

#FF6B4A

Primary Dark

#D42D15

Primary Pale

#FFF0EB

Backgrounds & Text

White

#FFFFFF

Surface

#F8F8FA

Dark Navy

#1A1A2E

Text Secondary

#6B7280

3D Accent Brushwork

Pastel Blue

#B8D4E3

Pastel Green

#C8E6C9

Gold

#FFD700

Warm Cream

#FFE8D6

Semantic

Success

#22C55E

Warning

#F59E0B

Error

#EF4444

Info

#3B82F6

Website Typography

Inter with tight letter-spacing on display text. Large hero sizes for impact.

Hero

64px / 800

Send money globally

48px / 700

Your digital wallet

36px / 700

Fast, secure payments

28px / 600

Multi-currency support

Body Large

18px / 400

FCA-regulated e-wallet supporting 70+ payment methods.

Body

16px / 400

Send, receive, and exchange money worldwide.

Caption

12px / 500

FCA REGULATED · 50+ CURRENCIES

Website Spacing

4px base unit. Container 1200px max, 24px padding. Sections 96px vertical.

base

2xl

section

Gradients

Warm pastel hero, dark navy for contrast, primary gradient for CTAs.

Hero Warm

Dark Section

Primary Gradient

Motion

GSAP scroll triggers, Rive 3D illustrations, Matter.js physics, Lenis smooth scroll.

Scale

Lift

Color

Morph

Easing: cubic-bezier(0.4, 0, 0.2, 1) default; (0.34, 1.56, 0.64, 1) spring | Timing: 150ms fast, 300ms normal, 500ms slow

Website Buttons

12px radius, larger padding, orange shadow. Scale on hover.

Website Inputs

48px height, 10px radius, warm orange focus ring.

Email Address

Amount

Website Cards

16px radius, 32px padding, navy shadow with orange glow on hover.

Tender Card

Virtual & Physical

Spend anywhere Mastercard is accepted with instant top-up.

Website Badges

Pill-shaped with tinted backgrounds.

E-Wallet Verified Pending New Feature

Navigation

72px frosted glass bar with blur backdrop.

jeton

Personal Business Tender Card About

Hero Section

Warm gradient with 3D coin art. Bold headline, subtitle, dual CTA.

Your money,
everywhere.

Send, receive, and exchange across 50+ currencies with one powerful e-wallet.

Feature Grid

3-column layout. Icon + title + description. Lift on hover.

⚡

Instant Transfers

Send money anywhere. Arrives in seconds with real-time notifications.

🔒

Bank-Level Security

FCA-regulated. Biometric auth, 2FA, encrypted transactions.

🌐

Multi-Currency

Hold and exchange 50+ currencies with competitive rates.

Dark Section

Navy gradient for trust indicators and social proof.

Trusted by millions worldwide

70+ payment methods across 19 languages. FCA-regulated.

50+

Currencies

70+

Payment Methods

Languages

App / Portal

E-wallet dashboard, transaction management, card controls, and currency exchange interfaces.

App Colors

Light grey background, white cards, dark sidebar. Status badges with tinted backgrounds.

Primary Scale

#FFF5F2

100

#FFE8E0

500 Primary

#F73B20

600

#D42D15

800

#8C1A0B

Surfaces

App BG

#F8F8FA

Card

#FFFFFF

Sidebar

#1A1A2E

Sidebar Hover

#252540

Status (with backgrounds)

Success

#22C55E

Success BG

#F0FDF4

Warning

#F59E0B

Error

#EF4444

App Typography

Smaller, denser scale. 14px body for dashboard layouts. Monospace for amounts.

Amount Lg

36px / 700

$12,450.00

Dashboard

28px / 700

Dashboard

Section

20px / 600

Recent Transactions

Card Title

16px / 600

Currency Exchange

Body

14px / 400

Transfer completed to John D.

Caption

12px / 500

Today, 2:34 PM

Table Header

11px / 600 / CAPS

TRANSACTION · AMOUNT · STATUS

App Layout

Sidebar 260px + content area. 64px header, 24px content padding.

Layout Dimensions

Sidebar	260px
Collapsed	72px
Header	64px
Content pad	24px
Max-width	1080px

Border Radius

Input	8px
Button	10px
Card	12px
Wallet card	16px
Badge	6px

App Shadows

Minimal on cards, escalating for dropdowns and modals.

Card

Dropdown

Modal

Wallet

App Buttons

40px height, 10px radius. Compact for dashboard density.

App Inputs

40px height, 8px radius. Tighter than website inputs.

Recipient

Amount (focused)

App Badges

Rectangular 6px radius with colored borders for transaction status.

Completed Pending Failed Processing

Toggle & Progress

Orange active toggle. Spring animation on thumb. 6px progress bars.

Off

KYC Verification75%

Transfer100%

Data Tables

Uppercase headers, subtle row borders, hover highlight.

Transaction	Recipient	Amount	Status	Date
#TX-78234	Maria S.	-$250.00	Completed	Mar 23
#TX-78235	Ahmed K.	-$1,200.00	Pending	Mar 23
#TX-78236	Bank Deposit	+$5,000.00	Completed	Mar 22

Wallet Card

340x200px gradient card with circular decorative elements.

Available Balance

$12,450.00

**** **** **** 4829

Tender Card

EUR Wallet

€8,320.15

**** **** **** 7103

Virtual Card

Transaction List

64px rows, 40px icons, color-coded amounts.

↓

Deposit from Bank

Today, 2:34 PM

+$5,000.00

↑

Sent to Maria S.

Today, 11:20 AM

-$250.00

⇄

Exchange USD → EUR

Yesterday

-$1,200.00

Send Money Flow

Amount input, recipient, fee breakdown, confirm CTA.

Send Money

USD

$500

Recipient

Maria Santos

maria.s@email.com

Fee$2.50

Total$502.50

Toast Notifications

Dark background, spring entrance from bottom.

✓ Transfer sent successfully

✗ Transfer failed

CSS Variables

Combined custom properties block covering both website and app tokens.

/* ========================================
   Tender Design System — CSS Custom Properties
   Combined: Website + App
   ======================================== */

:root {
  /* Brand (shared) */
  --Tender-primary: #F73B20;
  --Tender-primary-light: #FF6B4A;
  --Tender-primary-dark: #D42D15;
  --Tender-primary-pale: #FFF0EB;
  --Tender-dark: #1A1A2E;

  /* Text */
  --Tender-text: #1A1A2E;
  --Tender-text-secondary: #6B7280;
  --Tender-text-tertiary: #9CA3AF;

  /* Borders */
  --Tender-border: #E5E7EB;
  --Tender-border-card: #EEEEF2;
  --Tender-divider: #F0F0F4;

  /* Accents */
  --Tender-pastel-blue: #B8D4E3;
  --Tender-pastel-green: #C8E6C9;
  --Tender-gold: #FFD700;

  /* Status */
  --Tender-success: #22C55E;
  --Tender-warning: #F59E0B;
  --Tender-error: #EF4444;
  --Tender-info: #3B82F6;

  /* Website-specific */
  --Tender-w-bg: #FFFFFF;
  --Tender-w-surface: #F8F8FA;
  --Tender-w-radius-btn: 12px;
  --Tender-w-radius-card: 16px;
  --Tender-w-container: 1200px;

  /* App-specific */
  --Tender-a-bg: #F8F8FA;
  --Tender-a-card: #FFFFFF;
  --Tender-a-sidebar: #1A1A2E;
  --Tender-a-sidebar-text: #A0A0B8;
  --Tender-a-radius-btn: 10px;
  --Tender-a-radius-card: 12px;
  --Tender-a-radius-input: 8px;
  --Tender-a-sidebar-width: 260px;
  --Tender-a-header-height: 64px;

  /* Font */
  --Tender-font: 'Inter', -apple-system, sans-serif;
}

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	`—`	`'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`	`12px`	`—`	`—`
App / Portal	`—`	`'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`	`10px`	`—`	`—`

Scope	Recipe	Class Pattern	Notes
Website	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-button bg-brand-primary text-text-inverse shadow-sm px-4 py-2 text-body font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Website	`surfaceCard`	`rounded-card 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-button border border-border-subtle bg-surface-base text-text-primary px-3 py-2 text-body 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-button bg-brand-primary text-text-inverse shadow-sm px-4 py-2 text-body font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
App / Portal	`surfaceCard`	`rounded-card 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-button border border-border-subtle bg-surface-base text-text-primary px-3 py-2 text-body focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.

Marketing Website

Website Colors

Brand

Backgrounds & Text

3D Accent Brushwork

Semantic

Website Typography

Website Spacing

Gradients

Motion

Website Buttons

Website Inputs

Website Cards

Website Badges

Navigation

Hero Section

Your money,everywhere.

Feature Grid

Instant Transfers

Bank-Level Security

Multi-Currency

Dark Section

Trusted by millions worldwide

App / Portal

App Colors

Primary Scale

Surfaces

Status (with backgrounds)

App Typography

App Layout

App Shadows

App Buttons

App Inputs

App Badges

Toggle & Progress

Data Tables

Dropdowns

Wallet Card

Transaction List

Send Money Flow

Send Money

Sidebar Navigation

Modal / Dialog

Confirm Transfer

Toast Notifications

CSS Variables

Tailwind Mapping

Your money,
everywhere.