090-branding.rst (8906B)
1 DD 90: Branding Guidelines 2 ########################## 3 4 :Design status: Accepted 5 :Implementation status: Prototype 6 :DD shepherd: TBD 7 :Historical contributors: Vlada Svirsh 8 :First published: 2026-03-07 9 :Last substantive change: 2026-04-21 10 :Implementation evidence: ``taler-typescript-core`` (2026-08-05, not merged into the reviewed HEAD) 11 12 Summary 13 ======= 14 This document defines visual and UX guidelines for Taler payment pages/components to give user a consistent experience 15 across different implementations and platforms. 16 17 Motivation 18 ========== 19 Make Taler QR code pages/components recognizable and consistent to increase user trust and confidence when using Taler. 20 A consistent payment components also reduce user hesitation and makes troubleshooting easier. 21 Provide guidelines for logo usage and provide main colors to be used. 22 23 Requirements 24 ============ 25 26 Proposed Solution 27 ================= 28 29 Logo 30 ~~~~ 31 The Taler logo is the most recognizable visual element of the brand and must be used consistently across all products, 32 websites, documents, and payment-related screens. This section defines the approved logo versions, when each version 33 should be used, and the rules that protect the logo’s visibility and integrity. 34 35 Primary Logo (Light Mode) 36 ------------------------- 37 The primary logo is the default Taler logo version and should be used on light backgrounds whenever possible. 38 It is the preferred option for websites, wallet screens, documentation, printed materials etc. with a white or very light surface. 39 40 This version should always appear with sufficient contrast against the background so that all logo elements remain clearly visible. 41 It must be reproduced exactly as provided in the official assets, without modification to its colors, proportions, or internal spacing. 42 43 .. image:: wallet-designs/taler-logo-light.png 44 :alt: Taler Logo - Light Mode 45 :width: 50% 46 47 Download logo for light mode: :download:`PNG <wallet-designs/taler-logo-light.png>`, :download:`SVG <wallet-designs/taler-logo-light.svg>` 48 49 Logo for Dark Mode 50 ------------------ 51 The dark mode logo is a dedicated version of the Taler logo optimized for dark backgrounds. It should be used in wallet dark theme screens, 52 dark websites, dark presentation slides, and any surface where the primary light-mode logo would lose visibility or contrast. 53 54 Download logo for dark mode: :download:`PNG <wallet-designs/taler-logo-dark.png>`, :download:`SVG <wallet-designs/taler-logo-dark.svg>` 55 56 Incorrect usage examples 57 ------------------------ 58 The Taler logo must always appear in its approved form. Any distortion or reinterpretation weakens the identity and creates inconsistency across products. 59 60 The following uses are not allowed: 61 62 - changing the logo colors outside approved variants 63 - placing the light-mode logo on a light background with poor contrast 64 - placing the dark-mode logo on additional background 65 - stretching, compressing, or otherwise distorting the proportions 66 - rotating the logo 67 - adding shadows, outlines, gradients, or glow effects 68 - rearranging the logo symbol and wordmark 69 - placing the logo on visually busy backgrounds that reduce readability 70 - cropping the logo 71 72 Every implementation should use the original source files supplied by the Taler design assets. When in doubt, 73 choose the version that gives the highest contrast and clearest presentation while preserving the official logo artwork. 74 75 76 Colors 77 ~~~~~~ 78 The Taler color system defines the visual foundation of the brand across product interfaces, websites, documentation, 79 and payment-related screens. Colors should support clarity, trust, accessibility, and consistency. This section identifies 80 the main brand colors that represent Taler visually, as well as secondary colors used to support interface design and communication. 81 82 Primary colors 83 -------------- 84 85 The primary color should be used on light backgrounds for the most important brand and interface elements, such as primary actions, 86 highlights, and key visual accents. 87 88 .. raw:: html 89 90 <code>#0042b3</code> <div style="display:inline-block;width:14px;height:14px; 91 background:#0042b3;border:1px solid #aaa;margin-left:6px;vertical-align:middle;"></div> 92 93 94 The dark primary color should be used in dark mode interfaces, where the default primary color would not provide the desired 95 visual balance or contrast. 96 97 .. raw:: html 98 99 <code>#b4c5ff</code> <div style="display:inline-block;width:14px;height:14px; 100 background:#b4c5ff;border:1px solid #aaa;margin-left:6px;vertical-align:middle;"></div> 101 102 Secondary colors 103 ---------------- 104 105 The secondary color supports the primary color and can be used for less prominent accents, supporting interface elements, 106 and complementary highlights. 107 108 .. raw:: html 109 110 <code>#586a88</code> <div style="display:inline-block;width:14px;height:14px; 111 background:#586a88;border:1px solid #aaa;margin-left:6px;vertical-align:middle;"></div> 112 113 The dark secondary color should be used in dark mode where the standard secondary color is not suitable. 114 115 .. raw:: html 116 117 <code>#a4c9ff</code> <div style="display:inline-block;width:14px;height:14px; 118 background:#a4c9ff;border:1px solid #aaa;margin-left:6px;vertical-align:middle;"></div> 119 120 121 Additional color definitions 122 ---------------------------- 123 124 Detailed color values and any future extensions of the palette are available here: :doc:`Color scheme <066-wallet-color-scheme>`. 125 126 .. _payment-qr: 127 128 Payment QR code design 129 ~~~~~~~~~~~~~~~~~~~~~~ 130 131 .. image:: wallet-designs/payment-qr.png 132 :alt: Taler QR code component design 133 :width: 50% 134 135 The payment QR code is displayed inside a dedicated rounded frame that occupies ``100%`` of the component size. 136 This frame defines the full visible area of the QR payment element and serves as the main reference for all internal proportions. 137 138 The frame uses the color ``#F1F1F4``. Inside the frame, the QR code itself is rendered on a white background to preserve maximum 139 contrast and scanning reliability. 140 141 Frame 142 ----- 143 The QR payment component uses a rounded rectangular frame with the following properties: 144 145 - frame size: ``100%`` 146 - frame background color: ``#F1F1F4`` 147 - frame shape: rounded rectangle 148 - frame corner radius: ``8%`` relative to the frame size 149 150 151 QR code 152 ------- 153 .. image:: wallet-designs/payment-qr-1.png 154 :alt: Taler QR code design 155 :width: 50% 156 157 The QR code is centered inside the frame and occupies ``87.5%`` of the frame size. 158 159 The QR code must always use: 160 - white background 161 - black QR modules 162 - centered placement inside the frame 163 164 The QR code background must remain white even though the surrounding frame uses ``#F1F1F4``. This separation ensures good readability and reliable scanning. 165 166 Animated lines 167 -------------- 168 169 Two animated lines move clockwise along the outer edge of the QR code frame as a subtle branded accent. 170 The animation adds a sense of activity and visual focus while keeping the QR code itself visually stable and easy to scan. 171 172 The animated lines have the following properties: 173 174 - direction: clockwise 175 - stroke width: ``2.6%`` relative to the frame size 176 - line height: ``57%`` relative to the frame size 177 - color: linear gradient from ``#F1F1F4`` to ``#0042B3`` to ``#F1F1F4`` 178 - placement: along the inner edge of the frame, between the frame border and the QR code area 179 180 Logo inside the QR code 181 ----------------------- 182 .. image:: wallet-designs/payment-qr-2.png 183 :alt: Taler logo placement inside QR code 184 :width: 50% 185 186 The Taler logo is placed in the center of the QR code. The logo must always appear together with its dedicated white 187 background shape so that it remains visually separated from the QR modules behind it. 188 189 The approved asset for this usage is available here: :download:`PNG <wallet-designs/qr-logo.png>`, :download:`SVG <wallet-designs/qr-logo.svg>`. 190 191 The total height of the logo together with its white background is ``12.5%`` relative to the frame size. 192 193 The logo treatment must always follow these rules: 194 - the logo is centered inside the QR code 195 - the logo always includes the white background 196 - the logo background must match the white QR background 197 - the logo must not be recreated manually 198 - only the approved asset may be used 199 200 Size summary 201 ------------ 202 203 The payment QR component uses the following proportions: 204 205 - frame size: ``100%`` 206 - QR code size: ``87.5%`` 207 - animation width: ``2.6%`` 208 - logo with background height: ``12.5%`` 209 210 211 212 Test Plan 213 ========= 214 215 (If this DD concerns a new or changed feature, describe how it can be tested.) 216 217 Definition of Done 218 ================== 219 220 (Only applicable to design documents that describe a new feature. While the 221 DoD is not satisfied yet, a user-facing feature **must** be behind a feature 222 flag or dev-mode flag.) 223 224 Alternatives 225 ============ 226 227 Drawbacks 228 ========= 229 230 Discussion / Q&A 231 ================ 232 233 (This should be filled in with results from discussions on mailing lists / personal communication.)