Calm.
The interface never comments on the market. The plan leads with months in a row, not today’s value.
Consistency before performance.Design System · Forma FinanceSWISS ETF SAVINGS / 2026
A design system for
staying calm about money.
Forma Finance is the system behind Sparplan, a Swiss ETF savings plan concept. A savings plan only works if people keep going for years. Every token, component and rule here is built for that.
Explore the system ↓01 / THE BUILDING BLOCKS
INTER / REGULAR · MEDIUM · SEMIBOLD
Aa0123
Clear by design.
ONE BLUE. A CLEAR PURPOSE.
02 / A PLAN, NOT A PRICE TICKER
W
My long-term planVanguard FTSE All-World
Active6months in a rowA little, every month.
✓May
✓Jun
✓Jul
✓Aug
✓Sep
Oct
Total investedCHF 1'500
Next purchase · 25 OctCHF 250
Current value CHF 1'542
ACTION / PRIMARYKeep moving forward →One clear next step.
STATUS / ALWAYS EXPLICIT
BoughtScheduledSkipped
↳Built for the long run.
PRIMITIVES → SEMANTICS → COMPONENTSCalm. Clear. Fair.
01 / The problem
One plan. Dozens of screens. Five ways a month can go.
A savings plan isn’t one screen. It shows up in the overview, the confirmation, every monthly purchase, and the moment someone wants to stop. Without shared rules, every screen would invent its own “skipped”. So once the visual direction was set, I built the system before the screens.
01ScheduledA date is set
02PendingMoney has arrived
03BoughtUnits are yours
04SkippedNothing collected
05FailedOrder didn’t go through
THE SHARED VOCABULARY
Five purchase states. The same meaning on every screen.
02 / Principles
Three rules decided everything else.
Principles only matter if they change what gets built.
✓Bought
Clear.
Status is never colour alone. A disabled button always says why.
Nothing left to interpretation.Ⅱ□
Fair.
Stopping looks exactly like pausing. No red button, no guilt copy.
The choice belongs to you.03 / Foundations
Tokens turn the principles into values.
Three tiers (primitive, semantic, component), so each change happens in one place. One blue for action. Up and down colours are a setting, not a fixed rule. Inter for the interface, four radius steps. Exported as tokens.json in W3C DTCG format.
01 / PRIMITIVEblue-600
→#2563EB02 / SEMANTICprimary
→{primitive.blue-600}03 / COMPONENT
button.primary.background01 / COLOURPurpose over decoration
Action blue#2563EB
02 / TYPOGRAPHYInter
Aa
Regular
Medium
SemiboldCHF 1'000
Every detail,
easy to read.
Medium
SemiboldCHF 1'000
Every detail,
easy to read.
03 / SHAPEFour steps
Small4 px
Medium8 px
Large14 px
Pill999 px
04 / Components
Four components where the principles get tested.
Small pieces. Deliberate decisions. Each component carries the rules into the product.
01 / BUTTON↗
One primary action per area.
4 variants, 3 sizes, 5 states. The destructive style is only for actions that can’t be undone, so “Stop plan” never gets it.
02 / AMOUNT INPUT↗
CHF↵
One format. Wherever money appears.Money is never typed by hand.
5 states and a CHF prefix. Every amount goes through one formatter, so it always reads CHF 1'000. Error messages say what to fix.
03 / PLAN CARD↗
W
My long-term planVanguard FTSE All-World
Active6months in a rowA little, every month.
✓May
✓Jun
✓Jul
✓Aug
✓Sep
Oct
Total investedCHF 1'500
Next purchase · 25 OctCHF 250
Current value CHF 1'542
Progress before performance.
Leads with months in a row, total invested and the next purchase. Value sits in muted text.
04 / STATUS BADGE↗
PURCHASE.SKIPPED
No money was collected. Nothing was bought this month. The plan carries on.
3 plan +5 purchase +3 funding
Eleven statuses, no overlaps.
Each status has exactly one definition. Skipped: no money was collected. Failed: money was collected, but the order didn’t go through.
05 / In the productWhere it comes together:
Where it comes together:
stopping a plan.
This is the hardest screen in the case. There are four options: lower the amount, change the date, pause, stop. All four use the same card at the same size, and nothing is pre-selected.
Here the system makes the fair version the default.
↳
INTERACTIVE EXAMPLE / TRY A CHOICE →Equal weight. Real choice.No red button. No guilt copy.
No option chosen for you.
No option chosen for you.
SparplanPlan settings
YOUR PLAN. YOUR PACE.
What works for you now?
You can change how you save. Your investments stay yours.
Choose an option to continue.06 / Maintenance
One source, read by people and AI.
The system lives in one file, and the tokens are generated from it. Claude and Cursor work under rules that allow only token values, so new screens can’t drift. Every change is logged and published to the same link.
〈/〉
Forma FinanceTHE SOURCE OF TRUTH
.html→
01tokens.jsonW3C DTCG format
02ComponentsHTML · CSS · SVG
03AI rulesClaude · Cursor
CHANGE ONCE. CARRY IT EVERYWHERE.
Shared values keep the next screen consistent with the last.
07 / Results
232 components. One source of truth.
A foundation for the screens that come next.
232components
139families
11statuses
7rules, each with a Do and a Don’t
Every component copies as HTML, CSS or SVG.
Tested at five widths, in light and dark mode, in two languages.
NEXT / SPARPLAN
Hi-fi screens. That’s where I’ll measure
how much faster changes get.