Vipps DESIGN.md

Design System Inspiration of Vipps

Overview

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.

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.

Principles

• Warmth. Peach ground, warm neutrals, orange.
• Very, very easy. The business site's own promise.
• Visible focus. 3px outlines.

Personas

Not researched. No persona claim is made from a UI capture.

Colors

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.

Typography

Font family

VeryVerySans (variable, 300–700), VeryVerySans, Arial, sans-serif, loaded (document.fonts).

Scale

Body and navigation 16px/400; pill buttons 16px/500.

Layout

• A dark toolbar over an orange navigation bar, then a peach page of content cards.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

Flat; focus is drawn with outlines.

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)

Components

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.

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).

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.

Voice & Tone

Playful and direct — its own verb, tæppe (to tap-pay), appears in the main call to action. Not assessed further.

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."