Rules

Making changes to UI patterns

UI patterns can and should be modified for a number of reasons: feature additions, bug fixes, subtle or major visual design tweaks, performance improvements, accessibility enhancements, code refactoring, UX best practice updates, and so on.

The design system maintainers need to understand why and when to tweak patterns, how to go about making those changes, and how to roll out those improvements into individual applications.

Keeping patterns fresh is essential for the long-term health of the design system.

Grid

We uses the grid system to achieve the order of the visual system. For all elements we are using 4px grid unit. This size goes through all compositions, components and elements. Grid system thinking can help designers quickly achieve design decisions in the layout space while simplifying communication between designers developers.

Localization

Amount of symbols in English text	Approximate length growth in different languages
<10	200-300%
11-20	180-200%
21-30	160-180%
31-50	140-160%
51-70	130-140%
>70	150%

Animation

Hover animation styles

transition: 0.2s ease-in-out

For indeterminate states we show spinner

Also we could show spinner in button

Preview on mobile app

Border radius

Web

We used flat corners with 0px border radius.

iOS/Android

Use 4px border radius for buttons, cards and inputs

Shadow

Shadow size reflects elevation. Surfaces at higher elevations have larger shadows, while those at lower elevations have smaller shadows.

Web

z1 {
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
}
z2 {
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
}
z3 {
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}

iOS

Android