Halden Design System

Colour

Cool slate neutrals, a single jade accent, and semantic colours reserved for money states. Positive and negative amounts never borrow the accent.

Showing light theme values

Neutrals

Brand

Semantic

Data visualisation

Typography

Manrope for the product: geometric, warm and with tabular figures, so money lines up in columns. Fraunces is kept for editorial moments only. IBM Plex Mono for IDs and code.

DisplayFraunces 400 · 72/1.02

Money, calmly.

BalanceManrope 750 · 46 · −0.045em · tnum

$3,949,190.52

Page titleManrope 700 · 26 · −0.03em

Good morning, Nora

SectionManrope 700 · 15

Needs your attention

BodyManrope 500 · 14/1.5

Scheduled 2 days before the due date so cash stays in the account longer.

CaptionManrope 600 · 12.5 · ink-3

Leo Hart · Card ••3310

MonoIBM Plex Mono 400 · 12.5

INV-20931 · HLD-5RQK2T

Space & radius

A 4px base scale. Radius grows with the size of the surface: controls 8–10px, cards 16px, dialogs 22px.

Elevation

Three levels. Most surfaces sit at level 1. Level 3 is reserved for things above the page: dialogs, drawers and toasts.

--shadow-1
cards, inputs

--shadow-2
hover, popovers

--shadow-3
dialogs, drawers

Motion

Three durations and two curves cover every animation. Tap a card to play it.

Buttons

Primary (ink) for the main action on a page. Accent for money-moving confirmation only. Secondary and ghost for everything else. Loading keeps the button’s width.

<button class="btn btn-accent btn-lg">Send $12,000</button> · add .is-loading while waiting

Inputs

42px tall with a visible border, so fields read as fields. Errors say what to do, next to the field.

DefaultHelper text sits below.

Focused

ErrorEnter a work email like name@company.com.

With prefix

$

Select

Disabled

<div class="field has-error"><label class="label">…<input class="input"><span class="hint">…

Selection

Switches take effect immediately. Segmented controls switch views. Chips filter lists. Tabs switch between groups of the same thing.

Try them

Status & identity

Badges carry state with a dot and a word, never colour alone. Merchants get a coloured tile, people get their photo.

NeutralSettledNeeds approvalDeclinedScheduledMatched

NLawsFDK⌘K

−$1,125.00+$42,318.90

Payment cards

Four finishes so people can tell cards apart at a glance. Hover for the light sweep. Tap to flip. The frozen state frosts the card wherever it appears.

Feedback

Toasts confirm and offer undo. Empty states say what will appear and how to add it. Skeletons match the layout they replace.

Approved Sofia’s request

You’re all caught up

New requests will appear here and in Slack.

Data display

Amounts are right-aligned with tabular figures. Rows group by date. Everything that opens something shows a pointer and a hover state.

Merchant	Category	Amount
aws Amazon Web ServicesLeo Hart · Card ••3310	Software	−$18,420.16
S Stripe payoutOperating ••4821	Revenue	+$42,318.90