Brand Color Swatches

Our colors are the life of the party. Boingo Red is used for calls-to-action and text links. Boingo Blue is used for secondary functionality and to highlight content areas. Boingo purple never gets invited to the party, so don’t ask.

  • HEX: #d52b1e
  • HEX: #b4261e
  • HEX: #35c0e2
  • HEX: #545861
  • HEX: #cfcfcf

Header/Navigation Styles

Headers are consistnetly full-width and use a '.contiainer' class to control its contents. Navigation contained within the headers is wrapped in a HTML5 'nav' tag for improved semantics, and comes in two style: priamry and mobile. Primary navigation is a horizontal list, while mobile navigation is an off-canvas vertical list.

<nav aria-hidden="true" role="navigation" class="mobile-nav group">
	<li>
		<a href="">
			<span aria-hidden="true" data-icon="icon-character-code"></span>
			Link Text
			<span aria-hidden="true" data-icon="&#xe003;"></span>
		</a>
	</li>
</nav>

Content Block

Introducing the dynamic duo of Boingo typefaces: Avenir and Museo Slab. Avenir is the lead, exuding professionalism and savvy. Museo Slab is the affable sidekick, demonstrating Boingo’s friendly, approachable side.

<h2 class="primary-font_heavy">Heading</h2>
<h3 class="secondary-font">Subheading</h3>
<p>Lorem ipsum dolor sit amet...</p>

Header - Avenir Heavy - 1.6875em

Subhead - Museo Slab 300 Italic - 1.3125em

Body copy - Helvetica Regular - Boingo Gray 80% - 0.875em; - 1.4em leading. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Button Color Variations

Buttons come in 3 colors: Primary, Secondary and Tertiary.

Primary
<a class="button primary" href="">Button Text</a>

Secondary
<a class="button secondary" href="">Button Text</a>

Tertiary
<a class="button tertiary" href="">Button Text</a>

Button Size Variations

Buttons come in 3 sizes: Primary, secondary and large.

Primary Button Size
<a class="button primary" href="">Button Text</a>

Secondary Small Button Size
<a class="button primary small" href="">Button Text</a>

Secondary Large Button Size
<a class="button primary large" href="">Button Text</a>

Button Style Variations

Buttons have 2 style variations: one with a chevron, and a second to accommodate icons.

Chevron Variation
<a class="button primary chevron" href="">
	<em>Button Text</em>
	<span class="aligncenter" aria-hidden="true" data-icon="&#xe003;"></span>
</a>

Split Button with Icon
<a class="button primary split" href="">
	<em>Button Text</em>
	<span class="aligncenter" aria-hidden="true" data-icon="&#xe003;"></span>
</a>

Form Styles

Forms contain customized elements which are being overriden via Javascript, and then styled via CSS.

Text Input
<input type="text" name="labelName" placeholder="labelName">

Select Input
<select>									
	<option>Option 01</option>
	<option>Option 02</option>
	<option>Option 03</option>					
</select>

Invalid Form Entry
<input type="text" name="labelName" placeholder="labelName" class="error">

Form Entry Success
<input type="text" name="labelName" placeholder="labelName" class="success">

Radio Input
<input type="radio">

Checkbox Input
<input type="checkbox">
  • Input/Text Field

  • Default Select Input

  • Invalid Form Entry

  • Form Entry Success

  • Radio Buttons

  • Checkboxes

Language Selector


Default Language Selector
<select data-size="auto">									
	<option data-icon="lang-en">English</option>
	<option data-icon="lang-es">Español<option>
	<option data-icon="lang-fr">Francais</option>
	<option data-icon="lang-de">Deutsch</option>
	<option data-icon="lang-it">Italiano</option>
	<option data-icon="lang-ja">日本語</option>
	<option data-icon="lang-pt-br">Português – br</option>
	<option data-icon="lang-pt-pt">Português - pt</option>
	<option data-icon="lang-th">ไทย</option>
	<option data-icon="lang-ch-sm">简体字</option>
	<option data-icon="lang-ch-tr">簡體字</option>	
</select>

Drop-Up Language Selector
<select data-size="auto" class="select-dropup">									
	<option data-icon="lang-en">English</option>
	<option data-icon="lang-es">Español<option>
	<option data-icon="lang-fr">Francais</option>
	<option data-icon="lang-de">Deutsch</option>
	<option data-icon="lang-it">Italiano</option>
	<option data-icon="lang-ja">日本語</option>
	<option data-icon="lang-pt-br">Português – br</option>
	<option data-icon="lang-pt-pt">Português - pt</option>
	<option data-icon="lang-th">ไทย</option>
	<option data-icon="lang-ch-sm">简体字</option>
	<option data-icon="lang-ch-tr">簡體字</option>	
</select>

Inverse Language Selector
<select data-size="auto" class="select-inverse">									
	<option data-icon="lang-en">English</option>
	<option data-icon="lang-es">Español<option>
	<option data-icon="lang-fr">Francais</option>
	<option data-icon="lang-de">Deutsch</option>
	<option data-icon="lang-it">Italiano</option>
	<option data-icon="lang-ja">日本語</option>
	<option data-icon="lang-pt-br">Português – br</option>
	<option data-icon="lang-pt-pt">Português - pt</option>
	<option data-icon="lang-th">ไทย</option>
	<option data-icon="lang-ch-sm">简体字</option>
	<option data-icon="lang-ch-tr">簡體字</option>	
</select>

Non-Rounded Language Selector
(Preroll Page)
<select data-size="auto" class="select-inverse select-noround"> <option data-icon="lang-en">English</option> <option data-icon="lang-es">Español<option> <option data-icon="lang-fr">Francais</option> <option data-icon="lang-de">Deutsch</option> <option data-icon="lang-it">Italiano</option> <option data-icon="lang-ja">日本語</option> <option data-icon="lang-pt-br">Português – br</option> <option data-icon="lang-pt-pt">Português - pt</option> <option data-icon="lang-th">ไทย</option> <option data-icon="lang-ch-sm">简体字</option> <option data-icon="lang-ch-tr">簡體字</option> </select>
  • Default Language Selector

  • Drop-Up Language Selector

  • Inverse Language Selector

  • Non-Rounded Language Selector
    (Preroll Page)

Module Styles

Modules are used to isolate content within a custom 'module'.

Primary Module Style
<div class="module primary">
</div>

Toggle Module Style
<div class="module primary">
	<h5 class="module_header toggle">
		Module Header
		<span>&#xe006;</span>						
	</h5>
</div>

Secondary Module Style
<div class="module secondary">
</div>

Primary Module Style

Module Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Toggle Module Style

    Module Header

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Secondary Module Style

    Module Header

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Modal Styles

Modals are implemented to content via the 'modal' class.

<div class="modal">		
	<span class="close" aria-hidden="true" data-icon="&#xe001;"><</span>
</div>

Modal

Boingo Icons

To help teach our audience about Boingo without using too many scary numbers and long paragraphs, we have fun, irreverent icons. Feel free to use them where you like—but don’t make them too small or you might lose the details.

Icon Reference for Developers

The following page if a reference guide for glpyh characters related to each icon.

Launch Glyph Reference Page
Icon Images for Download

Download this image set to use icons as individual images.

Download Icons

Boingo Plus Icons

  • Boingo Unlimited
  • Boingo UK & Ireland
  • Boingo Europe Plus
  • Boingo Asia Pacific
  • Boingo Global
  • Boingo Mobile
  • Boingo AsYouGo
  • Boingo Hourly
  • Boingo Wi-Fi Credits
  • Complimentary Wi-Fi

Venue Icons

  • Cafés and Coffee Shops
  • Restaurants
  • Convention Centers
  • Hotels
  • In-Flight Wi-Fi
  • Stadiums
  • Shopping Centers
  • Offices
  • Public Spaces
  • Transportation
  • Airport Opt.1
  • Airport Opt.2

Utility/Navigation Icons

  • Access Pass
  • Airport Info
  • Airline & Flight Info
  • Map & Directions
  • Good Stuff
  • Parking
  • Access Pass
  • Boingo Support

Utility Icons

  • Up Arrow
  • Right Arrow
  • Down Arrow
  • Left Arrow
  • Close
  • Checkmark

Deck Icons

  • Animation
  • Bookings/Registrations/Sign-Ups
  • Buzz Media
  • Children in HH
  • Click-to-Visit
  • Direct Traffic
  • Education
  • Email Collection
  • Favorability
  • Gender
  • Home Ownership
  • Income
  • Laptop
  • Lead Gen
  • Mobile
  • Poll
  • Purchase Intent
  • Recall
  • Social Media
  • Starbucks
  • Tablet
  • Text Match
  • Trial
  • Unaided Awareness
  • Video
  • Advertising and Sponsorship

Product Suite Icons

  • Advertising and Sponsorship
  • App Downloads
  • Around Me
  • Data Analytics
  • Dwell Time
  • Email and SMS Collection
  • Heat Mapping/Pathing
  • Loyalty Program Enrollment
  • Marketing Toolkit
  • Movie and TV Downloads
  • Queue Guru
  • Retargeting
  • Revenue Generation
  • Shopping Portal
  • Social Media Login
  • Streampass
  • Usage Analytics
  • Wi-Fi/DAS

Grid

Simple fluid grid based on percentages.

<ul class="grid_1-6 group">
	<li>1-6</li>
	<li>1-6</li>		
	<li>1-6</li>
	<li>1-6</li>
	<li>1-6</li>
	<li>1-6</li>																					
</ul>

<ul class="grid_1-5 group">
	<li>1-5</li>			
	<li>1-5</li>	
	<li>1-5</li>	
	<li>1-5</li>
	<li>1-5</li>																				
</ul>

<ul class="grid_1-3 group">	
	<li>1-3</li>		
	<li>1-3</li>	
	<li>1-3</li>																				
</ul>

<ul class="grid_1-2 group">	
	<li>1-2</li>			
	<li>1-2</li>				
</ul>
					
  • 1-6
  • 1-6
  • 1-6
  • 1-6
  • 1-6
  • 1-6
  • 1-5
  • 1-5
  • 1-5
  • 1-5
  • 1-5
  • 1-3
  • 1-3
  • 1-3
  • 1-2
  • 1-2