Layout

Principles

compass Supportive
The layout design guarantees enough white space to prevent a cognitive overload and make the content easy to consume.
puzzle Personal
Depending on the user segment the layout design can be changed to fit his personal needs.
partyhorn Joyful
The layout feels lightweight and the round edges create a touchable, friendly look.

Round Shapes

Our brain reacts more to round shapes than to square shapes, as round shapes are generally perceived as more pleasant. We want to make UI design more human and approachable.

example-border-radius-3
default – 3px
example-border-radius-6
rounded – 6px
example-border-radius-12
12px
example-border-radius-18
18px

Responsive layout grid

The TUI Design system offers a responsive layout grid that adapts to the screen size and orientation.

Breakpoint System

Breakpoint - XS SM MD LG XL XXL
Window 0 ≥ 320 px ≥ 480 px ≥ 768 px ≥ 992 px ≥ 1.200 px ≥ 1.440 px
Container Width 100 % 100 % 100 % 100 % 100 % 100% / max. 1.220 px max. 1.220 px
Gutters Width 20 px 20 px 20 px 20 px 20 px 20 px 20 px
Columns 12 (4 rec.) 12 (4 rec.) 12 (8 rec.) 12 (8 rec.) 12 12 12

Demo

browser Example Page Look at the responsive grid system in your own browser window. Show Layout Demo

Resources

diamond Sketch Template Use TUI Grid as Sketch Template https://www.sketch.com/s/a69b46bc-ee89-464a-92f2-7d46db075320 settings Zeplin Specifications See the specifications https://scene.zeplin.io/project/5ecf6c1b20ee5447720eabae

Related articles

code UI Styles UI Styles prodvides tuidesign including breakpoints and mixins Show UI Styles