Skip to content
sysout.dev

Money O Money — Visual Design

Status

Brand identity locked (name, typeface, primary/secondary seed colors). Full Material 3 scheme below is generated from those seeds plus the confirmed tertiary seed — see brand-guidelines.adoc for the rationale. Screen-by-screen visual design (beyond the home-screen reference mockup) has not started.

Seed Colors

Generated with the same HCT tonal-palette script used for In My Head (materialyoucolor), adapted with Money O Money’s seeds.

Role Seed hex HCT (hue / chroma / tone) Source

Primary

#863A6F

343.9 / 47.5 / 36.4

Deepest tone of the chosen Color Hunt palette

Secondary

#975C8D

336.3 / 38.8 / 47.2

Second tone of the same palette

Tertiary

#387E94

222.5 / 33.8 / 49.4

Proposed — triadic to primary, avoids green/red

Error stays the Material default red family (not derived from the brand palette), consistent with keeping error/alert states visually distinct from the brand’s own magenta/pink — same approach used for In My Head.

Light Scheme

Role Hex Tone

primary

#904378

40

onPrimary

#FFFFFF

100

primaryContainer

#FFD8ED

90

onPrimaryContainer

#742B5F

30

inversePrimary

#FFADE0

80

secondary

#834B7A

40

onSecondary

#FFFFFF

100

secondaryContainer

#FFD7F3

90

onSecondaryContainer

#693361

30

tertiary

#19667C

40

onTertiary

#FFFFFF

100

tertiaryContainer

#B5EBFF

90

onTertiaryContainer

#004E60

30

background

#FFF8F9

98

onBackground

#211A1D

10

surface

#FFF8F9

98

onSurface

#211A1D

10

surfaceVariant

#F2DDE7

90

onSurfaceVariant

#51434A

30

surfaceTint

#904378

40

surfaceBright

#FFF8F9

98

surfaceDim

#E4D6DC

87

surfaceContainerLowest

#FFFFFF

100

surfaceContainerLow

#FEF0F5

96

surfaceContainer

#F8EAEF

94

surfaceContainerHigh

#F3E5EA

92

surfaceContainerHighest

#EDDFE4

90

inverseSurface

#362E32

20

inverseOnSurface

#FBEDF2

95

error

#BA1A1A

40

onError

#FFFFFF

100

errorContainer

#FFDAD6

90

onErrorContainer

#93000A

30

outline

#83727B

50

outlineVariant

#D5C1CB

80

scrim

#000000

0

Dark Scheme

Role Hex Tone

primary

#FFADE0

80

onPrimary

#591247

20

primaryContainer

#742B5F

30

onPrimaryContainer

#FFD8ED

90

inversePrimary

#904378

40

secondary

#F6B1E7

80

onSecondary

#4F1C49

20

secondaryContainer

#693361

30

onSecondaryContainer

#FFD7F3

90

tertiary

#8DD0E8

80

onTertiary

#003543

20

tertiaryContainer

#004E60

30

onTertiaryContainer

#B5EBFF

90

background

#181115

6

onBackground

#EDDFE4

90

surface

#181115

6

onSurface

#EDDFE4

90

surfaceVariant

#51434A

30

onSurfaceVariant

#D5C1CB

80

surfaceTint

#FFADE0

80

surfaceBright

#3F373B

24

surfaceDim

#181115

6

surfaceContainerLowest

#130C10

4

surfaceContainerLow

#211A1D

10

surfaceContainer

#251E21

12

surfaceContainerHigh

#30282C

17

surfaceContainerHighest

#3B3337

22

inverseSurface

#EDDFE4

90

inverseOnSurface

#362E32

20

error

#FFB4AB

80

onError

#690005

20

errorContainer

#93000A

30

onErrorContainer

#FFDAD6

90

outline

#9E8C95

60

outlineVariant

#51434A

30

scrim

#000000

0

Fixed Roles (identical in both schemes)

"Fixed" roles are used where a color needs to stay constant regardless of light/dark theme (e.g. a colored chip that shouldn’t flip tone).

Role Hex

primaryFixed

#FFD8ED

primaryFixedDim

#FFADE0

onPrimaryFixed

#3B002E

onPrimaryFixedVariant

#742B5F

secondaryFixed

#FFD7F3

secondaryFixedDim

#F6B1E7

onSecondaryFixed

#360533

onSecondaryFixedVariant

#693361

tertiaryFixed

#B5EBFF

tertiaryFixedDim

#8DD0E8

onTertiaryFixed

#001F28

onTertiaryFixedVariant

#004E60

Contrast Ratios

All text-bearing role pairs clear WCAG AA (4.5:1) in both schemes; most clear AAA (7:1).

Pair Light Dark

primary / onPrimary

6.46:1

7.72:1

primaryContainer / onPrimaryContainer

7.24:1

7.24:1

secondary / onSecondary

6.46:1

7.72:1

secondaryContainer / onSecondaryContainer

7.24:1

7.24:1

tertiary / onTertiary

6.46:1

7.72:1

tertiaryContainer / onTertiaryContainer

7.24:1

7.24:1

error / onError

6.46:1

7.72:1

errorContainer / onErrorContainer

7.24:1

7.24:1

background / onBackground

16.31:1

14.35:1

surface / onSurface

16.31:1

14.35:1

surfaceVariant / onSurfaceVariant

7.24:1

5.49:1

surface / primary

6.15:1

10.89:1

surface / outline

4.27:1

5.85:1

surfaceVariant / outline

3.47:1

2.95:1

inverseSurface / inverseOnSurface

11.59:1

10.18:1

surfaceVariant/outline sits below 4.5:1 in both schemes — expected and acceptable, since outline is a border/divider role, not text.

Reference Mockup

The home-screen layout used to compare the four candidate palettes (money-o-money-palette-comparison.html) used a simplified subset of these roles (primary, secondary, primary-container, secondary-container only). It has not yet been updated to the full generated scheme above — worth refreshing once the tertiary seed is confirmed.

Open Items

  • App icon / logo mark — not yet designed

  • Screen-by-screen visual design beyond the home-screen reference

Decisions Log

Date Decision Rationale

2026-08-02

Generated full M3 scheme via HCT tonal-palette script

Same method used for In My Head; keeps token generation consistent across the app portfolio

2026-08-02

Error role kept as Material default red, not brand-derived

Keeps error/alert states visually distinct from the brand’s magenta/pink; matches In My Head’s approach

2026-08-03

Tertiary seed confirmed via triadic relationship

Primary/secondary are too close in hue to serve tertiary’s contrast role