> ## Documentation Index > Fetch the complete documentation index at: https://docs.world.org/llms.txt > Use this file to discover all available pages before exploring further. # 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. Base unit ## Paddings **Usage** Padding is set to a default of 24px, providing ample breathing room around elements while maintaining a clean and structured appearance. Paddings ## 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. Navigation bar ## Main pages
One clear task per page

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.

Keep CTAs visible

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.

Minimize unnecessary scrolling

The default space between header and a section that starts with a sub headline is set to 24px.

Prioritize primary actions

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.
Secondary 1 Secondary 2
## 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.
Tab bar Android
Tab bar iOS
## 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.
Drawers Android
Drawers iOS
## 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.
Toast Android
Toast iOS
## 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.
Keyboard Android
Keyboard iOS
## 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.
Bottom space Android
Bottom space iOS
## 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. Common states