Stack

Design system

Swiss-editorial banking. One signal red on warm paper, black ink, hairline borders, sharp corners everywhere. Color is reserved for meaning: red for actions and the current moment, category colors only for data.

Good evening Ask before you spend

22Jul

Colors

Every hex below is sampled 1:1 from the lossless PNG exports of the screens — these are the exact values in the design file.

Surfaces & ink

Paper--paper#F4F3F0

Card--card#FFFFFF

Ink--ink#000000

Ink soft--ink-soft#111111

Text secondary--text-secondary#5D5D5D

Text muted--text-muted#9B9B9B

Border / track--border#E4E4E4

Border warm / secondary button--border-warm#EBE9E4

Accent

One red. It marks actions, the active tab, the current date, and eyebrows — never decoration.

Signal red--red#D50000

Red deep (pressed)--red-deep#B10000

Budget categories

Data colors for the budget donut and rows. The fifth segment is ink.

Dining out--cat-blue#1F6FEB

Shopping--cat-gold#F5C518

Transport--cat-green#0F7A5A

Groceries--cat-purple#7A3EA3

Everything else--cat-ink#111111

Goal colors

A second, deeper family so goals never read as budgets.

Bali Trip--goal-teal#0D8B8B

Wedding--goal-magenta#C2185B

Student Loans--goal-violet#6B3FD4

Car Down Payment--goal-amber#B06A00

Type

One family — Helvetica Neue — carried by weight and size, never by color. Sizes measured from the 2× exports (390 pt frame).

Samantha

--text-display · 700 · 44/46 · -0.02em

$2,400

--text-stat · 700 · 40/44 · tabular

Your month overall

--text-title · 700 · 17/22

You're on track today, keep it up.

--text-body · 400 · 15/22

One week to go, and you're tracking to finish without going over.

--text-secondary · 400 · 13/18

Quick insights

--text-eyebrow · 700 · 12 · caps · +0.08em

Reports

--text-tab · 500 · 10/12

Spacing & radius

A 4 pt grid. And one deliberate rule: corner radius is 0 everywhere — cards, buttons, chips, progress bars. The sharpness is the brand.

--s-1 (4px)

--s-2 (8px)

--s-3 (12px)

--s-4 (16px)

--s-5 (20px)

--s-6 (24px)

--s-8 (32px)

--radius (0px)

Components

Buttons

primary

secondary

text

Ask input & suggestion chips

Can I afford a $60 dinner tonight? How am I doing this month?

Budget rows

Dining out $32

Shopping $30

Groceries $96

Month widget

Goal tiles

▦

Bali Trip

▦

Wedding

Savings-split donut

Bali Trip · 34%

Wedding · 24%

Student Loans · 22%

Car Down Payment · 20%

Checkbox

✓Always sort Starbucks into Dining out

Tab bar

⌂Home ◔Budget ∿Reports ◎Goals ☺Profile

Screens

The exported frames these tokens were sampled from.

Reports insights — 07 Reports — insights

Transaction sort — 12 Transaction — sort

Transaction split — 13 Transaction — split

Provenance: every color was sampled pixel-for-pixel from the lossless PNG exports in stack screens/screens-no-bezel (2× of the 390 pt frame), so the hex values are exact. Type sizes were measured from glyph heights in the same exports (±1 px). The typeface renders as Helvetica Neue. Components on this page are CSS reconstructions of the shipped screens.