Guidelines
Design Guidelines
This page gives you quick, visual rules to meet a high design standard for mini apps. Each image shows the intended pattern and a short usage note so you can apply it fast.
Grid and spacing
Usage Padding is set to a default of 24px, providing ample breathing room around elements while maintaining a clean and structured appearance.Paddings
Usage Padding is set to a default of 24px, providing ample breathing room around elements while maintaining a clean and structured appearance.Navigation bar
Usage Except for the control components of Mini Apps in the upper-right corner, all the other contents can be configured for custom designs. If interactive elements need to be set near the control components of Mini Apps, the developer shall note that whether the interaction area will conflict with the control components, and whether the operation is easy.Main pages
The default space between a header and its associated content is 16px, and the same 16px spacing applies between elements within a section. This consistent use of spacing helps create a clean visual structure and predictable rhythm across the UI.
The default space between sections is set to 32px, helping to create clear separation between distinct areas of content. The space between the search bar and the content below is 24px, while the space between a sub-headline and its associated content is 16px.
The default space between header and a section that starts with a sub headline is set to 24px.
The default space between last item inside the scrollable area if a bottom bar is presented is 32px.
Secondary pages
Usage The default space between a header and its associated content is 24px, while the space between a header and a secondary title is 32px. The space between secondary title and description should be 12px.Tab bar (Android vs iOS)
Usage Navigation bar is positioned with a 12px space from the iOS & Android bottom bar, ensuring optimal accessibility and a comfortable tap area.Drawers / sheets (Android vs iOS)
Usage Drawer is positioned with a 12px space from the iOS & Android bottom bar, ensuring optimal accessibility and a comfortable tap area.Toasts (Android vs iOS)
Usage The toast message should be horizontally centered and positioned directly below the header to ensure visibility without disrupting user interaction.Keyboard handling (Android vs iOS)
Usage Buttons are placed 24px above the active keyboard. This spacing ensures that buttons remain easily accessible and visually distinct, even when the keyboard is active, preventing accidental taps or overlap.Bottom safe area space (Android vs iOS)
Usage Buttons are positioned with a 24px space from the iOS bottom bar, ensuring optimal accessibility and a comfortable tap area.States
Usage Middle alignment ensures consistency across various screen sizes and component states, making the interface feel polished and intentional. This alignment strategy is especially effective for empty states, loading indicators, or other transient states, providing a seamless and cohesive user experience.