Main colors

Background colors

Text colors

A

B

C

Border colors

Standard UI element

A

					<div class="geotabPrimaryFill"></div>
					<div class="geotabSecondaryFill"></div>
					

					<div class="geotabPrimaryText">A</div>
					<div class="geotabSecondaryText">B</div>
					<div class="geotabUsualText">C</div>
					

					<div class="geotabPrimaryBorder"></div>
					<div class="geotabSecondaryBorder"></div>
					

					<div class="geotabUIElement">A</div>

Page Name

Page Name with sub title

and additional information

					<div class="geotabPageHeader">
						<h1 class="geotabPageName">Page Name <span class="subdued">with sub title</span></h1>
						<div class="pageNameSecondary">
							<h3 class="geotabSecondaryTitle">and additional information</h3>
						</div>
					</div>

Buttons

Link to Connect Checkbox On Off

					<button class="geotabButton">Button</button>
					

					<button class="geotabButton disabled">Disabled button</button>
					

					<button class="geotabButton negativeButton">Button</button>
					

					<button class="geotabButton positiveButton">Button</button>
					

					<a href="#" class="geotabButton">Link</a>
					

					<input type="checkbox" id="someCheckbox" class="geotabSwitchButton">
					<label class="geotabButton" for="someCheckbox">Checkbox</label>
					

					<input type="radio" name="someRadio" id="someRadio1" class="geotabSwitchButton" checked>
					<label class="geotabButton" for="someRadio1">On</label>
					<input type="radio" name="someRadio" id="someRadio2" class="geotabSwitchButton">
					<label class="geotabButton" for="someRadio2">Off</label>

Horizontal button sets

					<div class="horizontalButtonSet">
						<button class="geotabButton">Button 1</button>
						<button class="geotabButton">Button 2</button>
						<button class="geotabButton">Button 3</button>
					</div>

Vertical button sets

					<div class="verticalButtonSet">
						<button class="geotabButton">Button 1</button>
						<button class="geotabButton">Button 2</button>
						<button class="geotabButton">Button 3</button>
					</div>

Form

Name:

Disabled field:

Comment:

Sir, in my heart there was a kind of fighting That would not let me sleep. Methought I lay Worse than the mutines in the bilboes. Rashly— And prais'd be rashness for it—let us know Our indiscretion sometimes serves us well... Hamlet, Act 5, Scene 2, 4–8

Switcher: Yes No

Actions

Action 1 Action 2 Action 3

					<fieldset class="geotabFieldset">
						<div class="geotabField">
							<label>Name:</label>
							<input type="text" class="geotabFormEditField" maxlength="255">
						</div>
					

						<div class="geotabField">
							<input type="text" class="fieldWithoutLabel geotabFormEditField" maxlength="255">
						</div>
					

						<div class="geotabField">
							<label>Comment:</label>
							<textarea cols="30" class="geotabFormEditField" rows="5"></textarea>
						</div>
					

						<div class="geotabField">
							<div class="fieldWithoutLabel singleField"><q>Sir, in ... us well</q></div>
						</div>
					

						<div class="geotabField">
							<label>Switcher:</label>
							<span class="horizontalButtonSet">
								<input type="radio" name="switcher" class="geotabSwitchButton" id="switcher1" checked>
								<label class="geotabButton" for="switcher1">Yes</label>
								<input type="radio" name="switcher" id="switcher2" class="geotabSwitchButton">
								<label class="geotabButton" for="switcher2">No</label>
							</span>
						</div>
					

						<div class="geotabField">
							<label>Actions</label>
							<div class="verticalButtonSet">
								<input type="checkbox" class="geotabSwitchButton" id="Actions1" />
								<label class="geotabButton" for="Actions1">Action 1</label>
								<input type="checkbox" id="Actions2" class="geotabSwitchButton">
								<label class="geotabButton" for="Actions2">Action 2</label>
								<input type="checkbox" id="Actions3" class="geotabSwitchButton">
								<label class="geotabButton" for="Actions3">Action 3</label>
							</div>
						</div>
					</fieldset>

Toolbar

Link to Connect

First option Second option

					<div class="geotabToolbar">
						<input type="text" placeholder="Search something" class="geotabFormEditField" />
					

						<button class="geotabButton">Button</button>
					

						<a href="https://www.geotab.com/connect.html" target="_blank" class="geotabButton">Link to Connect</a>
					

						<div class="horizontalButtonSet">
							<input type="radio" name="someRadio2" id="toolbarRadio1" class="geotabSwitchButton" checked>    
							<label class="geotabButton" for="toolbarRadio1">First option</label>
							<input type="radio" name="someRadio2" id="toolbarRadio2" class="geotabSwitchButton">    
							<label class="geotabButton" for="toolbarRadio2">Second option</label>
						</div>
					</div>