WeChat Mini Program Design Specifications (5) Visual Specifications

5. Visual specifications

In order to facilitate designers to design, WeChat provides a set of basic control libraries that can be used for web design and small programs; it is also convenient for developers to call.

Preview address: https://weui.io

1. Font specification

Common font sizes are 20, 18, 17, 16, 14, 13, 11 (pt), the usage scenarios are as follows:

The use of WeChat fonts is consistent with the running system fonts, taking navigation as an example, The corresponding fonts for iOS and Android are as follows:

Navigation (iOS and Android)

##Font color

The main content is Black, the secondary content is Gray; the timestamp and form default value are Light; large sections of description content that are the main content are Semi black;

Blue is the color for links, green is the color for completion, and red is the color for errors. Press and Disable states reduce the transparency to 20% and 10% respectively;

2. List visual specifications

3. Form input visual specifications

4. Principles for using buttons

Standards for text on buttons outside the list

Use when the button height is 44px: color #000000 / #353535 font size 18pt

The transparency of the text is adjusted to 60% in the clickable state
The transparency of the text is adjusted to 30% in the non-clickable state

Button outside the list Text standard

Use when the button height is 25px: color #000000 / #353535 font size 14pt

Text standard on the page linear button

Use when the button height is 35px: color #09BB07 / #353535 font size 16pt

5. Principles for using icons