Design System Inspiration of Bitpanda
1. Visual Theme & Atmosphere
Bitpanda was "founded in Vienna by Eric Demuth, Paul Klanschek, Christian Trummer with a mission to
make Bitcoin accessible to everyone" in 2014; in 2015 it started brokerage for Bitcoin in the
Austrian market. Its group page frames the idea as "your wealth shouldn't depend on who your banker
is". The site's own asset-class tokens name crypto, stocks, ETFs, commodities, metals and more.
The site pairs a deep forest green #103e36 with a bright mint #2cec9a: dark-green
hero and buttons, mint highlights, neutral greys #282828 and #f4f4f4, and huge headlines
in Bitpanda Compressed over Inter body text.
What makes it worth reading:
- A complete semantic scheme.
--colors-<group>-<role> for brand, neutrals, positive, negative,
information and "best": fill_primary, fill_hover, fill_pressed, fill_disabled,
on_fill_light, stroke_primary, text_primary_inverted …
- Asset classes as colours.
--colors-class-crypto #ff9426, -etf #2b6fd5, -stock
#21c9ab, -commodities #f7da44, -metal #995917, -leverage #7921ea, -ai #2cec9a.
- A compressed display face. Bitpanda Compressed 700 at 88px for the hero.
Primary tasks
- Sign up or log in.
- Start investing; explore asset classes.
2. Color Palette & Roles
Measured with getComputedStyle on bitpanda.com/en: 297 root custom properties — --colors-*
119, --animations-* 26, --rb-* 22, --color-* 22, --spacing-* 18 … All first-party. Tokens
are served as 8-digit hex with an ff alpha; they are written here as 6-digit.
Brand green
- Brand (
#103e36) — --colors-brand-fill_primary; the Sign-up button and hero.
- Brand hover (
#28514a) — fill_hover, fill_focused · Brand pressed (#40655e).
- Brand text (
#16764d) — text_primary · Brand tertiary (#f3f3f2).
Mint (positive)
- Positive (
#2cec9a) — --colors-positive-fill_primary, --colors-class-ai.
- Positive pressed (
#16764d).
Neutrals
- Foreground (
#282828) — --colors-neutrals-text_primary.
- Text secondary (
#7e7e7e) · Fill tertiary (#a9a9a9) · Fill quaternary (#eaeaea).
- Divider (
#f4f4f4) · Widget (#f9f9f9) · Canvas (#ffffff) · Hover light
(#f3f5f5).
Status
Negative #ff4e4e (text #cc3e3e) · Information #2b6fd5 · Best #f2254a.
3. Typography Rules
Font family
Bitpanda Compressed (700) for display; Inter (400–700) for text. Both load
(document.fonts).
Scale
H1 88px/700 Compressed; H2 17px/500 Inter; header buttons 15px/500; body 15px/400.
4. Component Stylings
Measured with focus under a real Tab key and a hover counted only when :hover matched; consent
rejected.
- Sign-up —
#103e36, white 15px/500, 5px, 32px. Hover and press #28514a with a
#f3f5f5 label; focus is the browser's ring.
- Log in — white,
#282828. Hover and press #f3f5f5.
- Start investing —
#f4f4f4, #282828 15px/400, 4px, 48px. Hover #eaeaea.
Radius
4–5px on buttons.
5. Layout Principles
- A dark-green header and hero with a compressed headline, then trust badges and product sections
on white.
6. Depth & Elevation
Flat; neutrals and green blocks separate sections.
7. Do's and Don'ts
Do
- Use forest green
#103e36 for primary actions and mint #2cec9a for positive highlights.
- Name colours by group and role; give each fill hover, pressed and disabled values.
- Set hero headlines in the compressed face.
Don't
- Don't use mint for primary buttons; the action colour is the dark green.
- Don't reuse asset-class colours for status.
- Don't set body text in the compressed face.
8. Responsive Behavior
Not measured. Desktop 1440×1000 only.
9. Agent Prompt Guide
Quick Color Reference
#103e36 forest green · #28514a hover · #2cec9a mint · #16764d brand text · #282828 ink ·
#7e7e7e secondary · #f4f4f4 divider · #ff4e4e negative
Example Component Prompts
- "A 32px
#103e36 button, white 15px/500 Inter, 5px radius; hover #28514a."
- "An 88px Bitpanda Compressed headline in white on forest green."
10. Voice & Tone
Not assessed as authored voice.
11. Brand Narrative
Founded in Vienna to make Bitcoin accessible, Bitpanda now wraps many asset classes in one calm
green — each class with a colour of its own — and a compressed headline face that makes the brand
recognisable at a glance.
12. Principles
- Accessible wealth. "Your wealth shouldn't depend on who your banker is."
- Role-named colour.
- Every asset has a colour.
13. Personas
Not researched. No persona claim is made from a UI capture.
14. States
Hover: brand green lifts to #28514a; white buttons tint #f3f5f5; grey to #eaeaea. Press: the
same. Focus: the browser's ring on measured controls.
15. Motion & Easing
Not measured.
Tier 1 sources: https://www.bitpanda.com/en (live homepage — 297 root custom properties read via getComputedStyle; Bitpanda Compressed and Inter loaded; three components measured at rest, hover, pressed and focus, captured 2026-09-26); https://www.bitpanda.com/en/zz-this-does-not-exist (nonsense-path control — HTTP 404 in the browser, read 2026-09-26); https://group.bitpanda.com/about-us (About Bitpanda Group — founded in Vienna in 2014 by Eric Demuth, Paul Klanschek and Christian Trummer, read 2026-09-26); https://www.bitpanda.com/en/legal/legal-notice (legal notice under § 5 E-Commerce-Law, Bitpanda GmbH, read 2026-09-26)