Le guide d'Orange contenant un certain nombre de ressources

A consistent set of design tokens already defined

A workflow or framework with methods for each step

Another personal website that has a navigation similar to an app. Its content is straightforward.

1. Plan your color use: avoid or limit white to pure black colors. Black can be used but dim the text slightly.
2. Brand the dark color with a gradation of a brand color. Black and white only is also a kind of branding.
3. Reduce color saturation
4. Communicate depth through a scale of lighter colors to translate the elevation: the brighter the higher.
5. Check dark mode contrasts.
6. Design light mode first by default.
7. Use bare colors to design dark mode: transparent color can help.
8. Use the system default setting or user preference to set the mode.

Some cards are mixed to create a new type of user.

In short, don’t try to make something beautiful. Try to make something well-organized, and watch the beauty emerge!

Some best practices to design interfaces.

• centering in a box: leave at least half its shortest dimension as a minimum margin.
• vertically centering text

  Why is it called ‘x’ height? Because the letter ‘x’ is the only letter in the alphabet that has all its terminals touch both the baseline and the meanline, with no extending points.

• when centering text inside a box, you need to use the height of the lowercase letters to do the centering and make sure there is the same amount of space all around the text.
• when centering a polygon, center the circle passing by each point instead of centering the box around the polygon.
• when putting a rounded box into another one, a mistake I have seen often is to use the same border-radius on the box outside and the box inside. You need to use a proportional radius when doing such rounded box nesting.
• repetition is key to a rhythm: go for the design system.
• not so justified: use manually justify content instead of this ugly automatic one.
• a contrast ratio of 4.5 or higher is recommended.
• the contrast between each heading level should be high enough for the structure to be visible. if possible, a consistent ratio between different header levels usually looks more elegant.

A good example is Amazon’s Basics range. Amazon buys white label products from multiple manufacturers and sells them under the Basics brand.

White label design services follow a similar concept. A creative agency builds tools, apps, and websites (templates) that companies can purchase and rebrand.

Challengs of White Label Design are multiple:

• white label products must be re-brandable: the design should fit everyone, and everyone should be able to customize it.
• flexible information architecture: the white label product provides many page layouts and navigational possibilities while maintaining the flexibility to adapt to the brand’s requirements.
• accessibility: UX designers must also consider accessibility, so products comply with WCAG (Web Content Accessibility Guidelines) standards.

In order to define a white label system, we can extend atomic design (atoms, molecules, organisms, templates, pages) with a new elements category: it contains colors, typefaces, grids, spacing, brand assets, etc... They are all the design tokens :)

Ready to use design tokens

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

Source code: https://github.com/htmlstreamofficial/preline

Looks complete

A game where you need to pick the design that is most correct. Test your attention to details!

Check the interaction is ok

The Selection control ecosystem flow chart has a great tree-choice to display the expected field component.