Design System Inspiration of Vipps
1. Visual Theme & Atmosphere
Vipps is Norway's mobile payment app — for sending money, splitting bills, collecting money, wish
lists, paying bills and paying in shops ("tæppe i butikken"). It is run by Vipps MobilePay AS
(Norwegian org. no. 918 713 867), which works "fordelt på fire kontorer i Norge, Danmark og Finland"
and reports 12.5M users, 400,000+ merchants and 4 markets on its business site. Vipps calls itself
"Norges best likte merkevare".
The site is warm and loud: a peach ground #fff4ec, an orange bar #ff5b24 under a
near-black toolbar #161225, near-black text #0f0e0e, and purple #722ac9 pills
for the actions measured on the home page. Type is Vipps's own VeryVerySans.
What makes it worth reading:
- A semantic layer over ramps.
--general-* roles — content-primary, content-interactive- hover, surface-sunken, border-focus, surface-branded — over --color-* ramps (orange,
neutral, blue, green, red, lavender, lime, amber, bronze).
- Two button generations side by side. The orange system (
--button-primary-surface-*
#ff5b24 → #ff8c4f → #d34718) and the purple one live on the page (--button-primary-color- background-* #722ac9 → #8851f6 → #551488); the measured home-page pills use purple.
- Warm neutrals. The neutral ramp leans red (
#f9f6f6, #6e6a69, #0f0e0e).
Primary tasks
- Learn what Vipps does; get the app.
- Switch to the business site; find help.
2. Color Palette & Roles
Measured with getComputedStyle on vipps.no: 854 root custom properties — --button-* 141,
--color-* 70, --general-* 36, --font-* 35, and component groups (radio, toggle, badge, tabs,
checkbox …). All first-party.
Orange (brand)
- Brand (
#ff5b24) — --general-background-brand, --color-orange-550; the top bar.
- Brand hover (
#ff8c4f) · Brand pressed (#d34718) — --button-primary-surface-*.
- Content interactive (
#f05400) → hover (#a9330b) → pressed (#802000) — orange text links.
- Surface branded (
#ffece5).
Purple (home-page actions)
- Purple (
#722ac9) → hover (#8851f6) → pressed (#551488).
- Lavender (
#f1ebff) — the secondary pill's hover.
Text, surfaces and lines
- Foreground (
#0f0e0e) — --general-content-primary.
- Text secondary (
#6e6a69) · Text tertiary (#b0acab).
- Ground (
#fff4ec) — the page body · Canvas (#ffffff) · Surface (#f9f6f6) ·
Surface sunken (#f2eeed) · Toolbar (#161225).
- Border subtle (
#d9d5d4) · Focus (#5a78ff, --general-border-focus).
Status
Positive #006628 · Negative #c60000.
3. Typography Rules
Font family
VeryVerySans (variable, 300–700), VeryVerySans, Arial, sans-serif, loaded (document.fonts).
Scale
Body and navigation 16px/400; pill buttons 16px/500.
4. Component Stylings
Measured on the home page, focus read under a real Tab key, a hover counted only when :hover
matched.
- Primary pill — Tæpp med Vipps:
#722ac9, #f7f7f5 label, 50px radius, 40px. Hover
#8851f6, pressed #551488; focus a 3px rgba(67,47,255,0.6) outline.
- Secondary pill — Vipps for bedrifter: white,
#722ac9 border and label. Hover fills
#f1ebff; same focus outline.
- Toolbar link — Privat, Bedrift, Hjelp: white on
#161225. Hover and press underline; focus a
3px white outline.
Radius
Pills at 50px.
5. Layout Principles
- A dark toolbar over an orange navigation bar, then a peach page of content cards.
6. Depth & Elevation
Flat; focus is drawn with outlines.
7. Do's and Don'ts
Do
- Keep orange
#ff5b24 as the brand surface and the peach #fff4ec as the ground.
- Use full pills with lighter-on-hover, darker-on-press fills.
- Draw focus as a thick 3px outline.
Don't
- Don't use cold greys; the neutrals are warm.
- Don't mix the purple and orange button systems in one component.
- Don't remove the underline from toolbar links on hover.
8. Responsive Behavior
Not measured. Desktop 1440×1000 only.
9. Agent Prompt Guide
Quick Color Reference
#ff5b24 Vipps orange · #fff4ec peach ground · #161225 toolbar · #722ac9 purple ·
#8851f6 purple hover · #0f0e0e ink · #6e6a69 secondary · #f05400 orange link
Example Component Prompts
- "A 40px purple
#722ac9 pill, 16px/500 VeryVerySans; hover #8851f6, press #551488; focus a 3px
translucent blue-violet outline."
- "An orange
#ff5b24 bar under a #161225 toolbar with white links that underline on hover."
10. Voice & Tone
Playful and direct — its own verb, tæppe (to tap-pay), appears in the main call to action. Not
assessed further.
11. Brand Narrative
Vipps uses its own name as a verb on its site — vippse til utlandet, vippsing — and now runs as
Vipps MobilePay across four markets. The interface is warm — peach, orange and a playful purple —
with a sans of its own.
12. Principles
- Warmth. Peach ground, warm neutrals, orange.
- Very, very easy. The business site's own promise.
- Visible focus. 3px outlines.
13. Personas
Not researched. No persona claim is made from a UI capture.
14. States
Hover: purple lightens to #8851f6; the secondary fills lavender; toolbar links underline. Press:
#551488. Focus: 3px outlines (translucent blue-violet on pills, white on the toolbar).
15. Motion & Easing
Not measured.
Tier 1 sources: https://www.vipps.no/ (live homepage — 854 root custom properties read via getComputedStyle; VeryVerySans loaded; three components measured at rest, hover, pressed and focus, captured 2026-09-26); https://www.vipps.no/zz-this-does-not-exist (nonsense-path control — HTTP 404, read 2026-09-26); https://vipps.no/om-oss (Om Vipps — four offices in Norway, Denmark and Finland; © Vipps MobilePay AS, org. nr. 918 713 867, read 2026-09-26); https://vippsmobilepay.com/ (business site — 12.5M users, 400,000+ merchants, 4 markets, "makes payments very, very easy", read 2026-09-26)