Components

The components are our LEGO blocs. They bring composition, inheritance and unlimited overrides from engineering to design.

Define bricks then build houses

Generally, components consist of lower-level elements: icons, forms, buttons, headlines, paragraphs, etc. The goal is to preserve consistency in appearance and to reuse them throughout the app.

Don't

Card look changed, DRY princinple broken.

1. New borders around the card.
2. Different edges rounding.
3. Different shadow style.

Keep density consistent

Keep consistent density to preserve a unified and balanced component look.

Do

Consistent distances: 32px outside the card and 24px between the elements.

Don't

Different distance around the elements. Disrupted balance.

Follow best practices

Navigation blocks must be available in the places where the user expects to see them. Have a better idea? Prove it with A/B test.

Don't

Navigation hidden between content.

Don't

Navigation overloaded with unnecessary functionality.

Do

Main actions are accessible. No extra clicks.

Don't

Main actions hidden in menu.

More space for click

Aside from the visual part, control elements must include a more significant clickable area. We will use it for Tap, Click, Active events.

Do

Create extra borders to increase the clickable area. Here we use 8px around the icon.

Don't

Small clickable area for Mr. Precise Clicker. Will probably make regular user upset.

Do

Following the rule on 🔝

Don't

No extra area for the action.

Need help with design & processes?

Learn about heartbeat →