About design tokens
With this document, merchants can learn the design tokens for F&B (food and beverage) D-store template source code.
Overview
Alipay+ D-store multiplies merchants' sales channels by selling across platforms with just one single store. By providing a suite of toolkits to digitalize merchants' business, operations, and marketing, Alipay+ D-store helps unlock potential opportunities for merchants to better serve and engage with consumers in a cost-efficient way.
This document provides basic design tokens of UI components and elements that are used in F&B D-store template source code. It helps you understand design logic and customize your design token values.
For the design tokens, there are two parts you can expect:
Part A: Color Tokens
1. Brand Primary
Scenarios
This token is widely used for the background color in primary buttons.
Note: The usage of the Brand Primary token is closely related to the usage of the Content on Button token, which should be taken into consideration together. Therefore, for brand colors that are too light, we suggest that you use the same color value as the Content Primary token when designing the Content on Button token.
2. Brand Rewards
Scenarios
This token is widely used in promotional scenarios, such as the content, arrow, or background color of the promotional content or vouchers.
3. Content Primary
Scenarios
This token is widely used for the primary headings, the pop-up window titles, or important titles on a page. If you do not have a systematic color system for text, this default token is recommended.
4. Content Secondary
Scenarios
This token is mainly used for secondary headings in primary pages or primary headings in secondary pages. It conveys the primary textual information to which you must pay the most attention.
5. Content Tertiary
Scenarios
This token is typically used for the body that contains description text or content text.
6. Content Weak
Scenarios
This token is widely used in scenarios such as all unselected icons and options as well as the UI components that contain the secondary description text or secondary information of secondary titles. This section does not offer an exhaustive list of use scenarios. Instead, the following examples are provided for your reference.
7. Content Default
Scenarios
This token is widely used in scenarios such as unavailable icons and options as well as the UI components that contain the default text or information text in the unavailable state.
8. Content Link
Scenarios
This token is typically used for the text that indicates actions or contains links and checkboxes that contain specific agreements.
9. Content On Button
Scenarios
This token is typically used for the text of buttons.
10. Content White
Scenarios
This token is mainly used for text in white, such as the tag text in white.
11. Content Highlight
Scenarios
This token is widely used in scenarios such as price-related text, the text of important titles, or the text of non-clickable icons or tags for decoration or highlighting.
12. Content Action
Scenarios
This token is typically used for clickable and unique icons.
13. Content Selection
Scenarios
This token is typically used for clickable icons that indicate selection.
14. Border Enabled
Scenarios
This token is used for borders or dividers in the available state.
15. Border Disabled
Scenarios
This token is mainly used for borders in the unavailable state.
16. Border Active
Scenarios
This token is typically used for borders in the activated state, for example, the input component border in the Typing state.
17. Border Brand
Scenarios
This token is used for borders in the selected state.
18. Background Primary
Scenarios
This token is mainly used in scenarios such as the background of important brand-specific content, highlighted content, or tags.
19. Background Secondary
Scenarios
This token is mainly used for the background of tabs or tags in the unselected state.
20. Background Tertiary
Scenarios
This token is widely used in the background of the following UI components: titles on custom item pages and input components.
21. Background Card
Scenarios
This token is typically used for the background of cards.
22. Light
Scenarios
This token is typically used for the background of all pages in light mode.
23. Dark
Scenarios
This token is typically used for the background of all pages in dark mode. It is left unused in the D-store template. The Dark token works as an alternate configuration item because it is used differently in different UI systems.
Part B: Typography Tokens
The following sections provide three typography styles, including bold, medium, and regular, and their usage scenarios. To configure fonts, you need to provide the corresponding font files in the ./src/app.less file of the D-store template source code. For more information, see Customize fonts.
1. Bold
Scenarios
This token is used for the following UI components: the headings of primary pages, primary titles of composite modules on secondary pages, important text, feature-related text, all titles on floating panels, and most prices or numbers.
2. Medium
Scenarios
This token is used for the following UI components: the text of buttons, the action text, the titles of secondary pages, descriptive subtitles, the body text, and the most inputted text.
3. Regular
Scenarios
This token is used for the following UI components: the body of secondary pages, the body of status pages, description text, and tag text.
