A design system rooted in material and intent.
Role
Designer
Project Type
Design System
Personal finance apps treat money as data. They inherit their visual language from the SaaS dashboard: blue primaries, efficiency signals, sterile grids. Aurum asks a different question: what would it feel like if managing your finances felt like you're actually building your wealth? The answer begins with the name. Aurum is Latin for gold, and that single word anchors every token, every colour decision, every motion curve. Not gold as ornamentation, but gold as the medium that stores wealth. The goal was to create something that felt more analog in its sensibility and connected to the idea that money is not just a number. It has weight, texture, and consequence.
Wealth has always been associated with physical things: the cream paper of a private bank statement, the weight of a leather-bound ledger, the warmth of a gold nib. The token names in Aurum are an attempt to capture that feeling in code. Vellum was the surface important documents were written on. Parchment is aged and weighted. Inkwell is a physical instrument. Bullion is the thing itself. These names do design work: they constrain the palette to the warm, material end of the spectrum and prevent cold, digital colours from ever finding their way in. "Does this feel like vellum?" is a useful question. "Does this feel like #F5F2EC?" is not.
Bullion
Bullion Light
Bullion Dark
Inkwell
Vellum
Parchment
Warm White
Border
Vermillion
Emerald
Hover each swatch to reveal the hex value.
SURFACES
Vellum — app background
Warm White — card surface
Inkwell — sidebar, dark surface
Border — dividers, outlines
SIGNALS
Bullion — CTA, active state
Emerald — income, success
Vermillion — expense, error
Parchment — secondary text, labels
Cormorant Garamond was designed for ink on paper, its fine strokes and classical proportions belong to the tradition of elegant stationery, not the screen. Used at display sizes and for large financial numbers, it brings the heritage but remains legible and clear. DM Sans handles the functional layer: labels, body copy, tabular figures. Its neutrality creates the contrast and space for the serif to land. While Cormorant Garamond demands your attention, DM Sans quietly supports it in the background.
DISPLAY
Cormorant Garamond
Weight: 300
Size: 52px
Tracking: −0.02em
Your wealth, defined & refined.
HEADING
Cormorant Garamond
Weight: 400
Size: 40px
Tracking: −0.02em
March Overview
SUBHEADING
Cormorant Garamond
Italic, Weight: 300
Size: 28px
Here's your financial overview
LABEL / NAV
DM Sans
Weight: 600
Size: 10px
All-caps, +0.14em tracking
BUDGET TARGETS · 73% ON TRACK
BODY
DM Sans
Weight: 300
Size: 16px
Line height: 1.7
Track every dollar with the precision of a master ledger. Aurum turns your monthly spending into a story worth reading — and a record worth keeping.
DATA / NUMBER
DM Sans
Weight: 300
Size: 40px
Tracking: −0.03em
$48,562
CAPTION
DM Sans
Weight: 300
Size: 12px
Tracking: +0.03em
+2.4% from last month · Updated just now
Aurum's token-first approach makes WCAG 2.1 AA compliance structural rather than corrective. The palette was designed against physical materials, not a colour wheel, which means warm off-whites against near-black surfaces carry sufficient contrast by their nature. No colour in the system exists for decoration alone: each token has a role, and each role was stress-tested against readability requirements before being committed to code. Color pairings for the most common use-cases were tested to ensure WCAG compliance as shown below.
COLOR PAIR
RATIO
WCAG LEVEL
Inkwell on Vellum — primary body text
13.0:1
AAA ✓
Inkwell on Warm White — cards, panels
13.7:1
AAA ✓
Parchment on Vellum — secondary labels, captions
4.8:1
AA ✓
Bullion on Inkwell — active states, large labels
4.4:1
AA Large ✓
Emerald on Vellum — income, success (large text)
4.1:1
AA Large ✓
Vermillion on Vellum — errors, over-budget
4.6:1
AA ✓
Bullion on Vellum — UI accents, icons, large text
3.1:1
UI / Large ✓
CONTRAST FIRST
All body and label text pairs exceed the 4.5:1 AA minimum. Primary text — Inkwell on Vellum — reaches 13:1 AAA. Bullion (#B1821B) achieves 4.4:1 on Inkwell (AA Large) and 3.1:1 on Vellum (UI components and large text). It should not be used as small body text on light backgrounds.
COLOR INDEPENDENCE
Semantic colours (emerald for income, vermillion for expense) are never the sole signal. Amounts, directional arrows, and category labels always reinforce the meaning, colour is the second layer.
LEGIBLE TYPE
Body copy is 16px DM Sans 300 with 1.7 line-height — above WCAG minimum size guidance. Display numerals use Cormorant Garamond at 40px+, where the 3:1 large-text threshold applies.
Motion & Interaction
Motion in Aurum follows the same rule as everything else: nothing draws attention to itself. Every transition is connected and continuous, no linear eases that feel mechanical. There are exactly two configs: a snappy open spring for panels entering the viewport, and a faster close spring for dismissals. The asymmetry is intentional: things should open with presence and close without ceremony. The spending chart below demonstrates the stagger: each bar grows from zero with a small delay, giving the data time to land. The motion says nothing. The data does.
SPRING PRESETS — CLICK EACH ROW TO FEEL THE DIFFERENCE
BUDGET PROGRESS — RE-ANIMATES ON DATA CHANGE
SAVE / DELETE MICRO-FEEDBACK
Spacing
Aurum's spacing system is built on a single base unit: 4px. Every gap, every padding value, every margin traces back to a multiple of four. The scale runs from tight icon gaps at 4px to generous section padding at 120px, with the primary surface rhythm sitting at 24px, the value used for all panel and card insets throughout the product.
Conclusion
A design system is only as good as the idea it is built around. For Aurum, that idea was simple: every decision should feel like it was made on purpose. The token architecture is not a style guide tacked on after the fact; it is a core part of the product. When every colour, every spacing unit, and every motion curve traces back to a single source of truth, consistency stops being something you have to check for and becomes something that is structurally guaranteed. Accessibility follows the same logic. The contrast ratios were not retrofitted to meet a standard. They were chosen because legibility is part of what makes an interface feel considered. When the token is right, every component that uses it inherits that quality automatically. That's the goal of every design system: to ensure consistency, streamline handoff, and improve efficiency.
