CHRISTOPHER RITTER

USER INTERFACE DESIGN

STYLE GUIDES
Project Morpheus
Style Guide

CHECKBOX

RADIO BUTTON

BASED ON HOLO LIGHT & DARK TEMPLATE

All elements are standardized in MDPI and created with vector shapes.
Per Googles stencils dated 2012-07-16

OFF
SWITCHES

ON

DEFAULT BUTTONS
TYPOGRAPHY

Normal

Roboto, text size micro 12sp

Roboto, text size small -14sp

Focused

Roboto, text size medium -18sp

Roboto, text size large -22sp

Pressed
Focused disabled

COLOR

Disabled
#FFBE00

#F0F0F0

#3475CE

#D0262E

#649540

#FF9600

#A0A0A0

#163560

#831418

#364D25

LIST

SECTION HEADER

Normal
Pressed

ACTION BAR
PORTRAIT HEIGHT

48dp

Activated
Focused
Disabled focused

SPLIT
ACTION BAR

Disabled
SECTION HEADER

CONTEXTUAL
ACTION BAR

Single line item

1 selected

CONTEXTUAL SPLIT
ACTION BAR

1 selected

Single line item with button

Single line item with avatar
TWO LINE LIST

LANDSCAPE HEIGHT

40dp

Lorem ipsum dolor sit amet

Secondary line item

Lorem ipsum dolor sit amet

Secondary line item

Lorem ipsum dolor sit amet

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

Secondary line item

DESIGN COMPOSITIONS

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

DESIGN SPECIFICATIONS
1.0 Guidance Bar

1.0 Guidance Bar

The guidance bar is displayed at the bottom of

the guidance screen. It displays the guidance
settings along with the settings buttons.
BACKGROUND
#163561

12 DP

24 DP

24 DP 24 DP

24 DP 24 DP

1.1 Settings Buttons

Both of the settings buttons use a 32x32
DPI icon within a 48x48 button.

1.1 Settings Buttons

8 DP

BACKGROUND (DEFAULT)
#163561, 1 DP

32 DP

BACKGROUND (SELECTED)
#2E74D7

48 DP

8 DP

BORDER
1 DP, #767494

8 DP

32 DP

8 DP

1.2 Guidance Settings

Guidance settings should expand and
contract along the dimensions. In addition,
padding between the dividers and settings
may be decreased to 12DP if necessary.
TEXT LABELS (INCLUDING UNITS)
#FFFFFF, 14 SP, Align Right (UNITS
ONLY), Vertical Align Center
TEXT ITEMS
#FFFFFF, 22 SP, Align Right,
Vertical Align Center
DIVIDER
1DP, #767494

1.2 Guidance Settings

30 DP

12 DP
16 DP

72 D
32 DP
12 DP
32 DP

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

24 DP

3D MODELING

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

APPLICATION ICONS

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

PLAN ICONS

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

SETTINGS ICONS

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

LAUNCHER ICONS

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

USER JOURNIES
Operator

Expert

Support

Sales

SITECH

Foreman

TBC
er

ail

Tr

Office

Tech
Site

Super

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

GAMESTORMING

DAY 1

DAY

DO NOT SHARE THIS DOCUMENT WITHOUT PERMISSION FROM THE AUTHOR.

FOR MORE INFORMATION VISIT:

CHRISTOPHERRITTER.COM