TouchLink Design Themes Reference Guide - Home | … · The theme resource library has more than...
Transcript of TouchLink Design Themes Reference Guide - Home | … · The theme resource library has more than...
Copyright© 2011 Extron Electronics. All rights reserved.
TrademarksAll trademarks mentioned in this guide are the property of their respective owners.
Contents
Introduction ......................................................... 1
Overview ...............................................................1Resource Kits ........................................................2
Icons Images ....................................................... 3Templates .............................................................3Using This Guide ...................................................4
Elements and Colors Table ................................. 4Fonts Table .......................................................... 4Template Layouts ............................................... 4
Flash Theme ......................................................... 5
Elements and Color Palette ..................................5Fonts ......................................................................8Flash Template Layouts ........................................9
TLP 700 ................................................................ 9TLP 350 .............................................................. 12
Jet Theme ............................................................ 13
Elements and Color Palette ................................13Fonts ....................................................................15Jet Template Layouts ..........................................16
TLP 700 .............................................................. 16TLP 350 .............................................................. 19
Power Theme ..................................................... 21
Elements and Color Palette ................................21Power Template Layouts ...................................24
TLP 700 .............................................................. 24TLP 350 .............................................................. 27
Speed Theme ..................................................... 29
Elements and Color Palette ................................29Speed Template Layouts .....................................32
TLP 700 .............................................................. 32TLP 350 .............................................................. 35
University Theme ............................................. 37
Elements ..............................................................37Fonts ....................................................................38University Template Layouts .............................39
TLP 700 .............................................................. 39TLP 350 .............................................................. 42
University Colors .................................................43
Vortex Black Theme ........................................ 47
Elements and Color Palette ................................47Fonts ....................................................................49Vortex Black Template Layouts ..........................50
TLP 700 .............................................................. 50TLP 350 .............................................................. 53
Vortex Blue Theme .......................................... 55
Elements and Color Palette ................................55Fonts ....................................................................57Vortex Blue Template Layouts ..........................58
TLP 700 .............................................................. 58TLP 350 .............................................................. 61
Vortex Green Theme ....................................... 63
Elements and Color Palette ................................63Fonts ....................................................................65Vortex Green Template Layouts .........................66
TLP 700 .............................................................. 66TLP 350 .............................................................. 69
Extron GUI Configurator Fonts .................. 71
Notes: ................................................................... 72
Contact Information ....................................... 74
Extron TouchLink Design Themes • Contents iii
Introduction
OverviewExtron® has developed a series of pre-configured design themes to help streamline and accelerate the TouchLink™ user interface development process. Each design theme is a complete collection of graphical elements used to create a cohesive-looking user interface. At the time of this publication, Extron offers eight unique themes, including:
FLASH JET
POWER
SPEED
UNIVERSITY VORTEX BLACK
VORTEX BLUE VORTEX GREEN
Extron TouchLink Design Themes • Introduction 1
The Extron TouchLink Design Themes Reference Guide documents each of these design themes. This guide is a valuable resource for any TouchLink graphical user interface developer wanting to maintain a consistent, professional look with the Extron TouchLink design themes.
Resource Kits
A resource kit is a complete themed collection of graphic elements and sound files that a graphical user interface developer can download from the Extron website. They provide the developer everything needed to make a consistent and cohesive user interface based on one of the Extron design themes.
The graphic elements include:
• Backgrounds
• Headers
• Side Bars
• Footers
• Pop-up Backgrounds
• Button graphics in both their selected (on) and not selected (off) states
Audio files that can be used for feedback are also included. Each resource kit has a substantial library of universal TV icons, as well as, common A/V icons that match the selected theme.
Figure 1. Using Resource Kit Elements
Extron TouchLink Design Themes • Introduction2
Icons Images
A/V Icons
Each theme resource kit has more than 70 themed basic A/V icons. Some examples of the these icons are:
TV Icons
The theme resource library has more than 350 worldwide TV network icons. Some examples of these icons are:
Templates
A template is a ready-to-use file imported into the Extron GUI Configurator software that allows one to quickly develop a TouchLink Graphical User Interface project. When starting a project the developer is first given the choice of what theme to use determined by the application for the system. The developer then has the option to use the templates “as-is” or modify them to create new pages. Elements and icons in the resource kits are included as part of the template package. Several templates are available for download from the Extron website.
Extron TouchLink Design Themes • Introduction 3
Using This Guide
Tables throughout this guide show the elements and colors that make up a specific theme. To the left of the Elements and Color Palette table are thumbnail images of the template pages illustrating how these are used. All element files are in .png or .jpg formats. Several, but not all, element files are shown.
NOTE: Each thumbnail image has a number that corresponds to the reference numbers in the right column of the “Elements and Colors Palette” and the “Fonts” tables.
Elements and Colors Table
This table may be one to three sections depending on the theme.
• Elements — This section provides examples of design elements that are in both the resource kit and in the template.
• Background Colors — This section provides RGB and HEX color codes for backgrounds used in theme templates.
• Button Colors — This section provides RGB and HEX color codes for buttons used in theme templates.
Fonts Table
For each theme, this table lists the font sizes and colors used in a theme. Two font types are used throughout: Arial Bold and Extron® GUI Configurator. The table gives examples of how each font is used in a theme.
Template Layouts
Additional TLP 700 and TLP 350 template layout examples follow the tables for each theme.
Extron TouchLink Design Themes • Introduction4
Flash Theme
Elements and Color Palette
Swatch RGB Code or File Name
Hex Code
Use For (an) Example, See...
a
b
c
d
Elements
flash_bkgd_dual.pngBackground for dual display and window display main pages — TLP 700
Figure 3flash_bkgd_window1.pngflash_bfgd_display1.png
Background for window main page. There is a similar dual display background — TLP 700
flash_background.pngBackground single, divisible room, and Video Conference main pages — TLP 700
bghFigure 5
flash_video.pngBackground for full pages such as DVD and VCR — TLP 700 and TLP 350
cFigure 11
flash_audio.pngPreset Selection and Audio Control pages — TLP 700 and TLP 350
dfFigures
2, 6
flash_wood.pngBackground for Preset Selection and Audio Control — TLP 700 d
flash_start.pngStart page with the power button in place — TLP 700
aFigure 7
flash_shutdown.pngBackground for start, starting up, shutting down, and confirmation pages — TLP 700 and TLP 350
a
flash_320px.pngBackground for Aux, Laptop, and PC — TLP 350
eFigure 10
flash_panel_leftside.pngLeft side panel, a right side panel is in the Resource Library — TLP 700
Not shown
flash_room1_sel.pngTab bar over the black background for Window display — TLP 700
Figure 2
title.pngBackground for titles such as DVD — TLP 700 and TLP 350
cde f
flash_vol_nsel.pngflash_volvert_nsel.png Horizontal volume bar on main page and
vertical volume bar on Audio Control page — TLP 700
bfg hjflash_vol_sel.png
flash_volvert_sel.png
Extron TouchLink Design Themes • Flash Theme 5
Swatch RGB Code or File Name
Hex Code
Use For (an) Example, See...
e
f
g
h
i
Elements (Continued)
preset01_sel.png Preset Selection button (selected) — TLP 700 d
Preset01.pngPreset Selection button (not selected) — TLP 700
dfFigure 6
flash_start_nsel.pngPower on button (not selected) — TLP 700 and TLP 350 i
flash_input_nsel.pngA/V source button (not selected), use with A/V icons in Resources Library
bgh j
flash_laptop_nsel.pngA/V source button icon (not selected) on main page — TLP 700
flash_tuner_sel.pngA/V source button icon (selected) on main page — TLP 700 j
flash_transport_nsel.png Button (not selected) — TLP 700 and TLP 350 cgj
flash_transport_sel.png Buttons (selected) — TLP 700 and TLP 350 gFigure 5
flash_system_btn_nsel.pngSystem Off button (not selected) on main page — TLP 700
Not shown
flash_roomstatus.pngCombined and Individual button on status bar (not selected and selected) — TLP 700
Not shown
flash_dial_nsel.png Button (not selected) on Tuner page — TLP 700 j
flash_scroll-light_nsel.png Button (not selected) — TLP 700 and TLP 350 cFigure 4
flash_transport_drkblu_nsel.png
Freeze button (not selected) — TLP 700 and TLP 350
gFigure 5
Background Colors
211, 211, 211
105, 105, 105
D3D3D3
696969
Fill: Rectangle over background — TLP 700
Border: a
128, 128, 128
70, 130, 180
808080
4682B4
Fill: Rectangle around Audio Control buttons — TLP 700
Border: f
Button Colors
218, 226, 232
105, 105, 105
DAE2E8
696969
Fill: Buttons on status bar (not selected) — TLP 700
Border: b
49, 53, 58
255, 255, 255
31353A
FFFFFF
Fill: Back and Full Screen Video buttons (not selected) — TLP 700
Border: Whited
Extron TouchLink Design Themes • Flash Theme6
Swatch RGB Code or File Name
Hex Code
Use For (an) Example, See...
j Button Colors (Continued)
134, 218, 255
255, 255, 255
86DAFF
FFFFFF
Fill: VC Conference and System off buttons (selected) — TLP 700
Border: Whiteb
134, 218, 255
70, 130, 180
86DAFF
4682B4
Fill: All buttons (selected except as noted) — TLP 700
Border: c
255, 0, 0
105, 105, 105
FF0000
C0C0C0
Fill: System Off button (not selected) — TLP 700
Border: gh
18, 128, 18
0, 0, 0
128012
000000
Fill: Power Down button (not selected) — TLP 700 and TLP 350
Border: a
222, 27, 27
0, 0, 0
DE1B1B
000000
Fill: Cancel button (not selected) — TLP 700 and TLP 350
Border:
0, 128, 0
192, 192, 192
008000
C0C0C0
Fill: VC Controls button (not selected) and selected — TLP 700
Border:
b255, 255, 0
192, 192, 192
FFFF00
C0C0C0
Fill: VC Controls button (not selected) and selected — TLP 700
Border:
0, 0, 255
192, 192, 192
0000FF
C0C0C0
Fill: VC Controls button (not selected) and selected — TLP 700
Border:
Extron TouchLink Design Themes • Flash Theme 7
Fonts
Font Size
Color RGB Code Hex Code Text for: For (an) Example, See...
Arial Bold
36 Black 0, 0, 0 000000 Logo banner — TLP 700 i Figure 7
22 Black 0, 0, 0 000000Full page headings, pop-up page headings, and text on pages such as shutting down — TLP 700 fgh
18 Blue 70, 130, 180 4682B4 Logo banner — TLP 350Figures
8, 9
16White 255, 255, 255 FFFFFF Labels on Audio Control page — TLP 700 f
Blue 70, 130, 180 4682B4 Text on pages such as Auxiliary — TLP 350 Figure 10
14
White 255, 255, 255 FFFFFF Labels over A/V source icons and button labels — TLP 700 bcg
Black 0, 0, 0 000000Text under power on button on start page — TLP 700 and TLP 350 i
Dim gray 105, 105, 105 696969Buttons (selected except as noted) — TLP 700 and TLP bc
Blue 70, 130, 180 4682B4Labels above buttons and text on pop-ups pages — TLP 700 g
12
Black 0, 0, 0 000000 Buttons (not selected) — TLP 700 and TLP 350
bDark green 0, 100, 0 006400
Call and Phone Book buttons (not selected) — TLP 700
Blue 70, 130, 180 4682B4Combined and Individual buttons on status bar — TLP 700
Not shown
Red 255, 0, 0 FF0000 End Call button (not selected) — TLP 700 b
11
White 255, 255, 255 FFFFFFSystem Off button (not selected) on status bar — TLP 700
bcgBlack 0, 0, 0 000000
Status bar buttons (not selected except as noted) — TLP 700
Dim gray 105, 105, 105 696969 Status bar buttons (selected) — TLP 700 b
Extron GUI Configurator
24White 255, 255, 255 FFFFFF
Button symbols and numbers (not selected) — TLP 700 and TLP 350 bcg
Dim Gray 105, 105, 105 696969Buttons symbols and numbers (selected) — TLP 700 and TLP 350
Figure 4
NOTE: See the Extron GUI Configurator Fonts section for symbols and keyboard equivalents.
Extron TouchLink Design Themes • Flash Theme8
Flash Template Layouts
TLP 700
Figure 2. Audio Control page
Figure 3. Dual Display main page: Display 1, VCR selected, and VCR pop-up displayed in the dynamic area
Extron TouchLink Design Themes • Flash Theme 9
Figure 4. DVD full page, Back selected
Figure 5. Main page, Doc Cam selected, and Doc Cam pop-up displayed in the dynamic area
Extron TouchLink Design Themes • Flash Theme10
Figure 6. Preset Selection page
Figure 7. Start page
Extron TouchLink Design Themes • Flash Theme 11
TLP 350
Figure 8. Start page Figure 9. Start page, power on selected
Figure 10. Auxiliary page Figure 11. DVD page, Video selected
Extron TouchLink Design Themes • Flash Theme12
Jet Theme
Elements and Color Palette
Swatch RGB Code or File Name
Hex Code
Use For (an) Example
See...
a
b
c
d
Elements
Jet_dual_bkgd.jpgBackground for dual display and window display main pages — TLP 700
dFigure 13
jet_bkgd.jpgBackground for single, divisible room, and video conference main pages — TLP 700
afFigure 15
jet_bkgr_nohead.pngBackground for Audio Control, DVD, Preset Selection, and VCR full pages
cFigures 16, 17
jet_bkgd.jpg Master page — TLP 700 afFigure 15
jet_start_bkgd.pngBackground for start, starting up, confirmation, and shutting down pages — TLP 700
bghFigure 14
jet_panel_center.png Master popup page — TLP 700 adef
jet_panel_rightside.jpgRight side panel, a left side panel is in the Resource Library — TLP 700
Not shown
jet_header.pngHeader for main page A/V sources — TLP 700
afFigure 15
jet_tab_nsel.png Rounded or square tabs (not selected and selected), for use with dual display and window main pages.
dFigure 13Jet_tabsq_sel.jpg
jet-volume_nsel.pngVolume bar on main page — TLP 700
adfFigure 13
jet-volume_sel.png
footer.png Footer on main page — TLP 700
Start_Button_nsel.png_1Power on, Combined, and Individual button (not selected) — TLP 700 and TLP 350
bFigure 12
Start_Button_sel.png_1Power on, Combined, and Individual buttons (selected) — TLP 700 and TLP 350
Figures 12, 18
Jet_pc_nsel.pngA/V source button icon (not selected) on main page — TLP 700
adf Figure 13
Jet_aux_sel.pngA/V source button icon (selected) on main page — TLP 700
adFigure 13
Extron TouchLink Design Themes • Jet Theme 13
Swatch RGB Code or File Name
Hex Code
Use For (an) Example
See...
e
f
g
h
Elements (Continued)
jet_nsel.pngButton (not selected) — TLP 700 and TLP 350
cef Figure 13
jet_sel.png Button (selected) — TLP 700 and TLP 350 ch
preset05.pngPreset Selection button (not selected) — TLP 700
Figure 17
preset09.pngPreset Selection button (selected) — TLP 700
jet_85_grn.png
VC Control buttons (not selected) — TLP 700
fFigure 15
jet_85_orng.png
jet_85_blu-drk.png
jet_85_sel.png VC Control buttons (selected) — TLP 700 Not shown
jet_trnsprt_grn.pngPower Down button (not selected) — TLP 700 and TLP 350
gFigure 14
jet_trnsprt_red.pngCancel button (not selected) — TLP 700 and TLP 350
gh Figure 14
Background Colors
53, 55, 62
255, 255, 255
35373E
FFFFFF
Fill: Rectangle layer 1 fill over background — TLP 700
Border: Whitegh
48, 50, 56 67, 67, 75
303238
43434B
Fill: Rectangle layer 2 fill over layer 1, Audio Control boxes around buttons — TLP 700
Border:
bcFigure 16
53, 55, 62 2E2E2EFill: Rectangle fill around page names
such as AUX — TLP 700aef Figure 13
127, 133, 149 7F8595Fill: Background for full pages —
TLP 700 and TLP 350cgh Figure 16
Buttons Colors
0, 0, 0
255, 255, 255
000000
FFFFFF
Fill: TV icon button (not selected), Tuner page — TLP 700
Border: White
eFigure 13
255, 195, 0 FFC300Fill: TV icon button (selected), Tuner
page — TLP 700Border: Same as fill
e
Extron TouchLink Design Themes • Jet Theme14
Fonts
Font Size
Color RGB Code Hex Code
Text for: For (an) Example
See...
Arial Bold
36 Amber 255, 195, 0 FFC300 Logo banner — TLP 700 bFigure 12
20White 255, 255, 255 FFFFFF
Headings such as AUX — TLP 700 and logo banner — TLP 350 ae
Figure 19Amber 255, 195, 0 FFC300 Text on pop-up pages — TLP 700
18 White 255, 255, 255 FFFFFF Headings, such as AUX — TLP 350Figures 20, 21
16Amber 255, 195, 0 FFC300
Headings, display tab, and window tab (not selected) — TLP 700 d
Figure 13Black 0, 0, 0 000000
Headings, display tab, and window tab (selected)— TLP 700
14
Amber 255, 195, 0 FFC300Text under the power on button on the start page, labels, and text on the freeze button — TLP 700 and text — TLP 350
bFigure 18
Blue 10, 170, 240 0AAAF0 Buttons (not selected) — TLP 700 and TLP 350cef
Figure 21Black 0, 0, 0 000000 Buttons (selected) — TLP 700 and TLP 350
13 White 255, 255, 255 FFFFFFPower Down and Cancel buttons (not selected) — TLP 700 and TLP 350
ghFigure 14
12 White 255, 255, 255 FFFFFF Status bar buttons (not selected) — TLP 700 adf
Figure 13
Black 0, 0, 0 000000 Status bar buttons (selected) — TLP 700 fFigure 15
Extron GUI Configurator
48Black 0, 0, 0 000000
Power on symbol (selected) — TLP 700 and TLP 350
Figure 18
Blue 10, 170, 240 0AAAF0Power on symbol (not selected) — TLP 700 and TLP 350 b
24Blue 10, 170, 240 0AAAF0 Buttons (not selected) — TLP 700 and TLP 350 ef
Figure 16
Black 0, 0, 0 000000 Buttons (selected) — TLP 700 and TLP 350 Not shown
18 Amber 255, 195, 0 FFC300 Volume icons on status bar — TLP 700 dfFigure 13
NOTE: See the Extron GUI Configurator Fonts section for symbols and keyboard equivalents.
Extron TouchLink Design Themes • Jet Theme 15
Jet Template Layouts
TLP 700
Figure 12. Start page, divisible room, Combined selected
Figure 13. Multi window main page, Window 2, Tuner selected, and Tuner pop-up displayed in the dynamic area
Extron TouchLink Design Themes • Jet Theme16
Figure 14. Confirmation page
Figure 15. Main page, VC Controls selected, and Video Conference pop-up displayed in the dynamic area
Extron TouchLink Design Themes • Jet Theme 17
Figure 16. Audio Control page
Figure 17. Preset Selection page
Extron TouchLink Design Themes • Jet Theme18
TLP 350
Figure 18. Start page Figure 19. Laptop page
Figure 20. DVD page Figure 21. DVD page, Video selected
Extron TouchLink Design Themes • Jet Theme 19
Power Theme
Elements and Color Palette
Swatch RGB Code or File Name
Hex Code
Use For (an) Example, See...
a
b
c
d
Elements
power_bkgd_nohead.png Background for main page — TLP 700 Not shown
Power_guic_bkgd.png Master page background — TLP 700 afFigure 23
Power_guic_room1_sel.jpgBackground for dual display and window display main pages — TLP 700
Figure 22
pwr_bkgd-320240.pngMaster page and main page background — TLP 350
Figures 29, 30, 31
start_bkgd.pngBackground for start, starting up, confirmation, and shutting down pages — TLP 700
biFigures 25, 28
popbkgd2.pngBackground for pop-up pages — TLP 700 and TLP 350 ch
power_sidepanel_left.pngLeft side panel, a right side panel is in the Resource Library — TLP 700
Not shown
power_footer.png Status bar on the main page — TLP 700
afFigure 23
power_header.pngHeader for main page A/V sources — TLP 700
Volume_ON_horizontal.jpgVolume bar on main page — TLP 700
Volume_OFFhorizontal.jpg
Power_noicon_small.jpg A/V source button icon — TLP 700
Power-Laptop.png A/V source button icon — TLP 700
preset01.pngPreset Selection button (not selected) — TLP 700 g
Figure 27preset02_sel.png
Preset Selection button (selected) — TLP 700
Background Colors
Transparent
255, 255, 255
FFFFFF
Fill: Rectangle layer 1 over background — TLP 700
Border: White bFigure 25105, 105, 105
133, 133, 133
696969
858585
Fill: Rectangle layer 2 over layer 1 — TLP 700
Border:
Extron TouchLink Design Themes • Power Theme 21
Swatch RGB Code or File Name
Hex Code
Use For (an) Example, See...
e
f
g
h
i
Background Colors (Continued)
36, 36, 36 242424Fill: Background for full pages; label
fill for Preset Selection — TLP 700Border: None
de
29, 204, 73 1DCC49Fill: Vertical volume bar on Audio
Control page — TLP 700d
Figure 24121, 121, 121192, 192, 192
797979C0C0C0
Fill: Rectangle around Audio Control buttons — TLP 700
Border:
Button Colors
26, 26, 31
Transparent
1A1A1F
Fill: A/V source icon fill (not selected) — TLP 700
Border: Transparentaf
135, 206, 250
Transparent
87CEFA
Fill: A/V source icon fill (selected) — TLP 700
Border: Transparent
36, 43, 63
169, 169, 169
242B3F
A9A9A9
Fill: Buttons (not selected) — TLP 700 and TLP 350
Border:
de g
105, 105, 105
169, 169, 169
696969
A9A9A9
Fill: Buttons (not selected) — TLP 700 and TLP 350
Border: ae
56, 56, 56
169, 169, 169
383838
A9A9A9
Fill: Buttons (not selected) — TLP 700 and TLP 350
Border: c
49, 53, 58
255, 255, 255
31353A
FFFFFF
Fill: Back and Full Screen Video buttons (not selected) — TLP 700 and TLP 350
Border: White
ad
0, 255, 2550, 128, 128
00FFFF008080
Fill: Buttons (selected except as noted) — TLP 700 and TLP 350
Border: e
211, 211, 211169, 169, 169
D3D3D3A9A9A9
Fill: Buttons — TLP 700Border: c
178, 34, 34
192, 192, 192
B22222
C0C0C0
Fill: System Off button (not selected) — TLP 700
Fill: a
220, 20, 60 DC143CFill: System Off button (selected) —
TLP 700Border: Same as fill
f
18, 128, 18
0, 0, 0
128012
000000
Fill: Power Down button (not selected) — TLP 700 and TLP 350
Border: Figure 25
222, 27, 27 0, 0, 0
DE1B1B
000000
Fill: Cancel button (not selected) — TLP 700 and TLP 350
Border:
40, 86, 128
192, 192, 192
285680
C0C0C0
Fill: Freeze button (not selected) — TLP 700 and TLP 350
Border: Figure 23
0, 128, 0
192, 192 ,192
008000
C0C0C0
Fill: VC Control button (not selected and selected) — TLP 700
Border: h
Extron TouchLink Design Themes • Power Theme22
Swatch RGB Code or File Name
Hex Code
Use For (an) Example, See...
Button Colors (Continued)
255, 255, 0
192, 192 ,192
FFFF00
C0C0C0
Fill: VC Controls button (not selected and selected) — TLP 700
Border:
h
0, 0, 255
192, 192 ,192
0000FF
C0C0C0
Fill: VC Controls button (not selected and selected) — TLP 700
Border:
36, 43, 63
0, 128, 128
242B3F
008080
Fill: Call button (not selected) on VC Controls — TLP 700
Border:
36, 43, 63
189, 0, 0
242B3F
BD0000
Fill: End Call button (not selected) on VC Controls — TLP 700
Border:
FontsFont Size
Color RGB Code Hex Code
Text for: For (an) Example, See...
Arial Bold
36 White 255, 255, 255 FFFFFF Logo banner — TLP 700 i
20 White 255, 255, 255 FFFFFFFull page headings, pop-up page headings, text on pages such as starting up — TLP 700 and logo banner — TLP 350
afgh
16 White 255, 255, 255 FFFFFFText on pop-up pages — TLP 700 and full page headings — TLP 350 defg
14
White 255, 255, 255 FFFFFF A/V source labels, start page labels, Power Down and Cancel buttons — TLP 700 and TLP 350
Figures 29, 30
Dark blue 13, 13, 60 0D0D3C Volume on status bar — TLP 700 af
Dim gray 105, 105, 105 696969Buttons (selected, except as noted) — TLP 700 and TLP 350 e
Light blue 155, 213, 250 9BD5FA Text on bottom of start page — TLP 700 i
12
White 255, 255, 255 FFFFFFStatus bar buttons, labels near buttons and A/V sources — TLP 700 and text below power button on start page, Confirmation page buttons — TLP 350
adf
Light blue 155, 213, 250 9BD5FA Text on bottom of start page — TLP 350 Figure 28
Dim gray 105, 105, 105 696969 Buttons (selected) — TLP 350 Figure 31
Maroon 128, 0, 0 800000 System Off button (selected) on status bar — TLP 700 fExtron GUI Configurator
36 White 255, 255, 255 FFFFFF Power on symbol — TLP 700 and TLP 350 i
24
Dark blue 13, 13, 60 0D0D3CButton symbols and numbers (not selected) — TLP 700 and TLP 350 h
White 255, 255, 255 FFFFFF Button symbols and numbers (not selected) — TLP 700 and TLP 350 aceh
Dim gray 105, 105, 105 696969 Buttons (selected) — TLP 700 and TLP 350 iNOTE: See the Extron GUI Configurator Fonts section for symbols and keyboard equivalents.
Extron TouchLink Design Themes • Power Theme 23
Power Template Layouts
TLP 700
Figure 22. Dual Display main page: Display 1, DVD selected, and DVD pop-up displayed in the dynamic area
Figure 23. Main page, Doc Cam selected, Doc Cam pop-up displayed in the dynamic area, and Audio Mute selected
Extron TouchLink Design Themes • Power Theme24
Figure 24. Audio Control page
Figure 25. Confirmation page
Extron TouchLink Design Themes • Power Theme 25
Figure 26. DVD full page, Title selected
Figure 27. Preset Selection page
Extron TouchLink Design Themes • Power Theme26
TLP 350
Figure 28. Start page Figure 29. PC page
Figure 30. DVD page Figure 31. DVD page, play selected
Extron TouchLink Design Themes • Power Theme 27
Speed Theme
Elements and Color Palette
Swatch RGB Code or File Name
Hex Code
Use For (an) Example,
See...
a
b
c
d
Elements
speed_bkgd.pngBackground for main pages with header — TLP 700
abiFigure 33
bkgd_speed4.pngMaster main page with footer bar — TLP 700
speed_bkgd_nohead.pngBackground page for full size pages — TLP 700 g
speed_bkgd_320px.png Background for main page — TLP 350d
Figures 38, 39
speed_panel_leftside.pngLeft side panel, a right side panel is in the resource library — TLP 700
Not shown
speed_header.pngHeader bar for main pages A/V sources — TLP 700
abbkgd_footer.png Status bar on the main page — TLP 700
Volume_ON_horizontal.jpgVolume bar on main page — TLP 700
Volume_OFF_horizontal.jpg
preset01.pngPreset Selection button (not selected) — TLP 700
Figure 37
preset01_sel.png Preset Selection button (selected) — TLP 700
laptop_trans_80px.png A/V source button icon — TLP 700 ab
Background Colors
63, 87, 130 3F5782Fill: Full page background — TLP 700
and TLP 350
e21, 42, 79
255, 255, 255
152A4F
FFFFFF
Fill: Rectangle layer 1 over full page background — TLP 700
Border: White
19, 38, 71
44, 63, 96
132647
2C3F60
Fill: Rectangle layer 2 over layer 1 — TLP 700
Border: f
Extron TouchLink Design Themes • Speed Theme 29
Swatch RGB Code or File Name
Hex Code
Use For (an) Example,
See...
e
f
g
h
i
Background Colors (Continued)
10, 29, 69
37, 68, 125
0A1D45
25447D
Fill: Rectangle layer 1 over Background start page — TLP 700
Border: f
2, 17, 66 021142Fill: Label fill, such as Audio Control,
Doc Cam, DVD, and VC Controls — TLP 700
ghi
Button Colors
0, 194, 194 00C2C2Fill: Dual display and window display
pages tabs (selected) — TLP 700a
Figure 35169, 169, 169 A9A9A9
Fill: Dual display and window display pages tabs (not selected) — TLP 700
7, 22, 70 071646Fill: Combined and Individual buttons
on status bar of divisible room main page — TLP 700
Not shown
29, 204, 73 1DCC49Fill: Audio Control volume level bar —
TLP 700 g
65, 105, 225 4169E1Fill: A/V source button background (not
selected) — TLP 700 abi
18, 128, 18
0, 0, 0
128012
000000
Fill: Power Down button (not selected) — TLP 700 and TLP 350
Border: eFigure 40222, 27, 27
0, 0, 0
DE1B1B
000000
Fill: Cancel button (not selected) — TLP 700 and TLP 350
Border:
211, 211, 211
169, 169, 169
D3D3D3
A9A9A9
Fill: Button (not selected) — TLP 700 and TLP 350
Border: bdg
105, 105, 105
169, 169, 169
696969
A9A9A9
Fill: Button (not selected) — TLP 700 and TLP 350
Border: abi
0, 255, 255
0, 128, 128
00FFFF
008080
Fill: Buttons (selected, except as noted) — TLP 700 and TLP 350
Border:
135, 206, 250
135, 206, 235
87CEFA
87CEEB
Fill: Power on button (not selected) — TLP 700 and TLP 350
Border: f
178, 34, 34
192, 192, 192
B22222 C0C0C0
Fill: System Off button (not selected) — TLP 700
Border:
abFigure 33
220, 20, 60 DC143CFill: System Off button (selected) —
TLP 700 Border: Same as fill
i
49, 53, 58 255, 255, 255
31353A
FFFFFF
Fill: Full Screen Video and Back buttons — TLP 700
Border: Whitegi
40, 86, 128 192, 192, 192
285680
C0C0C0
Fill: Freeze button (not selected) — TLP 700
Border: h
Extron TouchLink Design Themes • Speed Theme30
Swatch RGB Code or File Name
Hex Code
Use For (an) Example,
See...
Button Colors (Continued)
0, 128, 0
192,192,192
008000
C0C0C0
Fill: VC Controls button (not selected and selected) — TLP 700
Border:
i255, 255, 0
192,192,192
FFFF00
C0C0C0
Fill: VC Controls button (not selected and selected) — TLP 700
Border:
0, 0, 255
192,192,192
0000FF
C0C0C0
Fill: VC Controls button (not selected and selected) — TLP 700
Border:
FontsFont Size
Color RGB Code Hex Code
Text for: For (an) Example,
See...
Arial Bold
36
White 255, 255, 255 FFFFFF
Logo banner — TLP 700 f20 Logo banner — TLP 350 Not shown
16 Display and Window tabs, A/V Sources label, pop-up page headings, text on pop-up pages — TLP 700 abdi
14
Light blue 155, 213, 250 9BD5FA Text on start page — TLP 700 f
Black 0, 0, 0 000000Combined and Individual (selected and not selected) on divisible room start page — TLP 700
Not shown
White 255, 255, 255 FFFFFFLabels above or on buttons, A/V Sources labels, below power on button on start page — TLP 700 cf
Dark blue 13, 13, 60 0D0D3C Buttons and Volume on status bar — TLP 700 abCrimson 128, 0, 0 800000 System Off button (selected) — TLP 700
iDark green 0, 100, 00 006400 Call, Phone Book buttons (not selected) — TLP 700
Red 255, 0, 0 FF0000 End Call button (not selected) — TLP 700
Dim gray 105, 105, 105 696969 Buttons (selected, except as noted) — TLP 700 b13 White 255, 255, 255 FFFFFF Button labels (not selected) — TLP 700 af
12
White 255, 255, 255 FFFFFF Text on pages such as Aux — TLP 350 Figure 38
Dim gray 105, 105, 105 696969 Buttons (selected) — TLP 350 Figure 41
Light blue 155, 213, 250 9BD5FA Text on start page — TLP 350 Not shown
10 Dark blue 13, 13, 60 0D0D3CText above Combined button on status bar for divisible room — TLP 700
Not shown
Extron GUI Configurator Font
48 Black 0, 0, 0 000000 Power on symbol on Start page — TLP 700 f36 Black 0, 0, 0 000000 Power on symbol on Start page — TLP 350 Not shown
24
Dark blue 13, 13, 60 0D0D3CButton symbols and numbers (not selected) — TLP 700 and TLP 350 bdf
White 255, 255, 255 FFFFFFButton symbols and numbers (not selected) — TLP 700 and TLP 350 ci
Dim gray 105, 105, 105 696969 Buttons (selected) — TLP 700 and TLP 350 hNOTE: See the Extron GUI Configurator Fonts section for symbols and keyboard equivalents.
Extron TouchLink Design Themes • Speed Theme 31
Speed Template Layouts
TLP 700
Figure 32. Master Page
Figure 33. Main Page, DVD Selected and DVD Popup Displayed
Extron TouchLink Design Themes • Speed Theme32
Figure 34. DVD Full Page
Figure 35. Dual Display main page: Display 1, Laptop selected, and Laptop pop-up displayed in the dynamic area
Extron TouchLink Design Themes • Speed Theme 33
Figure 36. Audio Control page
Figure 37. Preset Selection page
Extron TouchLink Design Themes • Speed Theme34
TLP 350
Figure 38. Auxiliary page Figure 39. Doc Cam page
Figure 40. Confirmation page Figure 41. DVD page, stop selected
Extron TouchLink Design Themes • Speed Theme 35
University Theme
Elements
Swatch File Name Use For (an) Example,
See...
a
b
c
d
Elements
bkgd_nohead.jpgBackground for main and Audio Control pages — TLP 700
abeFigure 46
Start_blgd.jpgBackground for start, starting up, confirmation, and shutting down pages — TLP 700
d
panel_center.png Background for pop-up pages — TLP 700ae
Figures 42, 44
panel.png_2Left side panel, a right side panel is in the Resource Library — TLP 700
Not shown
footer.png Status bar on main page — TLP 700ae
Figures 42, 44
jet-volume_nsel.pngVolume bar on main page — TLP 700
jet-volume_sel.png
vortex_jet_nsel.pngButton (not selected) — TLP 700 and TLP 350
abFigure 46
Start_Button_nsel.png_1Start button (not selected) — TLP 700 and TLP 350
c Figures 43, 48
University_120_55_sel.jpgStart button (selected) — TLP 700 and TLP 350
Figure 43, 48
transport_sel png Buttons (selected) — TLP 700 and TLP 350 beFigure 45
University_85_drk.png
VC Control button (not selected) — TLP 700
e
University_85_grn.png
University_85_orng.png
University_85_sel.png VC Control button (selected) — TLP 700
Extron TouchLink Design Themes • University Theme 37
Swatch File Name Use For (an) Example,
See...
e Elements (Continued)
University_Trnsprt_grn.png
Power Down button (not selected) — TLP 700 and TLP 350 d
University_Trnsprt_red.pngCancel button (not selected) — TLP 700 and TLP 350
d Figure 45
systemoff_nsel.jpg System Off button (not selected) — TLP 700 abeFigure 44
Back.pngBack and Full Screen Video buttons — TLP 700
bFigures 44, 46
FontsFont Size
Color RGB Code Hex Code
Text for: For (an) Example,
See...
Arial Bold
36 White 255, 255, 255 FFFFFF Logo banner — TLP 700 c
20 White 255, 255, 255 FFFFFFFull page heading, pop-up page heading, and text on pages such as starting up — TLP 700 and Logo banner for TLP 350.
abd Figure 48
16 Blue 134, 247, 254 86F7FE Dual display and window tabs — TLP 700 Figure 44
14
White 255, 255, 255 FFFFFFButtons on confirmation page and page names, such as DVD, text on pages, labels near buttons — TLP 700 and text on start page — TLP 350
abd
Amber 255, 195, 0 FFC300 Label near buttons and Freeze button — TLP 700 Figure 42
Blue 10, 170, 240 0AAAF0 Buttons (not selected) — TLP 700 and TLP 350
abeBlack 0, 0, 0 000000 Buttons (selected) — TLP 700 and TLP 350
12White 255, 255, 255 FFFFFF Status bar buttons (not selected) — TLP 700
Black 0, 0, 0 000000 Status bar buttons (selected) — TLP 700
11
Blue 10, 170, 240 0AAAF0 Buttons (not selected), VC Controls — TLP 700
eGreen 0, 255, 0 00FF00 Call and Phone Book buttons (not selected) — TLP 700
Red 255, 0, 0 FF0000 End Call (not selected) — TLP 700
Black 0, 0, 0 000000 VC Controls center buttons (selected) — TLP 700
Extron GUI Configurator
48White 255, 255, 255 FFFFFF Power on button (not selected) — TLP 700 cBlack 0, 0, 0 000000 Power on button (selected) — TLP 700 Not shown
38White 255, 255, 255 FFFFFF Power on button (not selected) — TLP 350 Figure 48
Black 0, 0, 0 000000 Power on button (selected) — TLP 350 Not shown
18 Amber 255, 195, 0 FFC300 Volume icons — TLP 700 Figures 42, 44
24Blue 10, 170, 240 0AAAF0 Buttons (not selected) — TLP 700 and TLP 350 Figure 42
Black 0, 0, 0 000000 Buttons (selected) — TLP 700 and TLP 350 cNOTE: See the Extron GUI Configurator Fonts section for symbols and keyboard equivalents.
Extron TouchLink Design Themes • University Theme38
University Template Layouts
TLP 700
Figure 42. Main page, Tuner selected, and Tuner pop-up displayed in the dynamic area
Figure 43. Start page, divisible room, Combined selected
Extron TouchLink Design Themes • University Theme 39
Figure 44. Dual Display main page: Display 1, VCR selected, and VCR pop-up displayed in the dynamic area
Figure 45. Confirmation page, Power Down selected
Extron TouchLink Design Themes • University Theme40
Figure 46. Audio Control page, Mic down arrow selected
Figure 47. Shutting down page
Extron TouchLink Design Themes • University Theme 41
TLP 350
Figure 48. Start page Figure 49. Shutting Down page
Figure 50. DVD page Figure 51. DVD page, Video selected
Extron TouchLink Design Themes • University Theme42
University ColorsThe University Resources Kit provides graphic elements in a variety of colors. The following tables show the options available in each color category.
BlueOption 1 Option 2 Option 3 Option 4
Panel Center
Start Background
Start Button
Transport Button
GrayOption 1 Option 2 Option 3
Panel Center
Start Background
Start Button
Transport Button
GreenOption 1 Option 2 Option 3
Panel Center
Start Background
Start Button
Transport Button
Extron TouchLink Design Themes • University Theme 43
OrangeOption 1 Option 2 Option 3
Panel Center
Start Background
Start Button
Transport Button
RedOption 1 Option 2 Option 3 Option 4 Option 5
Panel Center
Start Background
Start Button
Transport Button
TanOption 1 Option 2 Option 3 Option 4
Panel Center
Start Background
Start Button
Transport Button
Extron TouchLink Design Themes • University Theme44
VioletOption 1 Option 2 Option 3
Panel Center
Start Background
Start Button
Transport Button
YellowOption 1 Option 2 Option 3 Option 4
Panel Center
Start Background
Start Button
Transport Button
Black, Gold, and White
Black WhiteGold
Option 1 Option 2
Panel Center
Start Background
Start Button
Transport Button
Selected State OptionsBeige Blue Green Violet Yellow
Extron TouchLink Design Themes • University Theme 45
Vortex Black Theme
Elements and Color Palette
Swatch RGB Code or File Name
Hex Code
Use For (an) Example,
See...
a
b
c
d
Elements
vortex_black_bkgd_nofooter.png
Background for Audio Controls, VCR, and DVD pages — TLP 700
cdFigure 53
vortex_black_dual_bkgd.png
Background for dual display and window display main page — TLP 700
Figure 54
vortex-black-start_bkgd.png
Background for starting up, confirmation, and shutting down pages — TLP 700 af i
vortex_black_bkgd.png Background for master page — TLP 700 bFigure 52
vortex_black_panel_leftside.png
Left side panel, a similar right side panel is included in the Resource Library — TLP 700
Not shown
vortex_black_footer.png Status bar on the main page — TLP 700 bFigure 52
vortex_black_room_btn_nsel.png
Background for dual display and window display, not selected — TLP 700
Figure 54
vortex_black_room_btn_sel.png
Background for dual, and window display, selected — TLP 700
Figure 54
vortex_black_vol_nsel.pngVolume bar on main page — TLP 700 c
Figure 52vortex_vol_sel.png
vortex-black_trns_nsel.png
Button (not selected) — TLP 700 and TLP 350
dgFigure 52
vortex_black_scrl_nsel.pngButton (not selected) — TLP 700 and TLP 350
vortex_black_trns_sel.pngButtons (selected, except as noted) — TLP 700 and TLP 350
Figure 52
preset07_sel.pngPreset Selection button (not selected) — TLP 700 e
Figure 57preset10_sel.png Preset Selection button (selected) — TLP 700
Extron TouchLink Design Themes • Vortex Black Theme 47
Swatch RGB Code or File Name
Hex Code
Use For (an) Example,
See...
e
f
g
h
i
Elements (continued)
Black_start_button.pngPower on button (not selected) — TLP 700 and TLP 350
Not shown
Black_Start_Button_sel.png
Power on button (selected) — TLP 700 and TLP 350 i
vortex_trnsprt_grn.png Power Down button — TLP 700 and TLP 350 fFigure 60
vortex_trnsprt_red.png Cancel button — TLP 700 and TLP 350f
Figures 60, 61
vortex_black_input_160_nsel.jpg
Back and Full Screen Video buttons (not selected) — TLP 700 de
vortex_black_input_160_sel.jpg
Back and Full Screen Video buttons (selected) — TLP 700
Not shown
vortex_fav_blu.png
VC Control button (not selected) — TLP 700 gvortex_fav_grn.png
vortex_fav_orng.png
vortex_fav_vortx_blue_sel.png
VC Control button (selected) — TLP 700 Not shown
vortex_footer_red.png System Off button on main pageb
Figures 52, 54
Background Colors
77, 77, 77 4D4D4DFill: Background for full pages —
TLP 700 and TLP 350 adfh
30, 30, 30
128, 128, 128
1E1E1E
808080
Fill: Rectangle layer 1 and around Audio Control buttons — TLP 700 and TLP 350
Border:
acfFigure 55
27, 27, 2752, 52, 52
1B1B1B 343434
Fill: Rectangular layer 2 fill — TLP 700Border:
afFigure 55
0, 0, 0 000000Fill: Background for page labels —
TLP 700 cegh
Button Colors
16, 16, 16 101010Fill: More button — TLP 350Border: Same as fill
Figure 59
Extron TouchLink Design Themes • Vortex Black Theme48
Fonts
Font Size
Color RGB Code Hex Code
Text for: For (an) Example, See...
Arial Bold
36
White 255, 255, 255 FFFFFF
Logo banner — TLP 700 and TLP 350 i
20 Starting up, shutting down, confirmation pages — TLP 700
Figure 55
16 Dual display and Window tabs — TLP 700 Figure 54
14
White 255, 255, 255 FFFFFFPage names, such as Audio Control pop-up pages with text only such as Laptop — TLP 700 ceg
Dark blue 2, 44, 84 022C54Buttons (selected, except as noted) — TLP 700 and TLP 350
eFigure 52
12 White 255, 255, 255 FFFFFFLabels below A/V sources and Volume in status bar — TLP 700 b
11
Dark blue 2, 44, 84 022C54System Off, Audio Mute, and Audio Control (selected) in status bar — TLP 700 and TLP 350
Figure 52
White 255, 255, 255 FFFFFF Buttons on status bar — TLP 700 and TLP 350 bFigure 54
Extron GUI Configurator
48 White 255, 255, 255 FFFFFF
Power on button (not selected) — TLP 700 and TLP 350
Not shown
Dark blue 2, 44, 84 022C54 Power on button (selected) — TLP 700 and TLP 350 i
24
White 255, 255, 255 FFFFFF Buttons (not selected) — TLP 700 and TLP 350 dg
Dark blue 2, 44, 84 022C54 Buttons (selected) — TLP 700 and TLP 350 eFigure 52
18 White 255, 255, 255 FFFFFF Volume icons — TLP 7000 bFigure 54
NOTE: See the Extron GUI Configurator Font section for symbols and keyboard equivalents.
Extron TouchLink Design Themes • Vortex Black Theme 49
Vortex Black Template Layouts
TLP 700
Figure 52. Main page, Doc Cam selected, and Doc Cam pop-up displayed in the dynamic area
Figure 53. Audio Control page
Extron TouchLink Design Themes • Vortex Black Theme50
Figure 54. Dual Display main page: Display 1, an A/V source has not been selected
Figure 55. Starting up page
Extron TouchLink Design Themes • Vortex Black Theme 51
Figure 56. DVD full page
Figure 57. Preset Selection page
Extron TouchLink Design Themes • Vortex Black Theme52
TLP 350
Figure 58. Auxiliary page Figure 59. Doc Cam page
Figure 60. Confirmation page Figure 61. Confirmation page, Power Down selected
Extron TouchLink Design Themes • Vortex Black Theme 53
Vortex Blue Theme
Elements and Color Palette
Swatch RGB Code or File Name
Hex Code
Use RefNo.
a
b
c
d
Elements
vortex_blue_nofooter_bkgd.png
Background for Audio Control, DVD, and Preset Selections — TLP 700 cef
vortex_blue_start_bkgd.pngBackground for starting up, shutting down, and confirmation pages — TLP 700
Not shown
vortex-blue.pngBackground for single display main page — TLP 700
agFigure 66
vortex_blue_dual.pngBackground for dual display and multi window — TLP 700
Figure 64
vortex_blue_panel_leftside.png
Left side panel, a similar right side panel is included in the Resource Library — TLP 700
Not shown
vortex_blue_footer.png Status bar on the main page — TLP 700ag
Figures 64, 66
vortex_blue_start_nsel.pngBackground for the Power on button (not selected) — TLP 700 and TLP 350 b
vortex_blue_start_sel.pngBackground for the Power on button (selected) — TLP 700 and TLP 350
Figure 70
vortex_blue_room_nsel.pngSource bar, dual, and window display (not selected) — TLP 700
agFigures 64, 66
vortex_blue_room_sel.pngSource bar, dual, and window display (selected) — TLP 700
Vortex_Blue_Vol_NS.pngVolume bar on main page — TLP 700
Vortex_Blue_Vol_S.png
vortex_blue.png Audio Control buttons — TLP 700 c
vortex_blue_trns_nsel.png Buttons (not selected) — TLP 700 and TLP 350
ehvortex_blue_scrl_nsel.png Buttons (not selected) — TLP 700 and TLP 350
Extron TouchLink Design Themes • Vortex Blue Theme 55
Swatch RGB Code or File Name
Hex Code
Use RefNo.
e
f
g
h
i
Elements (Continued)
vortex_-blue_trns_sel.png Buttons (selected) — TLP 700 and TLP 350 eFigure 71
Start_Button_nsel.pngPower on button (not selected) — TLP 700 and TLP 350
Not shown
Start_Button_sel.pngPower on button (selected) — TLP 700 and TLP 350
Figure 70
vortex_blue_dvd_nsel.jpgDVD A/V source icon example from — TLP 700 and TLP 350 resource library ag
vortex_blue_laptop_sel.jpg Laptop A/V source icon — TLP 700 and TLP 350 a
vortex_trnsprt_grn.pngGreen Power Down button on Confirmation page — TLP 700 and TLP 350
ivortex_trnsprt_red.png
Red Cancel button on Confirmation page — TLP 700 and TLP 350
vortex_fav_blu.png
VC Control button (not selected) — TLP 700 gvortex_fav_grn.png
vortex_fav_orng.png
vortex_fav_vortx_blue_sel.png
VC Control button (not selected) — TLP 700Not
shown
vortex_footer_red.png System Off button on Master page — TLP 700g
Figures 64, 66
Background Colors
146, 175, 202 92AFCAFill: Background for full pages — TLP 700
and TLP 350
cdi28, 70, 108
255, 255, 255
1C466C
FFFFFF
Fill: Label background, and rectangle layer 1, and around Audio Control buttons — TLP 700 and TLP 350
Border: White (Audio Control only)
25, 63, 9750, 88, 122
193F6132587A
Fill: Rectangle layer 2 — TLP 700Border: d
Button Colors
28, 70, 108
255, 255, 255
1C466C
FFFFFF
Fill: Back button (not selected) — TLP 700 and TLP 350
Border: Whitec
126, 177, 222
192, 192, 192
7EB1DE C0C0C0
Fill: Buttons (not selected) — TLP 700 and TLP 350
Border: a
Extron TouchLink Design Themes • Vortex Blue Theme56
Fonts
Font Size
Color RGB Code Hex Code
Text for: For (an) Example, See...
Arial Bold
36
White 255, 255, 255 FFFFFF
Logo banner — TLP 700 Not shown
20 Text on starting up and shutting down pages — TLP 700 and logo banner — TLP 350
bFigure 70
16 Page names text only such as Auxiliary — TLP 350 c
14
White 255, 255, 255 FFFFFFSome buttons — TLP 700, Power Down and Cancel buttons (not selected) — TLP 700 and TLP 350
a
Dark green 0, 100, 0 006400 Power Down and Cancel buttons (selected) d
Blue 28, 70, 108 1C466CButtons (selected, except as noted) — TLP 700 and TLP 350, and text on pages such as Laptop — TLP 350
fFigure 68
Light blue 205, 220, 234 CDDCEAFreeze button (not selected) — TLP 700 and TLP 350
hFigure 71
12 White 255, 255, 255 FFFFFFLabels under A/V Source icons, labels beneath buttons, and buttons on status bar a
Extron GUI Configurator
36
White 255, 255, 255 FFFFFF
Power on symbol Figure 70
24 Button symbols and numbers (not selected) ceg
18 Volume icons ag
24 Blue 28, 70, 108 1C466CButton symbols and numbers (not selected and selected) aeh
NOTE: See the Extron GUI Configurator Font section for symbols and keyboard equivalents.
Extron TouchLink Design Themes • Vortex Blue Theme 57
Vortex Blue Template Layouts
TLP 700
Figure 62. Audio Control page
Figure 63. Confirmation page, Power Down selected
Extron TouchLink Design Themes • Vortex Blue Theme58
Figure 64. Dual Display main page: Display 1, Tuner selected, and Tuner pop-up displayed in the dynamic area
Figure 65. Shutting down page
Extron TouchLink Design Themes • Vortex Blue Theme 59
Figure 66. Main page, VC Controls selected, and Video Conference displayed in the dynamic area
Figure 67. Preset Selection page
Extron TouchLink Design Themes • Vortex Blue Theme60
TLP 350
Figure 68. Laptop page Figure 69. Confirmation page
Figure 70. Start page, power on selected
Figure 71. Doc Cam page, Auto selected
Extron TouchLink Design Themes • Vortex Blue Theme 61
Vortex Green Theme
Elements and Color Palette
Swatch RGB Code or File Name
Hex Code
Use For (an) Example,
See...
a
b
c
d
Elements
vortex_grn_bkgd_nofooter.jpg
Background for full size pages, including main page — TLP 700
cde f
vortex_grn_panel_leftside.png
Left side panel, a similar right side panel is in the resource library — TLP 700
Not shown
vortex_grn_start_bkgd.png Background for start page — TLP 700 a
vortex_grn_dual.pngBackground for master page, dual, and multi window display — TLP 700
bvortex-grn_room_nsel.pngA/V Source background for main page, dual, and window display (not selected) — TLP 700
vortex_vol_sel.pngvortex_grn_room_sel.png
A/V Source background for main page, dual, and multi window display (selected) — TLP 700
vortex_grn_vol_nsel.pngVolume bar on main page — TLP 700 bf
Figure 73vortex_vol_sel.png
vortex_grn_footer.png Status bar on the main page — TLP 700 b
vortex_grn_start_nsel.pngPower on button (not selected) — TLP 700 and TLP 350 a
vortex_grn_input_nsel.jpgvortex-grn_trns_nsel.png
Buttons (not selected) — TLP 700 and TLP 350 (NOTE: vortex-grn_trns_nsel.png is a small version of vortex_grn_input_nsel.jpg)
cfFigure 73
vortex_trnsprt_grn_lite.jpg Tuner buttons — TLP 700 i
vortex_grn_input_sel.jpgvortex-grn_trns_sel.png
Buttons (selected) — TLP 700 and TLP 350 (NOTE: vortex-grn_trns_sel.png is a small version of vortex_grn_input_sel.jpg)
cfFigure 73
vortex-grn_scrl_nsel.pngFreeze button (not selected) — TLP 700 and TLP 350 f
Extron TouchLink Design Themes • Vortex Green Theme 63
Swatch RGB Code or File Name
Hex Code
Use For (an) Example,
See...
e
f
g
h
i
Elements (Continued)
preset04.jpgPreset Selection button (not selected) — TLP 700
Figure 76preset09_sel.jpg Preset Selection button (selected) — TLP 700
Vortex_grn_blueray.jpg Blu-ray A/V source icon example — TLP 700bf
Figure 73vortex_grn_cam_sel.jpg
Camera A/V source icon selected example — TLP 700
vortex_trnsprt_grn.pngGreen Power Down button on Confirmation page — TLP 700 and TLP 350
dvortex_trnsprt_red.png
Red Cancel button on Confirmation page — TLP 700 and TLP 350
vortex_fav_blu.png VC Control button (not selected) — TLP 700
gvortex_fav_grn.png VC Control button (not selected) — TLP 700
vortex_fav_orng.png VC Control button (not selected) — TLP 700
vortex_fav_vortx_blue_sel.png
VC Control button (selected) — TLP 700Not
shown
vortex_footer_red.pngSystem Off button on Master page — TLP 700 f
Background Colors
100, 136, 141 64888DFill: Background fill, full pages —
TLP 700 and TLP 350bcfg
28, 45, 48 1C2D30 Fill: Label background fill — TLP 700Border: None dh
28, 45, 48
255, 255, 255
1C2D30
FFFFFF
Fill: Rectangle layer 1 and around Audio Control buttons — TLP 700 and TLP 350
Border: White
c
25, 41, 4350, 66, 68
19292B324244
Fill: Rectangular layer 2 — TLP 700Border: h
Extron TouchLink Design Themes • Vortex Green Theme64
Fonts
Font Size
Color RGB Code Hex Code
Text for: For (an)Example,
See...
Arial Bold
36 Dark green 28, 45, 48 1C2D30 Logo banner — TLP 700 a
20 White 255, 255, 255 FFFFFFConfirmation, starting up, and shutting down text — TLP700 and Logo banner — TLP 300 h
16 White 255, 255, 255 FFFFFF Dual Display 1 and 2 and Window 1 and 2 tabs b
14
White 255, 255, 255 FFFFFF Buttons (not selected, except as noted) and labels befFigure 72
Black 0, 0, 0 000000 Freeze button fFigure 78
Dark green 28, 45, 48 1C2D30 Buttons (selected, except as noted) fi
12 White 255, 255, 255 FFFFFF Status bar buttonsbf
Figure 7311 White 255, 255, 255 FFFFFF A/V icons, status bar text
Extron GUI Configurator
48White 255, 255, 255 FFFFFF Power on symbol (not selected) a
Dark green 28, 45, 48 1C2D30 Power on symbol (selected) Figure 81
28 White 255, 255, 255 FFFFFF Button symbols ab
18 White 255, 255, 255 FFFFFF Volume icons on status bar bf
NOTE: See the Extron GUI Configurator Fonts section for symbols and keyboard equivalents.
Extron TouchLink Design Themes • Vortex Green Theme 65
Vortex Green Template Layouts
TLP 700
Figure 72. Audio Control page
Figure 73. Main page, Doc Cam selected, Doc Cam pop-up displayed in the dynamic area, and Normal button selected
Extron TouchLink Design Themes • Vortex Green Theme66
Figure 74. VCR full page
Figure 75. Shutting down page
Extron TouchLink Design Themes • Vortex Green Theme 67
Figure 76. Preset Selection page
Figure 77. Confirmation page
Extron TouchLink Design Themes • Vortex Green Theme68
TLP 350
Figure 78. Don Cam page Figure 79. Laptop page
Figure 80. Start page Figure 81. Start page, power on selected
Extron TouchLink Design Themes • Vortex Green Theme 69
Extron GUI Configurator Fonts
The following is a complete list of the Extron GUI Configurator fonts and the keyboard letter or character equivalent.
Sym
bo
l
Ch
ara
cters
Desc
rip
tio
n
Sym
bo
l
Ch
ara
cters
Desc
rip
tio
n
Sym
bo
l
Ch
ara
cters
Desc
rip
tio
n
Sym
bo
l
Ch
ara
cters
Desc
rip
tio
n
Sym
bo
l
Ch
ara
cters
Desc
rip
tio
n
Nu
mb
ers
a a Rewind l l Power w w Arrow Left % % Aux - - Minus 1 1
b b Fast Forward m m Audio x x Arrow Up & & PC : : Video Conf 2 2
c c Previous n n Close y y Arrow Down * * Star ; ; Audio 3 3
d d Next o o Open z z Return ( ( Reject < < Back 4 4
e e Step Back p pVolume Down F F Security Cam ) ) OK > > Play 5 5
f f Step Forward q q Volume Up G G Volume Off } } Doc Cam ? ? Record 6 6
g g Eject r r Jump to Start U U Microphone ^ ^ Lectern , ,Tuner (comma) 7 7
h h Scroll Up s s Jump to End ` `Server(back quote) + + Plus . .
Audio Conf (period) 8 8
i i Scroll Down t t Pause ! ! Laptop | | Step ‘/ / Blu-ray 9 9
j j Scroll Left u u Wall Plate @ @ Stop ] ] DVD VCR u ‘VCR (single quote) 0 0
k k Scroll Right v v Arrow Right # # Pound $ $ DVD
NOTE: Use only lowercase letters. Three exceptions are:• Uppercase F (F, Security Cam)• Uppercase G (G, Volume Off)• Uppercase U (U, Microphone)
Extron TouchLink Design Themes • Extron GUI Configurator Font 71
Extron USA - WestHeadquarters
+800.633.9876Inside USA/Canada Only
+1.714.491.1500+1.714.491.1517 FAX
Extron USA - East
+800.633.9876Inside USA/Canada Only
+1.919.863.1794+1.919.863.1797 FAX
Extron Europe
+800.3987.6673Inside Europe Only
+31.33.453.4040+31.33.453.4050 FAX
Extron Asia
+800.7339.8766Inside Asia Only
+65.6383.4400+65.6383.4664 FAX
Extron Japan
+81.3.3511.7655+81.3.3511.7656 FAX
Extron China
+400.883.1568Inside China Only
+86.21.3760.1568+86.21.3760.1566 FAX
Extron Middle East
+971.4.2991800+971.4.2991880 FAX
© 2011 Extron Electronics. All rights reserved. www.extron.com