Design tokens (YAML front matter)
name: Bitpanda
colors:
brand: '#103e36'
brand-hover: '#28514a'
brand-pressed: '#40655e'
brand-text: '#16764d'
brand-tertiary: '#f3f3f2'
positive: '#2cec9a'
positive-pressed: '#16764d'
foreground: '#282828'
text-secondary: '#7e7e7e'
fill-tertiary: '#a9a9a9'
fill-quaternary: '#eaeaea'
divider: '#f4f4f4'
widget: '#f9f9f9'
hover-light: '#f3f5f5'
canvas: '#ffffff'
negative: '#ff4e4e'
negative-text: '#cc3e3e'
information: '#2b6fd5'
best: '#f2254a'
typography:
display:
fontSize: 88px
fontWeight: 700
use: hero heading
body:
fontSize: 15px
fontWeight: 500
use: header buttons
rounded:
sm: 4px
md: 5px
components:
button-signup:
type: button
backgroundColor: '#103e36'
textColor: '#ffffff'
rounded: 5px
height: 32px
padding: 4px 16px
typography: 15px / 500
hover: '#28514a'
pressed: '#28514a'
use: 'Sign-up in the header — the dark brand green; hover and press lift it to #28514a with a #f3f5f5 label; focus is the browser''s ring.'
button-login:
type: button
backgroundColor: '#ffffff'
textColor: '#282828'
rounded: 5px
height: 32px
padding: 4px 16px
typography: 15px / 500
hover: '#f3f5f5'
pressed: '#f3f5f5'
use: 'Log in — white with #282828 text; hover and press tint #f3f5f5.'
button-neutral:
type: button
backgroundColor: '#f4f4f4'
textColor: '#282828'
border: '#f4f4f4'
rounded: 4px
height: 48px
padding: 8px 16px
typography: 15px / 400
hover: '#eaeaea'
pressed: '#f4f4f4'
use: 'Start investing — a light grey 48px button that darkens to #eaeaea on hover.'
omitted:
- section: spacing
reason: No verified values in current evidence.
fonts:
roles:
display: Bitpanda Compressed
sans: InterDesign System Inspiration of Bitpanda
Overview
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.
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.
Principles
- Accessible wealth. “Your wealth shouldn’t depend on who your banker is.”
- Role-named colour.
- Every asset has a colour.
Personas
Not researched. No persona claim is made from a UI capture.
Colors
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.
Typography
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.
Layout
- A dark-green header and hero with a compressed headline, then trust badges and product sections on white.
Responsive Behavior
Not measured. Desktop 1440×1000 only.
Elevation & Depth
Flat; neutrals and green blocks separate sections.
Motion & Easing
Not measured.
Components
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#28514awith a#f3f5f5label; focus is the browser’s ring. - Log in — white,
#282828. Hover and press#f3f5f5. - Start investing —
#f4f4f4,#28282815px/400, 4px, 48px. Hover#eaeaea.
Radius
4–5px on buttons.
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.
Do’s and Don’ts
Do
- Use forest green
#103e36for primary actions and mint#2cec9afor 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.
Voice & Tone
Not assessed as authored voice.
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
#103e36button, white 15px/500 Inter, 5px radius; hover#28514a.” - “An 88px Bitpanda Compressed headline in white on forest green.”
