23.67. DD 66: Wallet UI Color Scheme#
- Design status:
Accepted
- Implementation status:
Partial
- DD shepherd:
TBD
- Historical contributors:
Vlada Svirsh
- First published:
2025-07-16
- Last substantive change:
2026-07-05
- Implementation evidence:
taler-android (2025-07-10), taler-ios (2026-06-05)
- Normative references:
Note
Native-wallet adoption is in progress. WebExtension dark-mode support, complete semantic-token adoption, contrast verification and developer onboarding remain incomplete.
23.67.1. Summary#
This design document defines the unified color scheme for the GNU Taler Wallet, based on the Material Design 3 color system. It provides semantic color roles used across the wallet UI for consistency, accessibility, and maintainability.
The document outlines the purpose and application of each color role in the UI design system.
23.67.2. Motivation#
The wallet UI currently lacks a consistent and documented color strategy. As the application grows and adds more features, visual coherence and accessibility become increasingly important.
By adopting Material 3 semantics and defining roles like primary, onPrimary, success, errorContainer, etc., the UI gains:
Consistent appearance across features
Easier onboarding for new contributors
23.67.3. Requirements#
Colors must be defined semantically, not by hex codes directly in UI components.
The theme must support both light and dark modes.
Roles must maintain WCAG 2.1 AA contrast ratios.
Roles must cover error, warning, and success states.
23.67.4. Proposed solution#
The color system will be structured using semantic Material 3 color roles. Each role is explained below with its usage and associated hex values.
23.67.4.1. General concepts#
Primary / Secondary / Tertiary: Accent colors used to emphasize UI elements.
Container: A lighter or darker version of an accent color used for background fills (e.g. buttons, chips).
On *: A foreground color (text/icon) to be placed on top of its paired color.
Surface / Background: Base UI areas or layout surfaces.
Outline: Used for strokes, borders, and dividers.
Error / Warning / Success: Semantic feedback colors.
Dark *: Role variants used in dark mode.
23.67.4.2. Color role definitions#
23.67.4.2.1. Primary#
Used for the most important UI elements.
Role |
Hex |
Usage |
|---|---|---|
primary |
#0042b3 |
Main action color (e.g. filled buttons, tabs, icons), incoming amount |
onPrimary |
#ffffff |
Text/icons placed on top of |
primaryContainer |
#d3deff |
Background for FABs, cards, filled fields |
onPrimaryContainer |
#00134a |
Foreground for |
darkPrimary |
#b4c5ff |
|
darkOnPrimary |
#002a78 |
Text/icons on |
darkPrimaryContainer |
#0042b3 |
Container in dark mode |
darkOnPrimaryContainer |
#e5ebff |
Foreground on container in dark |
23.67.4.2.2. Secondary#
Used for less prominent or supporting elements.
Role |
Hex |
Usage |
|---|---|---|
secondary |
#586a88 |
Secondary buttons, chips, and passive UI states |
onSecondary |
#ffffff |
Foreground on |
secondaryContainer |
#d9e3f9 |
Background for secondary surfaces |
onSecondaryContainer |
#111c2b |
Foreground on |
darkSecondary |
#a4c9ff |
Secondary color in dark mode |
darkOnSecondary |
#00315d |
Foreground in dark mode |
darkSecondaryContainer |
#72a3e5 |
Background container in dark |
darkOnSecondaryContainer |
#003869 |
Foreground for container in dark |
23.67.4.2.3. Tertiary#
Used for accents, badges, or attention-grabbing components.
Role |
Hex |
Usage |
|---|---|---|
tertiary |
#338af0 |
Used for tags, emphasis markers |
onTertiary |
#ffffff |
Text/icons on |
tertiaryContainer |
#d1e4ff |
Input field backgrounds, selected indicators |
onTertiaryContainer |
#001c39 |
Text/icons on |
darkTertiary |
#8dd1e5 |
Accent color in dark mode |
darkOnTertiary |
#003641 |
Foreground in dark |
darkTertiaryContainer |
#166577 |
Container fill in dark |
darkOnTertiaryContainer |
#9ce0f5 |
Text/icons on dark container |
23.67.4.2.4. Error#
Role |
Hex |
Usage |
|---|---|---|
error |
#b3261e |
Main error color for messages or outlines |
onError |
#ffffff |
Text/icons on error surfaces |
errorContainer |
#f9dedc |
Background fill for error components |
onErrorContainer |
#410e0b |
Text/icons on error container |
darkError |
#ffb4aa |
Error color in dark mode |
darkOnError |
#690003 |
Foreground in dark mode |
darkErrorContainer |
#b3261e |
Background container in dark |
darkOnErrorContainer |
#ffcbc4 |
Foreground on dark container |
23.67.4.2.5. Success#
Role |
Hex |
Usage |
|---|---|---|
success |
#337a40 |
Status indicators, confirmation icons |
onSuccess |
#ffffff |
Foreground on success |
successContainer |
#2e8534 |
Background for success banners or chips |
onSuccessContainer |
#f7fff1 |
Text/icons on success container |
darkSuccess |
#337a40 |
Same in dark mode (stable tone) |
darkOnSuccess |
#ffffff |
Foreground for dark mode |
darkSuccessContainer |
#1d3522 |
Background container in dark |
darkOnSuccessContainer |
#eaf6ec |
Text/icons on dark container |
23.67.4.2.6. Warning#
Role |
Hex |
Usage |
|---|---|---|
warning |
#f99c06 |
Alert banners, passive warnings |
onWarning |
#000000 |
Foreground text on warning |
warningContainer |
#fdedd3 |
Background fill for warning containers |
onWarningContainer |
#6b4706 |
Foreground on warning container |
darkWarning |
#f99c06 |
Warning in dark mode |
darkOnWarning |
#000000 |
Foreground in dark |
darkWarningContainer |
#664200 |
Background in dark |
darkOnWarningContainer |
#fdedd3 |
Foreground on container in dark |
23.67.4.2.7. Background#
Role |
Hex |
Usage |
|---|---|---|
background |
#fdfdff |
App-wide background color |
onBackground |
#1a1c1f |
Foreground text/icons on background |
darkBackground |
#11131a |
Background in dark mode |
darkOnBackground |
#e2e2eb |
Text/icons in dark mode background |
23.67.4.2.8. Outline#
Role |
Hex |
Usage |
|---|---|---|
outline |
#767880 |
Used for input borders, field outlines |
outlineVariant |
#c4c6d0 |
Decorative borders, dividers |
23.67.5. Definition of Done#
[x] Android theming system supports the defined Material 3 roles
[x] native-wallet themes switch between light and dark mode
[ ] WebExtension supports dark mode and the complete role set
[ ] all components use semantic color tokens
[ ] WCAG 2.1 AA contrast verified across all wallet screens
[ ] color role documentation added to developer onboarding
23.67.6. Alternatives#
Use raw hex codes per component (violates consistency and accessibility)
Derive from OS/system color settings (limits branding control)
23.67.7. Drawbacks#
To be fully and correctly implemented, all ui screeens must be updated with references to the new color roles.
Might requires UI refactor to override system styles
Slight learning curve for developers unfamiliar with semantic roles