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

Border radius

We used flat corners with 0px border radius.

Shadow

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

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);
}

PreviousFoundationsNextLogo

Last updated