coderef

Vipps

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.
DownloadRaw
vipps.noVisit ↗
View full
vipps.noVisit site ↗
Vipps website, full page

Palette

At a glance

Website
vipps.no ↗
Theme
light
Typefaces
System
Sections
10
Length
1,024 words

Add it to your project

Then prompt your agent

Design System · Vipps

Light and dark previews, tokens and a ready-to-use package, generated from this DESIGN.md. No AI involved: the same file always produces the same output.

Generating design system…

DESIGN.md

DownloadRaw
Design tokens (YAML front matter)
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.

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

More like Vipps

All brands designs →

Brand names describe the visual style only; coderef is not affiliated with or endorsed by any brand listed. Licenses