10.66. DD 66: Wallet UI color scheme#

10.66.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.

10.66.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

10.66.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.

10.66.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.

10.66.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.

10.66.4.2. Color role definitions#

10.66.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)
onPrimary	`#ffffff`	Text/icons placed on top of `primary`
primaryContainer	`#d3deff`	Background for FABs, cards, filled fields
onPrimaryContainer	`#00134a`	Foreground for `primaryContainer`
darkPrimary	`#b4c5ff`	`primary` in dark mode
darkOnPrimary	`#002a78`	Text/icons on `darkPrimary`
darkPrimaryContainer	`#0042b3`	Container in dark mode
darkOnPrimaryContainer	`#e5ebff`	Foreground on container in dark

10.66.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 `secondary`
secondaryContainer	`#d9e3f9`	Background for secondary surfaces
onSecondaryContainer	`#111c2b`	Foreground on `secondaryContainer`
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

10.66.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 `tertiary`
tertiaryContainer	`#d1e4ff`	Input field backgrounds, selected indicators
onTertiaryContainer	`#001c39`	Text/icons on `tertiaryContainer`
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

10.66.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

10.66.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

10.66.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

10.66.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

10.66.4.2.8. Outline#

Role	Hex	Usage
outline	`#767880`	Used for input borders, field outlines
outlineVariant	`#c4c6d0`	Decorative borders, dividers

10.66.5. Definition of Done#

Theming system supports all defined roles
All components use semantic color tokens
Tokens switch correctly in light/dark mode
WCAG 2.1 AA contrast verified
Color role documentation added to developer onboarding
Feature flag enables color system switch before full rollout

10.66.6. Alternatives#

Use raw hex codes per component (violates consistency and accessibility)
Derive from OS/system color settings (limits branding control)

10.66.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

DD 66: Wallet UI color scheme

Contents