Mobile design guidelines
Mobile design rules that shouldn't become components.
Some concepts don’t belong in a component. They are better written down as rules.
One screen = one main action
Apart from a few hubs and home screens, a mobile screen should have one clear goal.
Avoid excessive card nesting
Don’t nest cards without a reason. Each level of padding and border takes space away from the content.
One primary scroll direction
A content area should favor one main direction:
- vertical;
- horizontal.
Touch target
A touch action should stay comfortable to hit: around 44pt minimum. Tappable and IconButton enforce it.
Context preservation
Use a BottomSheet, a Menu or another overlay when the user needs to do something without losing the current screen.