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