Facelift 3.0 Guidelines

Goal

Deliver delight and satisfaction through a clean, focused experience by including current trending style, more focus is on the content or text style as compared to design style. Standard color groups to identify different features or functionalities.

Objectives

Clean screen background

Less color usage for screen elements

One family icons

Colors as per functionality and groups

Standard placement of buttons

Items covered

• Form Background

• Form Fields

  • States (Default, Hover, Active, Mandatory)

• Form Sections

  • No section border

• Message Box

• Buttons

  • Primary

  • Secondary

  • Warning(Delete)

  • Multi-Action

  • Pick List

• Action Dropdown

• Summary Screen

  • Customized as per module

• Module Dashboard

• List Screen

  • Header

  • Table Style

  • Hover

  • Action Button

  • Paging

  • Filter Row Background

• Homepage

  • Background

  • Widget Header and Border

  • Menu Style, Icons, and Top Header Icon (SF Symbols)

• Widgets

  • Color Code based on Status

• Calendar

  • Remove Status Column

  • Display Flag with Text and # of Days

Screenshot

Homepage

Open

PopUp, Forms, Section, and Fields

Open

List and Button

Summary

Mobile

Access Code, Log in

Home, Icons, Summary, Screen, List

Explorations + Decisions

Releases

22.1

Next steps

Impact

Help Guide

Delico(Button Position Changes, Icon Size and Style )

Automation Testing (Button Position Changes, Icon Size and Style )

Other documents