Design System Inspiration of SumUp

Overview

Visual Theme & Atmosphere

SumUp makes card readers and payment tools for small businesses. By its own account it “started in 2012 with the belief that anyone should be able to build a successful business”, and it has since grown from a card reader into point-of-sale systems, a business account and consumer payments. It is headquartered in London; German press calls it the “deutsch-britische” payments company.

Its web presence is built on Circuit UI, SumUp’s open-source design system — in the repository’s words “the web implementation of the SumUp Circuit Design System”. The look is calm and warm rather than techy: an off-white page #fbfbf9 instead of white, a warm near-black #1e1c1c for text and primary buttons, warm greys, and — used sparingly — the SumUp magenta #ff61f2. Type is SumUp Narrow, a condensed sans, with SumUp Black for headlines.

What makes it worth reading:

• Every colour has its states. Circuit UI names each background, foreground and border colour with -hovered, -pressed and -disabled steps — --cui-bg-strong, --cui-bg-strong-hovered, --cui-bg-strong-pressed — and the live buttons use exactly those.
• The primary action is black, not the brand colour. The magenta is an accent; the buttons that sell are near-black.
• One focus ring for everything: 2px of off-white inside 4px of near-black, drawn as a box-shadow, identical on buttons and links.

Primary tasks

• Choose and buy a card terminal; compare prices.
• Learn about the business account and point-of-sale tools.

Brand Narrative

SumUp sells to people running small shops, cafés and stalls, and its web design talks to them in a warm, plain register — off-white paper, warm charcoal, a condensed sans that fits a lot on a screen — with one flash of magenta for recognition. Circuit UI makes that consistency a system: every colour arrives with its own hover, press and disabled steps, and one focus ring covers every control.

Principles

• Warm, not techy. Off-white and warm greys.
• Black to act, magenta to recognise.
• States are tokens. Hover and press come from the system, never improvised.

Personas

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

Colors

Measured with getComputedStyle on www.sumup.com/de-de/ and a card-terminal page: 274 root custom properties — 267 --cui-*, five layout variables (header and side-panel sizes) and two empty --lightningcss-dark / -light build markers.

Brand magenta

• Brand (#ff61f2) — --cui-bg-brand, --cui-fg-brand, --cui-border-brand, matching the value in Circuit UI’s packages/design-tokens/themes/light.ts. Brand Hovered (#eb58df) · Brand Pressed (#da4ece); disabled rgba(255,97,242,0.2). Not among the page’s most-painted backgrounds — an accent, not a surface.

Strong — the action colour

• Primary (#1e1c1c) — --cui-bg-strong, the primary button fill; also --cui-fg-normal and --cui-border-focus.
• Strong Hovered (#3f3a3a) · Strong Pressed (#756c6c).

Ink and warm neutrals

• Foreground (#1e1c1c) — --cui-fg-normal. 1,350 text elements, and most <p>.
• Text Subtle (#706464) — --cui-fg-subtle, secondary copy (97 elements on the home page, 300 on the product page).
• Accent Hovered (#726767) · Accent Pressed (#887a7a) — the link and navigation states.
• Canvas (#fbfbf9) — --cui-bg-normal, “SumUp off-white”, the page itself (44 elements) · Surface (#f5f4ed) — --cui-bg-subtle · Subtle Hovered (#f0eee7) · Subtle Pressed (#e8e6dc).
• Border (#d0cdc3) — --cui-border-normal · Border Hovered (#ded7cf) · Border Subtle (#e3e2d6).

Status and promo

Success #3c7411 (strong #1e862d) · Danger #b13606 (strong #d23f04) · Warning #a65a03 · Promo #a33e9a (strong #b342a9).

Typography

Font family

SumUp Narrow (300–700) for body, navigation and buttons, and SumUp Black (700) for headlines — both loaded (document.fonts), self-hosted at static.sumup.com/fonts/sumup/ and preloaded on every page. Metric-matched fallback faces (SumUp Narrow fallback) are declared so the layout holds while the fonts load.

Scale

Text is set at 17px; navigation and links at weight 375, buttons at 550 — the variable face allows weights between the usual steps.

Layout

• --header-bar-height 64px, --side-panel-width 400px.
• Warm off-white and slightly darker warm grey (#f5f4ed) alternate as section grounds; near-black sections reverse the text to off-white.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

Two repeating shadows: rgba(0,0,0,0.1) 0 10px 10px and rgba(0,0,0,0.2) 0 4px 8px, plus a layered #e3e2d6 shadow that draws a hairline border with a slight lift on tiles.

Motion & Easing

Not measured.

Regional sources: (Handelsblatt — “Fintech Sumup ist so viel wert wie N26”); (Sifted — “SumUp taps top banks for potential London IPO”)

Components

Three components (plus inline links sharing the navigation recipe), measured on a card-terminal page, every state on its own page load, focus read under a real Tab key.

• Primary — Zum Warenkorb hinzufügen: #1e1c1c, off-white 17px/550, 12px radius, 68px, 11px 23px. Hover #3f3a3a, pressed #756c6c; the label also softens to 90% and 80%.
• Secondary — Mehr erfahren: #fbfbf9 with a #d0cdc3 border and #1e1c1c label, 48px. Hover #f0eee7 with border #ded7cf; pressed #e8e6dc with #cac4be.
• Navigation and links — #1e1c1c 17px/375. Hover #726767, pressed #887a7a.

Focus is authored

box-shadow: 0 0 0 2px #fbfbf9, 0 0 0 4px #1e1c1c on every control — a halo of the page colour and a near-black ring (--cui-border-focus). The outline stays none.

Radius

12px on buttons; 4px ×166 (small elements), 2px ×44, 16px (cards, dominant on product pages), round avatars and icons, and an asymmetric 24px 24px 24px 0 speech-bubble corner.

States

Three components. Hover and press step along each colour’s Circuit UI state tokens; focus is the shared double ring. Disabled tokens exist (e.g. --cui-bg-brand-disabled) but no disabled control was observed.

Do’s and Don’ts

Do

• Put primary actions in near-black #1e1c1c and keep the magenta #ff61f2 for accents.
• Use each colour’s own -hovered and -pressed token for states.
• Set pages on off-white #fbfbf9, not pure white.
• Use the one focus ring everywhere.

Don’t

• Don’t fill large surfaces with the magenta.
• Don’t use cold greys; SumUp’s neutrals are warm.
• Don’t invent state colours outside the tokens.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#ff61f2 brand magenta · #1e1c1c ink and primary · #3f3a3a / #756c6c primary states · #fbfbf9 page · #f5f4ed surface · #d0cdc3 border · #706464 subtle text · #3c7411 success · #b13606 danger

Example Component Prompts

• “A 48px button: #1e1c1c, #fbfbf9 17px/550 SumUp Narrow, 12px radius; hover #3f3a3a; focus 0 0 0 2px #fbfbf9, 0 0 0 4px #1e1c1c.”
• “An outlined button: #fbfbf9, 1px solid #d0cdc3, #1e1c1c label; hover #f0eee7.”

Governance

Known Gaps

• Contrast, link-nav. Text #1e1c1c on #00000000 measures 1.24:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.