Purpose of this guide. This guide explains how to align brand, UX and the design system, balance expression with usability, and measure consistency beyond a purely visual review.
The home page may look perfectly aligned with the campaign. Yet the brand disappears as soon as users sign in: generic components, administrative messages, cold error states, inconsistent forms and improvised empty screens.
This is where brand UI design begins. It shapes how the product speaks, responds, confirms, warns and helps people recover. A credible digital identity is as recognisable in a payment error as it is in a hero section.
1. Key figures: interfaces have become denser while compliance lags behind
The WebAIM Million 2026 study analysed a million home pages. 95.9% had at least one automatically detectable WCAG error and averaged 56.1 errors per page. Automation sees only part of the obstacles; these results therefore constitute a minimum signal, not a complete measure of compliance.
The observed pages contained on average 1,437 elements, up 22.5% year-on-year and almost twice as much as in 2019. WebAIM measured a correlation of 0.48 between the number of elements and errors. Complexity does not explain everything, but each additional component creates states and interactions to govern.
The insufficient contrast appeared on 83.9% of pages, while empty links appeared on 46.3 %. These two errors illustrate the direct link between visual system, components and code.
Since 28 June 2025, the European Accessibility Act applies to several products and services covered in the European Union, including digital services. In France, RGAA 4.1.2 provides 106 criteria to verify the accessibility of the relevant sites and applications. Therefore accessibility cannot be added as a colour theme at the end.
On the checkout, Baymard observed more 2,700 problems of use in their task and find 23.48 form elements displayed by default on average on large US ecommerce sites, compared with about twelve for an ideal route in the cases studied. The institute estimates an average potential uplift of 35.26 % from correcting checkout problems on large e-commerces; this figure is not a promise of gain for a given product, but shows the importance of interface details.
2. Three layers to assemble
Brand strategy answers: “How are we recognised, and what do we promise?” UX answers: "How do we accomplish the task with the least friction and risk?" UI design answers: "How do we make this task perceptible, understandable and controllable in each state?"
Separated, these disciplines produce late compromises. Together, they create stronger decisions. A main button can use the distinctive colour while respecting contrast, hierarchy and conventions. A confirmation can carry the brand voice without masking operational information.
The team defines invariants. In a banking application, trust and control dominate a visual exuberance. In a creative tool, the expression may be stronger, but must not compete with the content produced by users.
3. The task-state-expression matrix
An interface is not only designed by pages. It is described by tasks, states and level of expression.
| Task | State | Main need | Brand expression |
|---|---|---|---|
| discover | first contact | understand and attribute | strong, narrative |
| compare | options | distinguishing and deciding | medium, structural |
| enter | form | progress without error | sober, reassuring |
| pay | transaction | control and evidence | low to medium |
| wait | loading | understand the deadline | useful, not distracting |
| fail | error | repair and preserve trust | clear, human |
| success | confirmation | verify and direct | positive, precise |
| come back | recurrent use | speed and continuity | discreet, recognisable |
This matrix avoids applying the same intensity everywhere. An expressive illustration can enrich onboarding; it becomes awkward in the midst of urgent action.
4. Start with a real interface inventory
The work identifies products, platforms, frameworks, themes, libraries, languages and assistive technologies. It documents complete journeys, not just screens valued in presentations.
The components are grouped by function: navigation, action, input, selection, feedback, data, content and overlay. For each, we note variants, states, uses, code, owner and defects.
The audit often reveals several "main buttons", almost identical border radii, contradictory messages and non-role colours. Consolidation begins with meaning. Visually merging two components that behave differently moves the problem.
5. Translate distinctive assets into tokens
Tokens link brand decisions and technical properties. They represent colour, typography, space, radius, shadow, movement, layer and sometimes sound.
A sound token architecture distinguishes three levels.
Primitive tokens. Raw values: purple 700, space 16, duration 200 ms.
Semantic Tokens. Function: main text, high surface, critical action, visible focus.
Component Tokens. Local application: background of the primary button at rest, border of invalid field.
Semantic tokens facilitate themes and accessibility. A developer chooses text-danger, not a colour value whose role they do not understand. If the palette changes, the intention remains.
However, the brand is not limited to tokens. Composition, image processing, content and rhythm still require judgment. A value system does not automatically produce an attributable experience.
6. Design each component as a state machine
The component has at least rest, overshoot, focus, activation, deactivation, loading, success and error when the function justifies it. It also takes into account long text, zoom, language, absent content, insufficient rights and slow network.
Focus should never be a weakened version of the flyer. It remains visible on each surface. The deactivated button is not the only way to explain a condition; a text indicates what is missing when users can act.
Errors are placed close to their cause, are announced to assist technologies and explain the repair. "An error has occurred" sometimes carries the brand voice, but does not render any control.
The load distinguishes a normal wait, a long task and a blockage. A skeleton that pushes indefinitely hides uncertainty. After an adapted threshold, the interface gives an estimate, an alternative action or an opportunity to leave without losing the job.
7. Content is an interface component
Brand voice does not mean adding humour to each message. It defines the relationship: directivity, heat, precision, responsibility and degree of technicality.
A cross-situation and issue content matrix. Reversible success allows more personality. A financial error first requires amount, status, consequence and next action. The tone comes after the information.
The labels describe the action, not the form. "Save Draft" is more robust than "Continue". The screen titles indicate the context. Confirmations specify what has changed.
Translations are tested in the components. A width calculated on French does not provide German, Arabic or a 200% zoom. Dynamic content has explicit limitations and back-up rules.
8. Accessibility: build inclusion into system decisions
Compliance is not just a palette. The component must display name, role, value and status; operate on the keyboard; maintain a logical order; support zoom and flow; announce significant changes; respect movement preferences; maintain a usable target.
The design system documents allowed colour pairs, keyboard behaviours and expectations for screen reader. Examples of code are tested. An accessible specification with defective implementation remains a distributed debt.
Automatic controls run in the library and paths. Manual tests cover keyboard navigation, zoom, real contrast, content, screen reader and mobile. Users with disabilities complete the evaluation; they do not replace the systematic audit.
A deliberately broad sentence summarises the industrial logic: when only one properly designed field is reused in registration, payment, support and administration, its label, focus, messages, keyboard behaviour, autofill and accessible properties improve dozens of screens at a time; conversely, an error integrated into the component spreads with the same efficiency, which justifies a more demanding validation at the source.
9. Motion and feedback
The movement explains a spatial relationship, confirms an action, prioritises a change or maintains continuity. It is not added to make the interface "living".
Grammar specifies durations, accelerations, distances and priorities. Close movements share behaviour. A critical alert does not use the same softness as a reorganised map.
WCAG 2.3.3 requires that non-essential interactive animation be disabled at the AAA level. Preference preference-reduced-motion must be respected. Alternatives do not remove feedback: they replace displacement with an instant change, opacity, or a suitable text indication.
10. Complex data, tables and product interfaces
A digital brand must become discreet. In a dense analytical view, the data dominate. The brand colour reserves the action or a marker, while a functional palette carries the categories.
The tables provide consistent headers, sorting, filter, selection, empty states, loading, error and pagination. The density can be adjustable. Units, rounded, spindles and missing values are defined.
The graphs indicate source, period and method. Interactions remain accessible without exclusive overview. A curve attributable to the brand but misleading destroys more confidence than a sober graph.
11. Prototype in code soon enough
A model does not show the flow, focus, actual loading, latency, fallback fonts or screen reader announcement. Critical components pass quickly into an executable environment.
The prototype covers a vertical route: navigation, input, error, confirmation and return. It measures performance, accessibility and consistency in the same object.
Specifications remain synchronised with the code. A design library without versioned correspondence becomes a second truth. Important decisions are documented near the component: reason, usage, constraints and change.
12. Measuring consistency as performance
The design system cover is useful, but incomplete. Also:
- rate of test compliant components;
- lack of accessibility by route;
- design and development time;
- duplication and exceptions;
- time to correct spread;
- success, error and abandonment by task;
- allocation of certain assets;
- understanding critical messages;
- 75th percentile performance on mobile.
A visual score does not prove use. An interface can be coherent and difficult. Brand, task and quality metrics remain separate before being interpreted together.
13. Brand and product governance
The core brings together product design, brand, development, content and accessibility. It has a roadmap and a budget, not just residual time.
The contributions follow a process: documented problem, proposal, test, review, version and migration. Abandoned components have a date and an alternative.
The brand lead arbitrates the assets and expression. The product lead arbitrates usability. Accessibility defines verifiable requirements. Engineering guarantees feasibility, performance and maintenance. No discipline simply “receives” the work of others at the end.
14. What an error can teach the system
The defects are grouped by origin, not just by screen. A button confusion may reveal an unnamed variant. An inaccessible message may come from the alert component. Incoherent tone often indicates the absence of a content model.
Each incident feeds the design system with a reusable decision. The local ticket remains linked to the source fix and the products to migrate. The recurrence rate is a more useful indicator than the raw number of published components.
When several teams bypass the same rule, the governance group examines the cause. The rule may be too rigid, the component incomplete or the real use case may be exceptional. Prohibiting circumvention without resolving the need moves the divergence out of the library.
Before adding a new variant, the team must show users work it allows, the states it introduces, its accessible behaviour, how it bears or does not wear the brand, its maintenance cost and the difference that prevents the use of an existing component; this plug prevents the system design from reproducing the history of applications under a more orderly appearance.
15. Themes, customisation and white labelling
One theme is not just to replace the primary colour. It modifies surfaces, texts, focus, graphics, images and sometimes density. Each combination respects contrasts and maintains a stable hierarchy.
The white label requires a contract of variation. The customer can choose certain tokens and active ones, while the rules of use, accessibility and behaviour remain protected. A very horizontal logo or a clear colour should not break the product.
Previews calculate invalid couples and propose solutions. The administrator understands the consequences before publication. A safe fallback applies if a value is missing.
In a multi-brand portfolio, technical primitives can be common and semantic themes separated. The products then share quality, accessibility and maintenance without becoming visually identical.
16. User research: tasks, attribution and trust
The protocol compares variants in the same content and on the same device. Participants perform a scenario, then explain status, next action and perception. The attribution is tested without logo on only a few screens; constantly asking the name makes the purpose obvious.
Metrics include success, task completion time, errors, feedback, understanding and trust. Preference comes next. A more liked but less clear variant is not automatically retained.
Expert and new people are separated. The former value speed, density and shortcuts; the latter reveal the mental model. The interface can offer multiple densities without changing its concepts.
For a critical decision, the search includes keyboard, zoom, screen reader and moving conditions. A technical audit and use test answer additional questions.
17. Deploy without a big-bang launch
Migration begins with a vertical path and the components that serve it. The new library temporarily coexists with the old under strict rules.
The teams follow coverage, defects and regressions. A new façade with an old internal route does not count as complete migration. Obsolete tokens and components issue warnings before removal.
With each wave, the cohort compares performance, success and support. If the change increases errors, deployment stops even if visual compliance progresses.
The wave release gathers evidence in a versioned journal. It indicates the tasks tested, the devices, the assistive technologies, the metrics before and after, the defects opened and the share of exposed traffic; when a result deteriorates, the team knows whether to go back to the previous component, correct content, limit the theme or continue the observation without confounding a natural variation with a certain effect.
A second check relates to the brand. On functional screens presented without a dominant campaign or logo, participants must recognise the family, understand the status and maintain their confidence; if the allocation progresses but the task time, accessibility or accuracy shrink, the system has not yet found its balance.
The latter condition remains non-negotiable. The visual difference serves daily use; it never taxes it in time, precision or autonomy.
18. Case study: differentiate without slowing down a business application
A B2B editor wants to make its tool more premium. The first track increases large colour fields, transitions and the size of titles. Expert users display less data and perform their tasks more slowly.
The team maintains the density of recurring screens. It focuses on onboarding, navigation, empty states, visualisation, illustration and microcopy. Distinctive assets appear in the form of containers and a short motion cue that can be disabled.
The tests compare task time, errors, understanding and attribution. The new version becomes more recognisable without asking daily users to pay the difference in clicks or space.
19. Frequently asked questions
19.1. Are UI design and UX design the same thing?
No, but they overlap. The UI expresses perception, states and control. Rigidly separating them often degrades the result.
19.2. Must a design system be completed before redesigning the interface?
The system can start with the priority route. Building an exhaustive library without real use creates speculative components.
19.3. How can a generic interface be avoided?
Work some distinctive assets, composition, voice, states and movement. Adding the main colour everywhere is not enough.
19.4. Does consistency require the same screen on all products?
No. Common principles and components coexist with specific needs. A useful exception is documented; accidental duplication is removed.
19.5. Who maintains the system?
A clearly responsible team or core, with input from the products. Without property, version and budget, the library drifts.
20. Logiks recommendations
Design the brand in the states where trust is gained or lost: waiting, error, confirmation, recovery and support. Turn repeatable decisions into tested tokens and components, then let the expression vary depending on the task. Good brand UI is recognisable without stealing the attention needed for action.
21. Main sources
- WebAIM, The WebAIM Million 2026 : https://webaim.org/projects/million/
- Interdepartmental Digital Directorate, RGAA 4.1.2 : https://accessibilite.numerique.gouv.fr/
- European Commission, EU needs more accessible for all : https://digital-strategy.ec.europa.eu/en/news/eu-becomes-more-accessible-all
- W3C, Web Content Accessibility Guidelines 2.2 : https://www.w3.org/TR/WCAG22/
- W3C, Understanding Animation from Interactions : https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions
- Baymard Institute, Checkout usability benchmark : https://baymard.com/blog/ecommerce-checkout-usability-report-and-benchmark
- Google, Web Vitals : https://web.dev/articles/vitals