Vault Design System

Vault is a corporate expense management platform with a clean, minimal design. The system uses Inter and Flecha typography, tight letter-spacing, and a restrained color palette with orange accents.

Source: · Platform: Next.js · Theme: light

Website

Color System

Brand

Vault Orange is the primary brand color, used for CTAs, accent numbers, and interactive highlights. The dark near-black is used for headings and dark sections.

#FF5900
brand-orange
#FFB258
brand-warm
#15191E
brand-black
#000710
brand-dark
#FFFFFF
white
#FCFCFD
off-white

Backgrounds

#FFFFFF
bg-primary
#F9F9FB
bg-secondary
#F3F3F7
bg-tertiary
#15191E
bg-dark
#000710
bg-darkest

Text

#15191E
text-primary
#60646C
text-secondary
#6F737B
text-tertiary
#8B8D98
text-muted
#B9BBC6
text-light
#FCFCFD
text-inverse

Semantic / Status

#27A644
success
#F0BF00
warning
#EB5757
error
#4EA7FC
info

Borders

rgba(66,87,138,.15)
border-subtle
#E5E5E5
border-default
#D5D5D5
border-input
Website

Typography

Font Families

Inter — Primary font for all UI, headings, body, navigation, buttons

Flecha — Serif display font used for testimonial quotes

Bronzea — Decorative brand accent font

Space Mono — Monospace for code and data labels

Display 1 — Hero Headlines

Finance built for speed.
Size72px
Weight500 (Medium)
Line Height72px (1.0)
Letter Spacing-1.44px (-0.02em)

Heading 1 — Section Headings

The card is just the start.
Size48px
Weight500 (Medium)
Line Height48px (1.0)
Letter Spacing-0.96px (-0.02em)

Heading 2 — Feature Headings

Control spend before it happens.
Size36px
Weight500 (Medium)
Line Height36px (1.0)
Letter Spacing-0.72px (-0.02em)

Heading 3 — Card Titles

Corporate cards
Size24px
Weight500 (Medium)
Line Height29px (1.21)
Letter Spacing-0.48px (-0.02em)

Subtitle

Modern cards, banking, expenses, accounting, and more.
Size20px
Weight500 (Medium)
Line Height24px (1.2)
Letter Spacing-0.4px (-0.02em)
Color#60646C (secondary)

Body

Body text is set in Inter at 16px with regular weight. This is used for paragraphs, navigation links, and general content across the marketing site.
Size16px
Weight400 (Regular)
Line Height24px (1.5)
Letter Spacingnormal

Body Small / Description

Spend smart globally with powerful cards and built-in controls.
Size14px
Weight500 (Medium)
Line Height21px (1.5)
Letter Spacing-0.28px (-0.02em)

Testimonial Quote (Flecha)

"Vault has been a major gain for us in efficiency."
FontFlecha (serif)
Size36px
Weight500 (Medium)
Line Height40px (1.11)

Key Pattern: -0.02em letter spacing

Vault uses a consistent -0.02em letter spacing across nearly all heading sizes (72, 48, 36, 24, 20, 14px). This creates the tight, modern feel characteristic of the brand.

Website

Spacing & Layout

Spacing Scale (base: 4px)

4
8
12
16
20
24
32
40
48
64
80
96
120

Layout

Nav height: 60px · Container max-width: 1200px · Section gap: 80px · Card padding: 32px

Breakpoints: Mobile 375px · Tablet 768px · Desktop 1024px · Wide 1440px

Website

Borders & Radius

Border Radius Scale

3px
4px
6px
8px
10px
12px
50%

Usage

Buttons: 8px · Nav items: 6px · Cards: 12px · Swatches/images: 10px · Icon buttons: 50% · Badges: 4px

Website

Shadows

Subtle
button shadow
Card
light card
Elevated
card hover
Modal
dialog/overlay

Vault uses extremely subtle shadows. Most surfaces rely on borders rather than shadow for depth. Heavier shadows appear only on modals and elevated overlays.

Website

Motion & Transitions

Hover any box below to see the timing in action.

0.25s
ease-out
Default
0.125s
linear
Fast/micro
0.2s
cubic-bezier
Snappy
0.5s
ease-in-out
Focus ring

Key Values

Default: all 0.25s ease-out

Fast: all 0.125s linear

Snappy: all 0.2s cubic-bezier(0, 0, 0.38, 0.9)

Tab color: color cubic-bezier(0, 0, 0.38, 0.9)

Focus: box-shadow 0.5s ease-in-out, border 0.5s ease-in-out

Website

Buttons

Primary (Orange CTA)

bg: #FF5900 color: #FFF radius: 8px border: 1px solid rgba(66,87,138,0.15) font: 14px/400

Secondary (Outlined)

Ghost (Text Link)

Dark

Disabled

Icon / Round (Carousel Nav)

Website

Cards

Default Card (Border)

Corporate cards

Spend smart globally with powerful cards and built-in controls.

Expense management

Use AI to automate approvals and expense reports. Track in real time.

Feature Card (Gray BG)

Travel

Simplify global travel with in-app booking and management.

Bill pay

Save time with AI-powered invoice entry and payment automation.

Pricing Card

Essentials

$0/user/month

Premium

$12/user/month

Enterprise

Custom
Website

Badges & Pills

Default New Active Pending Failed Processing
Website

Hero Pattern

Full-width white background. Large centered headline (72px/500) + subtitle (20px/500, secondary color) + orange CTA + ghost link. Below: product mockup image (phone/dashboard screenshot). The hero has generous vertical padding (~120px top).

Finance built for
speed and control.
Modern cards, banking, expenses, and more.
Website

Stats / Metrics Pattern

Stat values displayed in 48px orange (#FF5900) with supporting labels. Used in the "Save and earn more" section.

4,250 hrs
saved with AI-powered automation
3.70%
APY on treasury deposits
99%
policy compliance rate
Website

Testimonial Carousel

Tabbed carousel with company names as tabs. Active tab is dark text, inactive is gray (#6F737B). Quote in Flecha serif at 36px. Carousel arrows are round buttons.

DoorDash SeatGeek Lemonade
"Vault has been a major gain for us in efficiency for T&E. It's easy for employees to use."
VP of Finance, DoorDash
Website

CTA Banner

Dark background (#15191E), centered heading (48px) in off-white (#FCFCFD), subtitle, and orange CTA button.

See what Vault can do for you.

Learn how our intelligent finance platform can help your company spend smarter.

App / Portal

Inputs & Forms

Clean, minimal input fields with 44px height, 8px radius, and 1px #D5D5D5 border. Focus state uses orange border + orange ring.

Text Inputs

Specs

Height: 44px · Padding: 12px · Font: 16px Inter · Border: 1px solid #D5D5D5 · Radius: 8px

Focus border: #FF5900 · Focus ring: 0 0 0 2px rgba(255,89,0,0.15)

Error border: #EB5757 · Placeholder: #8B8D98

App / Portal

Signup Flow

Minimal header with logo + "Sign in" button. Centered card with 12px radius border, 40px padding, max-width ~520px. Clean vertical form with labeled fields spaced 24px apart.

App / Portal

Data Tables

Header row in #F9F9FB with 12px/500 gray labels. Rows separated by 1px #F0F0F0 borders. Row hover: #F9F9FB.

TransactionCategoryAmountStatus
AWS ServicesSoftware$2,450.00Approved
Delta AirlinesTravel$567.80Pending
WeWorkOffice$1,200.00Approved
DoorDash CateringMeals$340.50Declined
App / Portal

Modals & Toasts

Modal / Dialog

Confirm transaction

Are you sure you want to approve this $2,450.00 transaction to AWS Services?

bg: #FFF radius: 12px padding: 24px shadow: 0 20px 60px rgba(0,0,0,0.15) overlay: rgba(0,0,0,0.5)

Toast Notification

✓ Transaction approved successfully

bg: #15191E color: #FFF radius: 8px padding: 12px 16px

App / Portal

App Sidebar Navigation

240px width sidebar with #FAFAFA background, 1px #E5E5E5 right border. Items at 14px with 6px radius, 8px 12px padding. Active item has #F3F3F7 background.

Vault
Dashboard
Transactions
Cards
Expenses
Travel
Bill Pay
Settings
Dashboard
Main content area with 32px padding
App / Portal

Toggles & Switches

Off
On

Track: 44x24px radius: 12px · Off: #D5D5D5 · On: #FF5900 · Knob: 20x20px white

Tokens

CSS Custom Properties

Copy-paste ready CSS variables block for use in any project.

/* Vault Design System - CSS Custom Properties */ :root { /* Brand */ --color-brand: #FF5900; --color-brand-hover: #E65000; --color-brand-warm: #FFB258; /* Backgrounds */ --color-bg-primary: #FFFFFF; --color-bg-secondary: #F9F9FB; --color-bg-tertiary: #F3F3F7; --color-bg-dark: #000710; --color-bg-dark-surface: #15191E; /* Text */ --color-text-primary: #15191E; --color-text-secondary: #60646C; --color-text-tertiary: #8B8D98; --color-text-inverse: #FCFCFD; /* Semantic */ --color-success: #27A644; --color-warning: #F0BF00; --color-error: #EB5757; --color-info: #4EA7FC; /* Borders */ --color-border-subtle: rgba(66, 87, 138, 0.15); --color-border-default: #E5E5E5; --color-border-input: #D5D5D5; /* Typography */ --font-sans: 'Inter', -apple-system, sans-serif; --font-serif: 'Flecha', Georgia, serif; --font-mono: 'Space Mono', 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; /* Radius */ --radius-sm: 4px; --radius-md: 6px; --radius-default: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-full: 50%; /* Shadows */ --shadow-subtle: rgba(66, 87, 138, 0.15) 0px 1px 0px 0px; --shadow-card: rgba(0, 0, 0, 0.04) 0px 1px 1px 0px; --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.06); --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.15); /* Transitions */ --transition-default: all 0.25s ease-out; --transition-fast: all 0.125s linear; --transition-snappy: all 0.2s cubic-bezier(0, 0, 0.38, 0.9); /* Layout */ --nav-height: 60px; --container-max-width: 1200px; --sidebar-width: 240px; }

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.
ScopePrimaryBody FontRadiusShadowBreakpoint
Website——6px—{'max': '375px'}
App / Portal—————
ScopeRecipeClass PatternNotes
WebsitebuttonPrimaryinline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 text-body font-semibold transition-colorsPrimary action button using exported brand, radius, and shadow tokens.
WebsitesurfaceCardrounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6Default surface/card treatment for high-visibility content areas.
WebsiteinputFieldrounded-sm 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-ringBase text input treatment aligned to the exported radius, border, and focus tokens.
App / PortalbuttonPrimaryinline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 text-body font-semibold transition-colorsPrimary action button using exported brand, radius, and shadow tokens.
App / PortalsurfaceCardrounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6Default surface/card treatment for high-visibility content areas.
App / PortalinputFieldrounded-md 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-ringBase text input treatment aligned to the exported radius, border, and focus tokens.