Base Style Guide

Architecture

What is a Style Guide? And a Live Style Guide?

Style Guide Architecture
Built-in Style Guide
What is a Style Guide?

A document that establishes a clear, consistent

and unique visual form of communicating a brand.

2
What is a Live Style Guide?

A live documentation with brand theme,

colors, and patterns.

3
What is a Live Style Guide?

A live documentation with brand theme,

colors, and patterns.

Styles Templates Patterns

4
OutSystems UI
UI Framework for Web and Mobile apps with:

5
OutSystems UI
UI Framework for Web and Mobile apps with:

Theme

for look and feel

6
OutSystems UI
UI Framework for Web and Mobile apps with:

Theme
Templates

for look and feel for common

functionality and
Screen's structures
7
OutSystems UI
UI Framework for Web and Mobile apps with:

Theme
Templates
Patterns

for look and feel for common for reusable interface

functionality and elements
Screens' structures
8
Style Guide Architecture

9
Style Guide Architecture

Theme
● CSS styles and classes

10
Style Guide Architecture

Theme
● CSS styles and classes

Template
● Contains common layouts, menu, login
and a reference to the theme

11
Style Guide Architecture

Theme
● CSS styles and classes

Template
● Contains common layouts, menu, login
and a reference to the theme

Patterns
● Reusable UI components

12
Style Guide Architecture

Theme
● CSS styles and classes

Template
● Contains common layouts, menu, login
and a reference to the theme

Patterns
● Reusable UI components

Live Style Guide

● Example of the patterns and the look
and feel of the Style Guide

13
Style Guide Architecture

Theme
● CSS styles and classes

Patterns
● Reusable UI components

Template
● Contains common layouts, menu, login
and a reference to the theme

Live Style Guide

● Example of the patterns and the look
and feel of the Style Guide

14
Why is Style Guide
Architecture
Important?
Why is Style Guide Architecture Important?

Performance

Only load the necessary

resources

16
Why is Style Guide Architecture Important?

Performance Maintainability

Only load the necessary Easily adopt the Style Guide

resources in new apps

17
Why is Style Guide Architecture Important?

Performance Maintainability Scalability

Only load the necessary Easily adopt the Style Guide Avoid dispersion and
resources in new apps development in multiple
modules

18
Why is Style Guide Architecture Important?

Performance Maintainability Scalability

Only load the necessary Easily adopt the Style Guide Avoid dispersion and
resources in new apps development in multiple
modules

19
Built-in Style Guide
Built-in Style Guide
● The first UI module will be
a clone of the template

21
Built-in Style Guide
● The first UI module will be
a clone of the template
● Includes the Menu and
Login flow

22
Built-in Style Guide
● The first UI module will be
a clone of the template
● Includes the Menu and
Login flow
● References the
OutSystems UI theme

23
Built-in Style Guide
● The first UI module will be
a clone of the template
● Includes the Menu and
Login flow
● References the
OutSystems UI theme
● Other modules created in
app reference first module

24