— Walletloop · Design system v0.4

Two registers,
one feeling.

Last update19 May 2026
OwnerWalletloop Design
StatusStable

The marketing surface is cinematic, dark, and loader-driven. The app is calm, light, and gets out of the way. Two languages, one underlying typographic and color logic. This page is the source of truth for both.

01 — Type

Type scale

Fraunces for display, Inter for UI, JetBrains Mono for labels & numbers.

Walletloop
Display XLFraunces 400
96 / 88px · letter -3%
Loyalty inside the wallet.
Display LFraunces 400
64 / 60px · letter -3%
Section heading
H1Fraunces 500
40 / 44px · letter -2%
Subsection / panel title
H2Inter 500
28 / 32px
Body copy. The base reading size in the app, used for paragraphs, descriptions, list items. Inter, 400, 15px, line-height 1.55.
BodyInter 400
15 / 23px
Eyebrow · 11px caps · spaced .2em
EyebrowJetBrains Mono 500
11px caps · letter .2em
02 — Color

Tokens

Neutral UI palette for the app. Two brand palettes that theme any surface. Cinematic palette for marketing.

Neutral UI · light app

bg#FAFAF7
surface#FFFFFF
surface-2#F4F4EF
line#E8E6DF
text#16170F

Cinematic · marketing

bg#0A0A0C
bg-2#111114
bg-3#1A1A1F
text#F4F0E8
accent#E8B500

Brand · Nordhem

primary#0A4595
primary-2#083573
primary-3#052754
accent#E8B500
text-on#FFFFFF

Brand · Bauwerk

primary#FF7300
primary-2#E25E00
accent#1A1A1A
surface#FAFAF7
text-on#FFFFFF
03 — Spacing

8pt grid

All padding, gaps, and offsets snap to this scale. No half-pixels, no orphans.

s-1 4px
s-2 8px
s-3 12px
s-4 16px
s-5 24px
s-6 32px
s-7 48px
s-8 64px
s-9 96px
s-10 128px
04 — Form

Radius & elevation

Five radii, three elevation levels. Buttons use r-2/r-pill; cards use r-3/r-4; wallet pass uses r-card (18px).

r-14 px
chips, ticks
r-28 px
buttons, inputs
r-312 px
panels
r-416 px
large cards
r-card18 px
wallet pass
elev-1subtle separation
cards · dropdowns
elev-2medium float
popovers · tooltips
elev-3strong float
modals · sheets
05 — Components

Building blocks

Two button registers (app + cinematic), inputs, and cards.

Buttons · app (light)
Buttons · cinematic (dark)
Inputs
Card
New offer
Linen duvet, second night free

Members-only, in-store, this week.

Chart styling
InstallsScansRedemptions
06 — Motion

Motion guidelines

Animation is currency. Spend it on marketing. Save it in the app.

— Allowed · marketing
Cinematic, scroll-driven, loader-led
  • Page loader · 1.6–2.8s, bar + counter
  • Hero parallax, mouse-tilt on wallet card
  • Section reveal · 600–1000ms, ease-out
  • Headline mask-rise · per line, staggered
  • Marquees · 40s infinite, no reverse
— Forbidden · app
No theatre in the workspace
  • No page loaders
  • No scroll-triggered reveals
  • Transitions ≤ 200ms, ease-out only
  • Hover lifts ≤ 1px
  • Charts may animate once on mount (≤ 600ms), never again
— Easing curves
Two functions

cubic-bezier(.2,.7,.2,1) — marketing reveals.

cubic-bezier(.4,0,.2,1) — app micro-interactions.

— Reduced motion
Respect it

All scroll reveals, parallax, and the loader collapse to a 120ms fade when prefers-reduced-motion: reduce. The page must remain fully readable without animation.

07 — In situ

Both registers

The two voices, side by side. Same brand. Same idea. Different job.

— Cinematic surface

Loyalty that lives
inside the wallet.

The marketing register. Big serif, ample air, accent gold, optional grain. Used on the landing page, auth, and any narrative surface where we are selling, not serving.

— App surface

Welcome back, Anna.

The workspace register. Inter, generous whitespace, restrained color, no shadow theatrics. Reads like a serious tool.