Brainzie Money / Style guide

The Brainzie Money design system

A focused sub-brand of Brainzie. It inherits the parent's magenta identity, Space Grotesk / Inter type and rounded shapes — then adds the one thing a money product needs the parent doesn't: semantic gain / loss colour and a calm growth accent.

The mark

Circuitry that grows

The Brainzie circuit-brain, unchanged — its lower trace lifts into an emerald sparkline. The meaning writes itself: smart money, growing. It reads from 512px down to a 16px favicon.

Brainzie Money horizontal lockup

Primary lockup — "Brainzie" in ink, "Money" in magenta. Minimum 150px wide. Convert the wordmark to outlines before distributing.

icon on lightapp tile

Icon on light (left) and the magenta app tile / favicon (right). On any saturated fill, always use the tile version — the brain's white circuitry is what carries the silhouette.

Colour

Magenta leads. Green means growth.

Inherit Brainzie's palette wholesale. Add gain / loss only for financial meaning — never decoration. Body copy always stays in Ink.

Brainzie signature (inherited)

Brand
#D81B72
Primary actions, the mark
Brand deep
#A8155A
Hover / pressed / links
Brand tint
#FCE4F0
Soft fills, badges
Violet
#6D28D9
Secondary depth, eyebrows
Orange
#FB8B24
A spark — highlights only

Money semantics (the sub-brand's own)

Gain
#0FA678
Growth, positive net worth, "up"
Gain deep
#0B7E5B
Gain on light text
Gain tint
#DCF5EC
Positive badges, fills
Loss
#E5484D
Drawdowns, negative, "down"
Loss tint
#FCE3E4
Negative fills

Neutrals (warm, never cold grey)

Ink
#18122B
All body text
Ink soft
#4A4361
Secondary text
Muted
#847B9C
Meta, disabled
Line
#ECE7F2
Borders, dividers
Paper
#FDFBFE
Background
Type

Space Grotesk & Inter

Display / H1£284,610 net worth
Heading / H3Watch it grow over time
EyebrowPersonal finance, made clear
Body / InterBrainzie Money keeps your numbers in your own cloud — never on a server we own.
Numerals+£3,420 ▲   −£910 ▼
Iconography

One line, rounded, geometric

Stroke icons that echo the brain's circuit traces — 1.8px stroke, round caps and joins, 24px grid. Drawn with currentColor so they take Ink, Brand or Gain from context.

Net worth
Accounts
Spending
Snapshot
History
Goal
Import
Undo
Investments
Your cloud
Private
Big-ticket
Voice & usage

Clear, warm, honest

Do

  • Lead with the person's problem, then show the feature.
  • Use green for gains, red for losses — meaning, not mood.
  • Keep body copy in Ink; let magenta carry the actions.
  • Say what it is and isn't — the privacy promise is literal.

Don't

  • Don't invent new brand hues — extend, never replace.
  • Don't make the gradient the whole identity.
  • Don't put magenta or green on small body text (contrast).
  • Don't over-promise — no hype, no blinking, no clutter.