Siemens Midwest DesigoCC Design Guides

2019 - 6 - 20 | V 1.2

Siemens Midwest Zone DesigoCC Template Guide

Siemens Midwest Zone DesigoCC Template Guide

Index

01 Color Swatch Corporate Colors Primary Colors Accent Colors

02 Typography 4 4 5

Font Weights Font Colors Font Sizes Info & Body Text

6 6 6 7

03 UI Elements

04 Floor Plans

Base Template 8 Samples 9 Banner Elements 12 Banner Nav Button 13 Graphic Link 13 Home Link 14 Samples 15 Text Field 22 Samples 23

Walls 24 Ductwork 24 Boxes 24 Sensors 24 Samples 25

05 Systems

06 Extra Notes

Samples 28

Color Swatch - Corporate Colors 50%

A

B 50%

A

B

83%

Dynamic Petrol

RGB D C A 65% B C D C

Petrol CMYK A 65 0 26 0 B 100 0 40 0 C 100 5 5 0

RGB Hex# CMYK

Stone Dark

Sand Dark

Snow

RGB 60 70 75 Hex# 3c464b CMYK 25 0 0 85

RGB 115 100 90 Hex# 73645a CMYK 0 20 25 67

RGB 255 255 255 Hex# ffffff CMYK 0000

Stone Light

Sand Light

RGB 135 155 170 Hex# 879baa CMYK 25 0 0 40

RGB 170 170 150 Hex# aaaa96 CMYK 0 0 15 40

Stone Light 35%

Sand Light 35%

RGB 190 205 215 Hex# 879baa CMYK 25 0 0 40

RGB 215 215 205 Hex# d7d7cd CMYK 0 0 5 14

80 190 190 0 153 153 0 153 203 0 153 176

Hex# A 50bebe B 009999 C 0099cb D 0099b0

0 153 153 009 999 100 0 40 0

- Primary Colors

4

- Accent Colors Teal Dark

Teal Light

Blue Dark

RGB 0 100 110 Hex# 00646e CMYK 100 0 25 50

RGB 65 170 170 Hex# 41aaaa CMYK 65 0 25 15

RGB 0 95 135 Hex# 005f87 CMYK 100 0 0 55

Blue Light

Yellow Dark

Yellow Light

RGB 80 190 215 Hex# 50bed7 CMYK 65 5 15 0

RGB 235 120 10 Hex# eb780a CMYK 0 58 100 0

RGB 255 185 0 Hex# ffb900 CMYK 0 37 100 0

Green Dark

Green Light

RGB 100 125 45 Hex# 647d2d CMYK 40 0 80 45

RGB 170 180 20 Hex# aab414 CMYK 23 0 100 20

Red Dark

Red Light

RGB 100 25 70 Hex# 641946 CMYK 0 85 0 75

RGB 175 35 95 Hex# af235f CMYK 0 100 20 28 5

Typography - Font Weights

Aa

Arial Regular

- Font Colors Stone Dark Stone Light 35% Snow

Aa Arial Bold

- Font Sizes

F1 - 36 pt

Use- Title Page

Font Weight- Bold

F2 - 22 pt

Use- Status

Font Weight- Regular

F3 - 20 pt

Use- Nav Buttons

Font Weight- Bold & All Caps

F4 - 20 pt

Use- Home Buttons

Font Weight- Bold

F5 - 16 pt

Use- Sub Titles

Font Weight- Bold & All Caps

F6 - 16 pt

Use- Links in Graphic

Font Weight- Regular

Use- Content Title

Font Weight- Bold

Use- Text & Content

Font Weight- Regular

F7 - 12 pt F8 - 12 pt 6

- Info & Body Text Lorem ipsum dolor sit amet, ex est quot mucius, etiam tation voluptatibus per ex. Quo delicata maluisset interpretaris ex, his eu aperiam verterem. Vim ocurreret constituam comprehensam no, mea at omnes doctus luptatum. Lobortis platonem et qui, pri ne virtute quaestio. His ei ubique vivendo, an pro sumo essent.

Vim dignissim intellegebat cu, vero nullam populo mea et. Vis et alii tractatos concludaturque, has melius quaerendum te. Ut eum sensibus suscipiantur, an qui causae intellegam definitiones. Mei erant vivendum id. Ius quod autem facer cu, te sed quem tractatos. Ad hinc voluptua facilisis nec. Quem iudico duo ei, mollis oportere est eu.

7

UI Elements - Base Template

1050 px

2150 px Rules to Follow Default pixels will be 2150 px by 1050 px Template can be scaled by using “Scale factor” in Symbol Instance Properties Scaling the template allows for objects to stay at scale factor 1 Recommended Scale factors: .75 and .5 (any smaller will cause problems) .75 = 1612.5 px by 787.5 .5 = 1075 px by 525 px 8

- Samples

9

- Samples

10

11

- Banner Elements

Graphic Title

Under Substitutions in Symbol Instance Properties Graphic Title, Location, Serves can all be replaced with the appropriate content

SERVES: XX

LOCATION: XX Spacing is 5 px between boxes

T:

H:

All elements can be moved or extended to accommodate for extra data points when editing symbol properties Despite moving elements, the spacing between elements must be preserved 12

Customer Logo or Name goes in here

- Banner Navigation Button

BUTTON

BUTTON

Under Substitutions in Symbol Instance Properties BUTTON can be replaced

BUTTON

Spacing is 5 px between boxes

Size of banner navigation buttons are 175 px by 40 px (Do not change, abbreviate if needed)

All Nav Buttons must be in all caps

- Graphic Link

Links

Links

Links

Links

Links

Links

Links

Links

Links

Links

Size of link buttons are always 40 px in height Width may be changed to accommodate link title First Letter of Each Word is Caps for Links Colors can be changed based on graphic Reference “Color Swatch” for useable colors Links must be aligned properly

13

- Home Link

Links

Links

Links

Links

Links

Links

Links

Links

Home page links can be any size that accommodates size 20 font All Home Page Buttons must be the same size First Letter of Each Word is Caps for Home Page Buttons Button stroke colors can be changed based on graphic Default stroke color is Stone Dark Reference “Color Swatch” for useable colors Links must be aligned properly Fill is always Snow

14

- Samples

15

16

17

18

19

20

21

- Text Field Title On/Off Status Proof Setpoint

Name Device 1 Device 2 Device 3 Device 4 Device 5 Device 6 Device 7

22

Title Block

Information Block

Height of block is 40 px Height may be adjusted by increments of 10px Color fill is Stone Dark Stroke is Snow Font size is 12 pt Font color is Snow Width must match the Information Block

Height/width of block is adjusted to information Color Fill is Stone Light Stroke is Snow Font size is 12 pt Font color is Black (Font color can also be Snow)

Start/Stop

Title Block

Status

DAT

Damper

Same rules as above but with multiple titles Align accordingly Information Block When displaying multiple devices and points, each device contains its own block Align accordingly

- Samples

23

Floor Plans - Walls

- Boxes

- Sensors

Stone Dark RGB 60 70 75 Hex# 3c464b CMYK 25 0 0 85

- Ductwork Green RGB 0 255 0 Hex# 00ff00 CMYK 63 0 100 0

24

T

- Samples

25

26

Systems Air Systems are 3D Water Systems are 2D All Display and Symbols will use Tooltip for hover over detailed information

27

- Samples

28

29

Extra Notes Make sure to check the contract and spec sheet to see what graphics are required of the job When creating graphics, make sure to use text box symbols instead of symbols for major systems. i.e. Chillers, Pumps, Boilers, etc...

“Global_Base_HQ_1\DYN_All_Genergic_Display_Analog Input_Central_002” Is the standard symbol for point blocks.

Additioinally, use DPtype=2 in Substitutions for setpoints.

All Button Symbols scale factor must match background templates Reminder: Screen property size needs to be changed when scaling the background template.

30