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