> 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 %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://uia-design-system.gitbook.io/project/foundations/rules.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.