Mobile Design System v1.00

Created for the mobile app space. This covers much of the standard UI for AIG systems. New UI will be introduced as per requirement. Minimum viewport support at 320px but optimized for modern High Density screens like the iPhoneX (375px).
Last updated: 2 Jul 2018
Color Pallete
Links
NAV LINK ARROW
NAVIGATION LINK
Link
Link
App Headers
Type 1
LINKLINKLOGIN
LINK 2LINK 2
Type 2
LINKLINKLOGIN
Type 3
TRAVEL GUARD® DIRECT
BACK
Total Price: S$77.25
Separator
Title Headers

Header 1

Header 2

Header 3

Header 4

Header 1

Header 2

Header 3

Header 4

Header 1

Header 2

Header 3

Header 4

Paragraph Text

Paragraph Title

Paragraph Body. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Mini. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph Mini. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Buttons
Button Text
*button states applied
Button Text
*button states applied
Button Text
*button states applied
CHOOSE FILE
*button states applied
FLEXIBLE TYPE BUTTON FOR CTA
*button states applied
Input Fields
Textfield Title
Name of Detail
Currently entering detail (focus)
Invalid detail
*Invalid details
Layout text field 1
Name of Detail
Layout text field 2
Detail 1
Detail 2
Layout text field 3
Detail 1
Detail 2
Detail 2
Layout text field 4
Detail 1
Detail 2
Layout text field 4
Detail 1
Detail 2
Drop Selection
Drop select
Drop select
Drop select option 1
Drop select option 1
Drop select option 1
Drop select option 1
*apply js or css animation to rotate arrow in the opposite direction
Day
01
02
03
04
Year
Month
*apply good judgement on what styles to use. Wrappers are styled to provide layout structure.
*refer to sketch file on how to display and code scrollbar.
Selection (Simple)
Selection Title
Option 1Option 2Option 3Selected Option
*Please select an option
*option states applied
Layout selection 1
Selection Title
Option
Layout selection 2
Selection Title
OptionOption
OptionOption
Layout selection 3
Selection Title
OptionOption
OptionOption
OptionOption
Radio option
Information required user to check or uncheck this option box.
Information required user to check or uncheck this option box.
Information required user to check or uncheck this option box.
*Please agree with this term.
Selection (Package)
Selection Title
Plan title
S$00.00
+ 00.00 KrisFlyer miles
Plan title
S$00.00
+ 00.00 KrisFlyer miles
Steps Mini
1
2
3
4
5
1
2
3
4
5
*check combo classes to style step (active or non active)
Steps Jumbo
01
02
03
04
05
Accordion
Unable to commence travel
(pre-departure)
Unable to commence travel
(pre-departure)
Icons
SKIP
Content box
Lorem ipsum dolor sit amet, mel ad ubique salutatus consetetur, tale mollis torquatos per cu, vim at dolor civibus. Debet pertinacia necessitatibus per ne, vidit populo id eum. Tale putent nec in. Id velit denique mel, duo propriae scaevola ad, facer omittam vis in. Cu vivendo tractatos eum, mei graeco aliquid ei, sed eu diam eros meliore.