PostFinanceiOS app — UI kit

Six screens. Petrol foundation, gelb accents, Swiss restraint.

A high-fidelity recreation of the PostFinance iOS app, post-March 2025 rebrand. Petrol #004B5A carries the brand spine; gelb #FFCC00 appears as accent only. Demo data throughout.

01 · Auth

Welcome back, Anna.

9:41

PostFinance

Welcome back,
Anna.

Use Face ID to access your account.

Tap to unlock

02 · Home

Account, quick actions, recent activity.

9:41

Hi, Anna

Private account

···· 5325 7

CHF4 218.50

Recent activity

Migros

Today · 14:32 · *5410

− CHF 89.40

Starbucks Bahnhof

Today · 09:15 · *5410

− CHF 6.80

Marco Bianchi

Yesterday · TWINT

+ CHF 120.00

Rent · April

1 Apr · standing order

− CHF 1 850.00

Insight · for you

You could save CHF 84/month by moving idle cash to a Sparkonto Plus.

Home

Payments

Invest

Offers

Services

03 · Payments

QR-bill, IBAN, TWINT, standing orders.

9:41

Payments

Pending

Krankenkasse · Helsana

Due 5 Apr · scheduled

− CHF 412.00

Swisscom

Due 12 Apr · QR-bill

− CHF 89.50

Home

Payments

Invest

Offers

Services

04 · Invest

Portfolio total + holdings.

9:41

Investment & Retirement

CHF 595'389.49

+CHF 12'430this month▲ 2.14%

Holdings

Self-directed funds

2 products

CHF 1'770.11+

▲ +12.50% YTD

Managed portfolios

1 portfolio

CHF 4'000.11+

▲ +12.50% YTD

E-trading

1 account

CHF 12'340.45+

▲ +8.23% YTD

Your assets are protected

Bank-level security & Swiss regulation

Learn more

Home

Payments

Invest

Offers

Services

05 · Offers

Petrol surfaces, gelb accents only.

9:41

Offers

Personal

Open a savings account · 1.25%

Switch in under 5 minutes

Cashback

Migros · 5% back this weekend

Use your PostFinance card

Travel

No fees on EUR purchases

Until 30 June

Mortgage

Rate check in 2 minutes · 0.94%

No credit pull required

Home

Payments

Invest

Offers

Services

06 · Services

Cards, profile, security, settings.

9:41

Services

Cards

2 active

Profile & limits

Retirement (3a)

E-Trading

Notifications

Settings

Home

Payments

Invest

Offers

Services

PostFinance

Design system · v1

A calm, confident,
unmistakably Swiss banking system.

Tokens, components, and patterns for the post-March-2025 PostFinance rebrand. Petrol carries trust; gelb signals opportunity; restraint ties it together. Everything below is wired with copy buttons — tap a token to grab it.

petrol-9#004B5Agelb#FFCC00radius pill100pxshadow-md0 20 40 / .06typePF Grotesk → Inter

01 — Foundations

A few principles, applied consistently.

The whole system rests on a small set of decisions. Internalise these and the rest follows.

01

Clarity over cleverness

Plain language and pixel-aligned hierarchy. The customer should know what to do in two seconds.

02

Two weights, one job each

Light 300 carries body and most UI. Bold 700 sets headings and CTAs. Nothing in between.

03

Petrol holds, gelb signals

Petrol is the foundation — surfaces, cards, primary buttons. Gelb is reserved for moments that matter.

04

Calm motion, calm shadows

Soft and large rather than sharp and small. Apple-like ease, no bounce. Like a Swiss train.

02 — Brand mark

Five lockups, applied with discipline.

The wordmark is the primary identity. The signet shows up in app icons and ultra-compact placements. White-on-petrol is the only reverse variant.

Primary wordmark

Petrol on white. Default for headers and footers.

On gelb

Petrol wordmark on the brand yellow. Allowed for product callouts.

Reversed · on petrol

The only time the wordmark inverts to white.

App icon · mark

Signet on gelb, 22px corner radius. The iOS / Android home-screen tile.

Signet only

The petrol cross-glyph at its smallest. Avatars, micro-placements.

↕ ≥ 26px

Clear-space rule

Reserve at least the height of the signet around every lockup. Never crop, recolor outside the petrol/gelb/white set, or place on busy photography.

03 — Color

Petrol holds the line. Gelb is reserved.

Eleven petrol steps cover surfaces from soft tints to deep tiles. Gelb appears as accent only — never as a wash. The whole foreground stack is petrol-tuned.

#E6EEF0

#C2D4D8

#99B5BC

#6F95A0

#4A7984

#2A6470

#15555F

#074E58

9★

#004B5A

#003D49

#002B33

Petrol — primary brand

Eleven steps, light to dark. Petrol-1 (#E6EEF0) is the lightest screen tint; petrol-9 (#004B5A) is the brand primary; petrol-11 (#002B33) is the deepest text.

Gelb — accent only

Used for primary CTAs, opportunity moments, and key data points. Never a background wash.

Your money, simply.

Pay, save, invest — all in one place.

Caption · meta

Foreground · all petrol

Text resolves to petrol — fg-1 is petrol-11, fg-2 is petrol-9, fg-3 is petrol-6, fg-4 is petrol-4. Never grau.

infosystem messagingbg #EAF3F8 · fg #1F5E85

successsent / completedbg #E6F4EC · fg #1E7A48

pendingscheduled / awaitingbg #FFF4D6 · fg #8A6300

dangererrors / blockedbg #FBE7E5 · fg #B3261E

Semantic pairs

Each ships as a (-bg, -fg) duo, tuned for inline status messages, badges, and toasts.

Grau — neutral 8 steps

Reserved for backgrounds and inactive states. Foreground text stays petrol.

Grapefruit 5#E5755A

Grapefruit 2#F9D5CB

Hellblau 5#5290B9

Hellblau 1#EAF3F8

Secondary · grapefruit + hellblau

Secondary palettes for warm product moments (grapefruit) and information surfaces (hellblau).

04 — Typography

Two weights. Light does the work.

PostFinance Grotesk in production, Inter as the open-source fallback. The contrast between Light 300 and Bold 700 IS the type system.

Banking that gets out of your way.

Display XL · 64 / 700

Pay, save, invest — in one app.

Display L · 48 / 300

Open an account in 8 minutes.

Display M · 36 / 700

Display scale

Hero typography for marketing surfaces. Generous tracking-tight headlines, light follow-ups.

Aa Light

300 · body, ui, most surfaces

Aa Bold

700 · headings, ctas, emphasis

Weights

Two weights, no in-between. Light feels modern; bold carries weight precisely because it is rare.

H1 · 32 / 700Your money, simply.

H2 · 24 / 700Recent payments

H3 · 20 / 700Account summary

Body L · 18 / 300A clear, calm overview of where your money is.

Body · 16 / 300Send, receive, scan QR-bills, split costs in seconds.

Body S · 14 / 300Last sync just now · CHF amounts in Swiss formatting.

Caption · 12 / 700 · uppercaseSECTION LABEL

In-app scale

Headings ladder down through petrol-11 → petrol-9 → petrol-6. Body stays Light 300; captions go Bold 700 + uppercase.

05 — Spacing

A 4-pixel base. Twenty everywhere.

Every spacing decision is a multiple of 4. The grid gutter and screen-edge padding are both 20px — that's the rhythm of the whole product.

space-14px

space-28px

space-312px

space-416px

space-5 ★20px

space-624px

space-832px

space-1040px

space-1248px

space-1664px

space-2496px

space-32128px

★ space-5 (20px) is the canonical grid gutter, screen-edge padding, and section indent.

06 — Radii

Two shape signatures: 20 and 100.

20px rounds every card, tile, and feature surface. 100px makes every CTA a pill. Sharp corners do not appear in product UI.

xs4px

sm · input8px

md12px

lg ★ card20px

xl32px

pill ★ cta100px

full9999px

07 — Shadows

Soft, large, low opacity.

Three steps that signal elevation without weight. No coloured shadows, no inner shadows, no harsh drops.

shadow-sm0 8px 24px rgba(0,0,0,0.04)

shadow-sm

hover lift

shadow-md0 20px 40px rgba(0,0,0,0.06)

shadow-md

resting card

shadow-lg0 40px 80px rgba(0,0,0,0.08)

shadow-lg

modal · focus

08 — Iconography

Two tiers. System stays petrol; composite earns its gelb.

System icons are 1.6px stroked, 24×24, petrol on petrol-1. Composite icons compose petrol stroke with exactly one gelb fill disc — used to draw attention without breaking the calm.

home

send

swap

settings

plus

chevron

card

house

user

bell

trending-up

tag

pig

doc

shield

calendar

globe

msg

logout

face-id

eye

System icons

One stroke weight, one disc. No filled icon system; status uses a thin stroke + small dot.

Scheduledpetrol bill + gelb clock

Insightpetrol bars + gelb spark

Card alertpetrol card + gelb warning

Verifiedpetrol shield + gelb check

Save morepetrol pig + gelb plus

Composite icons (IconAccent)

Petrol stroke with one gelb fill disc behind a sub-glyph. Used at 32–40px in surfaces that deserve the brand's full voice.

09 — Components

Building blocks, fully specced.

Each component below ships with the exact tokens and props used across the kit. Click any chip to copy the value.

Primary

Secondary

Accent

Ghost

Buttons

Pill 100. Padding 14×28 (12×24 in dense lists). 1.5px transparent border on the variant baseline so secondary aligns at the same height. Press transforms to 0.98 over 80ms.

InfoSentPendingFailedNewFeatured

Badges

Pill chips for status. Two custom ones at the end pair petrol-1 / gelb for product context.

Sent. CHF 1 200.50 will arrive within seconds.

Heads up. Your card expires in 3 weeks.

We didn't recognise those details. Try again, or reset your password.

Toasts

Inline status messages, one stroke icon + bold lead + light follow.

IBAN

CH56 0900 0000 8500 5325 7

Swiss IBAN format

anna@example.ch

Focused state

Reference

invalid

Reference number is not valid.

Inputs

8px radius, 1px hairline → petrol-9 on focus, danger-fg on error. Labels are 12 / 700, helper is 11.

Workhorseradius 20 · bottom hairline

White on grey

BALANCECHF 4 218.50

Petrol hero

Soft tilepetrol icon + 1 gelb detail

Mid · petrol-1

Used sparinglymoments only

Gelb accent

Card surfaces

Five flavours. Petrol hero + animated shine for the hero moment; petrol-1 for soft tiles; gelb sparingly; the krypto gradient is reserved for that single product surface.

Migros

Today · 14:32

− CHF 89.40

Marco Bianchi

Yesterday · TWINT

+ CHF 120.00

Rent · April

1 Apr · standing order

− CHF 1 850.00

List rows

Wrapped in PFCardList — single rounded white card, internal divider only, last row's separator is suppressed automatically.

Home

Payments

Invest

Offers

Services

Tab bar

Five tabs. Active uses petrol-9 with bold label and 1.8 stroke; inactive uses petrol-4 with light stroke. No background, no glassy blur.

10 — Voice

Direct over decorative. Confident over cute.

The voice is Swiss-direct and human. Plain language IS the trust signal — short sentences, no exclamation marks, no synthetic warmth.

✓ On voice

Banking that gets out of your way.

Sent. CHF 1 200.50 will arrive within seconds.

Nothing here yet. Scan a QR-bill to get started.

We didn't recognise those details. Try again, or reset your password.

✕ Off voice

Discover a smarter way to manage your finances! 🚀

Yay! Your money is on its way! 💸

Hey there, money buddy! Looks like it's a bit empty…

Are you absolutely sure you want to do this?

11 — Motion

Calm. Like a Swiss train pulling into a station.

Smooth fades and gentle slides. No bounces, no overshoots, no springs. Three durations, two easings.

soft ease-out

page transitions, sheet open

ease-in-out

tab switch, color change

Easings

Apple-like soft ease for arrivals; standard ease-in-out for state changes.

fast

150ms

base

250ms

slow

400ms

Press states snap with a 60–80ms scale(0.98); reduced-motion users get the end state immediately.

Durations

Three steps. Anything longer than 400ms feels slow; anything shorter than 150ms feels nervous.

12 — Handoff

Drop it in. Tokens, snippets, and a checklist.

Everything below is meant to be copied. The full token sheet is one click; component snippets compose on top.

css:root {
  /* Petrol */
  --pf-petrol-1:  #E6EEF0;
  --pf-petrol-9:  #004B5A;  /* brand primary */
  --pf-petrol-11: #002B33;

  /* Gelb */
  --pf-gelb:      #FFCC00;
  --pf-gelb-dark: #E6B800;

  /* Foreground (petrol family) */
  --pf-fg-1: var(--pf-petrol-11);
  --pf-fg-2: var(--pf-petrol-9);
  --pf-fg-3: var(--pf-petrol-6);
  --pf-fg-4: var(--pf-petrol-4);

  /* Type */
  --pf-font: "PostFinance Grotesk", "Inter",
             -apple-system, system-ui, sans-serif;
  --pf-weight-light: 300;
  --pf-weight-bold:  700;

  /* Radii */
  --pf-radius-card: 20px;
  --pf-radius-pill: 100px;

  /* Shadows */
  --pf-shadow-md: 0 20px 40px rgba(0,0,0,0.06);
}

tokens.css

The minimum token sheet. Drop it in :root and the rest of the system inherits.

tsx<button
  style={{
    background: "var(--pf-petrol-9)",
    color: "var(--pf-white)",
    padding: "14px 28px",
    borderRadius: "var(--pf-radius-pill)",
    fontWeight: 700,
    fontFamily: "var(--pf-font)",
    border: "1.5px solid transparent",
  }}
>
  Pay now
</button>

Primary button

Plain JSX example. In the kit, prefer the typed PFButton kind=primary wrapper.

tsximport { PFCardList, PFTxRow } from "@/components/PFKit";

<PFCardList>
  <PFTxRow icon="cart" name="Migros"
    meta="Today · 14:32" amount="89.40" />
  <PFTxRow icon="send" name="Marco Bianchi"
    meta="Yesterday · TWINT" amount="120.00" sign="+" />
</PFCardList>

Card list

Wrap a stack of rows. The wrapper auto-clones the last child to drop its bottom divider.

1Use petrol-9 #004B5A for primary surfaces and CTAs.
2Use gelb #FFCC00 only for accents — never as a background wash.
3Card radius 20px. CTA pill radius 100px. No sharp corners in product UI.
4Foreground text resolves to petrol family (fg-1 → fg-4), never grau.
5Two type weights: Light 300 for body, Bold 700 for headings and CTAs.
6Section rhythm comes from white ↔ #F8F8F8 contrast, not dividers.
7List groups wrap in PFCardList — internal dividers, last row clears.
8Composite icons use exactly one gelb fill disc. No more.
9Motion: cubic-bezier(0.32, 0.72, 0, 1), 150 / 250 / 400 ms.
10Krypto gradient is the ONLY place petrol-to-gold gradient appears.

Implementation checklist

Ten rules to keep the system honest. If you find yourself breaking one, double-check why.