Avanza DESIGN.md

Design System Inspiration of Avanza

Overview

Visual Theme & Atmosphere

"Avanza startades med en enkel idé" — Avanza started with a simple idea: to build a company its founders would want to be customers of, charging as little as possible and offering "cheaper, better and simpler products". It counts more than 2,300,000 customers, calls itself "Sveriges nöjdaste sparare 16 år i rad enligt SKI", and offers shares, funds, pensions and mortgages (Bolån+, Avanza Zero). The listed parent, Avanza Bank Holding, is quoted in SEK on its investor site.

The site is clean and financial: white and a faintly green-grey #f9fbfb, near-black #0d1112 for text and primary buttons, Avanza green #068e6a for brand and active states, blue for buy #2970c2 and red for sell #d0184d, and its own Avanza typeface for headlines over Roboto.

What makes it worth reading:

• Trading colours as tokens. --mint-color-button-buy / -buy-hover and -sell / -sell-hover — buy is blue, sell is red; positive graph lines are blue, negative red.
• A named system, "Mint". 76 --mint-color-* roles: containers (brand, info, warning, destructive, private-banking), content, strokes, tags, tables, skeletons and graph series.
• Graph palettes. Eleven series strokes (--mint-color-graph-series-stroke-a … -k) plus Morningstar star colours.

Primary tasks

• Become a customer; log in.
• Explore savings, mortgages, pensions and news.

Brand Narrative

A Swedish savings platform built to be the company its founders would want to bank with — cheap, simple, satisfied customers — with a calm near-black-and-green interface and trading colours that never move.

Principles

• As little as possible for the customer to pay.
• Cheaper, better, simpler.
• Buy is blue, sell is red.

Personas

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

Colors

Measured with getComputedStyle on avanza.se: 83 root custom properties — --mint-* 76, safe-area and page-inset helpers. All first-party.

Brand

• Brand green (#068e6a) — --mint-color-container-active, -stroke-active, graph primary.
• Brand container (#d9f6eb) · Brand stroke (#bdefde).

Actions

• Primary (#0d1112) → hover (#243133) — --mint-color-button-primary.
• Secondary hover (#e8edee).
• Buy (#2970c2) → hover (#155299) · Sell (#d0184d) → hover (#990a33).

Text, links and surfaces

• Foreground (#0d1112) · Text secondary (#5a6569).
• Link (#08729b) → hover (#0f5975).
• Canvas (#ffffff) · Background (#f9fbfb) · Table hover (#f0f4f5).
• Info container (#ddf5fd) · Warning container (#fcf1c0) · Private banking (#221a51).

Typography

Font family

Avanza (700) for headings and Roboto (400, 500) for text; both load (document.fonts).

Scale

H1 60px/700 Avanza; H2 28px/700 Avanza; buttons 16px/500; navigation 13px/400.

Layout

• A slim top bar, a 70px navigation row, then a hero with the sign-up pill and product sections on white and #f9fbfb.

Responsive Behavior

Not measured. Desktop 1440×1000 only.

Elevation & Depth

Minimal; --mint-color-shadow-primary is rgba(0,0,0,.04).

Motion & Easing

Press scale 0.98 observed; durations not measured.

---

Tier 1 sources: https://www.avanza.se/ (live homepage — 83 root custom properties read via getComputedStyle; Avanza and Roboto loaded; two components measured at rest, hover, pressed and focus, captured 2026-09-26); https://www.avanza.se/zz-this-does-not-exist (nonsense-path control — a "Sidan kan inte hittas" not-found page served with HTTP 200, read 2026-09-26); https://investors.avanza.se/om/om-avanza/ (Om Avanza — founding idea, 2,300,000+ customers, "Sveriges nöjdaste sparare 16 år i rad enligt SKI", Avanza Bank Holding quoted in SEK, read 2026-09-26)

Components

Measured with focus under a real Tab key and a hover counted only when :hover matched; consent answered with "Endast nödvändiga cookies" (necessary only).

• Primary pill — Bli kund på 3 min: #0d1112, #f9fbfb 16px/500, 500px radius, 48px. Hover and press #243133; press also scales to 0.98.
• Navigation item — Spara & Investera, Bolån, Pension: white, #0d1112 13px, 70px tall. Hover and press #e8edee.

Radius

Full pills on buttons.

States

Hover: primary #243133; navigation #e8edee; links #0f5975 (token). Press: the same, with a 0.98 scale on pills. Focus: the browser's ring on measured controls.

Do's and Don'ts

Do

• Use near-black #0d1112 for primary actions and green #068e6a for brand and active states.
• Keep buy blue and sell red, consistently, in buttons and graphs.
• Set headlines in the Avanza face.

Don't

• Don't swap buy and sell colours or use green for "buy".
• Don't use pure black; the ink is #0d1112.
• Don't square off primary buttons.

Voice & Tone

Not assessed as authored voice.

Agent Prompt Guide

Quick Color Reference

#068e6a Avanza green · #0d1112 ink · #243133 hover · #2970c2 buy · #d0184d sell · #08729b link · #f9fbfb background · #e8edee hover surface

Example Component Prompts

• "A 48px #0d1112 pill, #f9fbfb 16px/500 Roboto; hover #243133; press scale 0.98."
• "A trade panel with a blue #2970c2 buy button and a red #d0184d sell button."