Skip to main content


Developing an Application




Design UI

The OutSystems UI defines the way to build the structure of the user interfaces of your OutSystems applications.

The following figure represents the OutSystems UI Architecture:

OutSystems UI Architecture

Let’s have a look at each component.

The OutSystems UI Framework

The OutSystems UI Framework is the base of all user interfaces and provides UI patterns for Web and Mobile applications and beautiful built-in responsive screen templates for you to use, and allows you to create your customized templates. With these, you can create your live Style Guide which defines all the patterns and styles for building your applications.

For example, you can use the OutSystems UI Web Base and Email stylesheets, and UI Patterns and layouts.

OutSystems UI Framework

The Built-in Screen Templates

Created and maintained by OutSystems, the built-in screen templates are ready to use for developing your applications. You can choose from a different set of Web Screen Templates and Mobile Screen Templates.

OutSystems UI Built-in Templates

The Custom Application Templates

The application templates you use to build your applications. Refer to the OutSystem documentation to learn how to create a Custom Application Template.

OutSystems UI Custom Templates

The Style Guide

The Style Guide is a document with your brand theme colors and patterns ready to use to create a consistent user experience on your applications. It is an essential piece to ensure adherence to your brand rules, user interface consistency, and foster usability. It is designed to guide you through all delivery assets to optimize the development process and user experience.

OutSystems UI Style Guide

Your Applications

Your applications can have all the necessary modules and contain all the CSS. All are created based on an application template.

OutSystems UI Applications

Articles in this Section

  • Screen
    Screen is one of the basic building blocks of both Mobile and Reactive Web Apps. You can create empty Screens or with some predefined content.