> For the complete documentation index, see [llms.txt](https://uia-design-system.gitbook.io/project/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uia-design-system.gitbook.io/project/foundations/rules.md).
# 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
```css
transition: 0.2s ease-in-out
```
For indeterminate states we show spinner
Also we could show spinner in button
## Border radius
{% tabs %}
{% tab title="Web" %}
We used flat corners with `0px` border radius.
{% endtab %}
{% tab title="iOS/Android" %}
Use `4px` border radius for buttons, cards and inputs
{% endtab %}
{% endtabs %}
## Shadow
Shadow size reflects elevation. Surfaces at higher elevations have larger shadows, while those at lower elevations have smaller shadows.
{% tabs %}
{% tab title="Web" %}
```css
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);
}
```
{% endtab %}
{% tab title="iOS" %}
```
```
{% endtab %}
{% tab title="Android" %}
```
```
{% endtab %}
{% endtabs %}
