---
name: Vipps
colors:
  brand: '#ff5b24'
  brand-hover: '#ff8c4f'
  brand-pressed: '#d34718'
  content-interactive: '#f05400'
  content-interactive-hover: '#a9330b'
  content-interactive-pressed: '#802000'
  purple: '#722ac9'
  purple-hover: '#8851f6'
  purple-pressed: '#551488'
  lavender: '#f1ebff'
  foreground: '#0f0e0e'
  text-secondary: '#6e6a69'
  text-tertiary: '#b0acab'
  ground: '#fff4ec'
  surface: '#f9f6f6'
  surface-sunken: '#f2eeed'
  surface-branded: '#ffece5'
  toolbar: '#161225'
  canvas: '#ffffff'
  border-subtle: '#d9d5d4'
  focus: '#5a78ff'
  positive: '#006628'
  negative: '#c60000'
typography:
  body:
    fontSize: 16px
    fontWeight: 400
    use: body and navigation
  button:
    fontSize: 16px
    fontWeight: 500
    use: pill buttons
rounded:
  pill: 50px
components:
  button-primary:
    type: button
    backgroundColor: '#722ac9'
    textColor: '#f7f7f5'
    rounded: 50px
    height: 40px
    padding: 4px 16px
    typography: 16px / 500
    hover: '#8851f6'
    pressed: '#551488'
    focus: outline 3px solid rgba(67,47,255,0.6)
    use: Tæpp med Vipps — the purple pill (--button-primary-color-background-*); lighter on hover, darker when pressed, a 3px translucent blue-violet focus outline.
  button-secondary:
    type: button
    backgroundColor: '#ffffff'
    textColor: '#722ac9'
    border: '#722ac9'
    rounded: 50px
    height: 40px
    padding: 4px 16px
    typography: 16px / 500
    hover: '#f1ebff'
    pressed: '#ffffff'
    focus: outline 3px solid rgba(67,47,255,0.6)
    use: 'Vipps for bedrifter — white pill with a purple border and label; hover fills lavender #f1ebff.'
  link-toolbar:
    type: button
    backgroundColor: transparent
    textColor: '#ffffff'
    rounded: 0px
    height: 23px
    typography: 16px / 400
    hover: transparent
    pressed: transparent
    focus: 'outline 3px solid #ffffff'
    use: 'Privat / Bedrift / Hjelp on the #161225 toolbar — white text that underlines on hover and press; focus is a 3px white outline.'
omitted:
  - section: spacing
    reason: No verified values in current evidence.
fonts:
  roles:
    sans: VeryVerySans
---

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