Apps need to work anywhere, on any device, and at any time.
The UX design system blends two ways of approaching flexible UI: responsivity and adaptivity.
Responsive UI adjusts the experience to flow between different screen sizes and devices. This makes it easier to use on very large or small screens, helps people with low vision, and meets international accessibility guidelines.
Adaptive UI changes what you see on the screen based on the situation. For example, button sizes get bigger on touchscreens to make them easier to touch.
The UX design system includes the following features:
- High contrast: Screens are easy to read in bright or dark environments.
- Adaptive sizes: Buttons and interactive elements become large enough for fingers on small screens. The layout adjusts at key screen sizes (500px, 1000px, 2000px). However, the design system also adapts to the space the component is rendered within – allowing radical flexibility in panels, widgets, or pages.
- Native device features: Inputs switch keyboard types based on the content expected. For example, a number pad appears when typing in a currency field.