spendyard Back to home
Design System · v1.0 · April 2026

The Spendyard style guide

Every choice that makes the product look like the product — tokens, type, components, and the rules they live by.

№ 01

Principles

The four guardrails behind every design decision.

Editorial, not corporate
Spendyard is finance software that doesn't try to look like finance software. We borrow from print — generous serifs, mono numerals, dossier-style headings — to feel considered and human, not enterprise.
Tactile over flat
Subtle paper texture, perforated edges, tape, stamps. The product is a metaphor for organising physical things. Never lean on glossy gradients or glassmorphism — they break the metaphor.
Numbers are the hero
Spend numbers do the talking. Mono typography with tabular figures, generous size, tight tracking. Everything else is supporting cast.
Restraint with one bold accent
A muted kraft palette holds the foundation; amber appears only where attention is genuinely warranted. Overuse the accent and it stops meaning anything.
№ 02

Colour

A warm, subtractive palette. Think kraft paper, India ink, and a single jar of orange pigment.

Paper tones
Ink tones
Accents & semantics
Rules of use
  • · Kraft is for the app shell. Paper is for cards. Never reverse them.
  • · Amber appears on at most one element per screen region. Reserve it for the thing the user should look at.
  • · Moss for confirmed/matched states. Wine for medium-severity warnings only.
  • · On dark surfaces, swap to Amber 2 — the lighter shade reads correctly against ink backgrounds.
№ 03

Typography

Three families, each doing one job and not interfering with the others.

Fraunces
Display
Headings, hero numbers, quotes
Spend, in order.
Inter Tight
Body
UI labels, paragraphs, buttons
The quick brown fox jumps.
JetBrains Mono
Numerics
All numbers, labels, code
$2,840.00 · 92%
Type scale
Display XL
72px
500
$4,839
Display L
56px
300
Your software, in order.
Display M
44px
300
All subscriptions
Heading
26px
500
By category
Subheading
20px
500
The aperture
Body L
14px
400
Each subscription gets its own forwarding address.
Body
13px
400
Choose from our existing catalogue, or add your own.
Caption
12px
400
Last indexed 22.04.2026
Eyebrow
10px
500
DOSSIER № 04 — APRIL 2026
№ 04

Spacing & layout

A 4-pixel base, generous outer margins, tight inner density.

Spacing scale
1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
Card stack
Standard card
Card title
1px border, 2px shadow, paper background.
Stat card
Monthly spend
$5,839
№ 05

Components

Patterns the product uses repeatedly. If you find yourself reaching for something else, ask first.

Buttons
· Use primary for default actions, amber only for AI/insights, ghost for secondary.
Chips & stamps
matched missing pendingReviewFiledArchived
Form inputs
Progress bars
Healthy (≥85%)92%
Normal (35–85%)66%
Underused (<35%)20%
Decorative ornaments
Perforated edge
Dashed divider
Tape
№ 06

Iconography

Lucide icons at 14–16px, 1.8 stroke weight. Functional, never decorative.

Outflow
Catalogue
Inbox
Receipts
AI
Document
Email
Upload
Date
Seats
Payment
Notify
Find
Done
Warn
Reveal
№ 07

Motion

Restrained. Easing matters more than duration.

Fade up
Page enter, modal open
500ms · cubic-bezier(.2,.8,.2,1)
Hover rise
Cards on hover
200ms · cubic-bezier(.2,.8,.2,1)
Progress fill
Bar animations
600ms · cubic-bezier(.2,.8,.2,1)
Rules
  • · Use one easing curve everywhere: cubic-bezier(.2,.8,.2,1) — confident, not bouncy.
  • · Page enter staggers child elements with animation-delay increments of 50ms.
  • · Hover effects translate by no more than 2px. Never scale.
  • · No spinners — use shimmering skeletons or text states ("Parsing document…").
№ 08

Voice & tone

How the product talks. Concise, dry-witted, never breathless.

Do
“Your software, in order.”
“AI parsed and matched.”
“We never touch your personal inbox.”
“Receipts, filed.”
Don't
🚀 Supercharge your SaaS spend!
Get instant AI-powered intelligence!
Don't worry — we've got you covered!
Let's optimise your tech stack together!
Our voice is the voice of a competent bookkeeper who happens to be witty at dinner. We use periods, not exclamation marks. We name things plainly: receipts, renewals, seats. Where copy needs warmth, we let an italic serif word do the work — like in order, or filed — rather than emoji or rhetorical flourish.
Spendyard Design System · v1.0 · Maintained by the design team
Filed.