3 Documentation

Documentation information for the site, including image sizes and URL paths.

3.1.1 Color Swatches

Below you can find color swatches for each of the colors used on the site.

Travelport Palette

Main Colors

The primary colors used throughout the Travelport site.

#63666a

#159cdf

#78be20

#00507f

#5e2751

#f2f2f2

Transparent Colors

Transparent colors used in a few locations in the site. Solid equivalents are provided for instances where transparent usage is impractical.

#63666a (30%)

Solid Equivalent: #d0d1d2

#159cdf (30%)

Solid Equivalent: #b9e1f6

Gradient Colors

Gradient color used for the border along the top of the site.

#0479b5 / #78be20

Left to right, 50%

Additional Colors

Additional colors used in the site. These colors aren't part of the standard branding colors, and are instead used in tertiary locations, such as on some hover states or element borders.

#999999

#a7a7a7

#0479b5

#91da35

3.2.1 Typography

Typography throughout the site is broken into a few distinct categories. Below are examples of the different typographic conventions used throughout Travelport.

Fonts

Download fonts

Stag Sans Bold (700)

Stag Sans Book (400)

Stag Sans Light (300)

Stag Sans Round Bold (700)

Stag Sans Round Book (400)

Stag Sans Round Light (300)

Hero Areas

Typography in the Hero area uses much larger point sizes and different row options compared to the normal sizes used in other areas of the site.

Hero title
plus additional line

  • Typeface
    Stag Sans Round Light
  • Font Size
    4.8rem
  • Line Height
    1
  • Font Colors
    #00507f
    #78be20
    #5e2751

Hero subheader

  • Typeface
    Stag Sans Round Light
  • Font Size
    2.6rem
  • Line Height
    1
  • Font Colors
    #00507f

Hero area body copy

  • Typeface
    Stag Sans Light
  • Font Size
    1.8rem
  • Line Height
    1.3
  • Font Colors
    #63666a

Body / General Specs

General styles used for non-landing pages. These type treatments tend to use smaller point sizes, and are considered the default.

Page title (H1)

  • Typeface
    Stag Sans Round Light
  • Font Size
    3.2rem
  • Line Height
    1.15
  • Font Colors
    #00507f
  • Typeface
    Stag Sans Light
  • Font Size
    2.6rem
  • Line Height
    1.15
  • Font Colors
    #63666a

Article sub-title (H3)

  • Typeface
    Stag Sans Light
  • Font Size
    2.0rem
  • Line Height
    1.15
  • Font Colors
    #63666a

Body copy

  • Typeface
    Stag Sans Light
  • Font Size
    1.4rem
  • Line Height
    1.5
  • Font Colors
    #63666a
Body copy hyperlink
  • Typeface
    Stag Sans Light
  • Font Size
    1.4rem
  • Line Height
    1.5
  • Font Colors
    #159cdf
  • Typeface
    Stag Sans Light
  • Font Size
    1.6rem (UPPERCASE)
  • Line Height
    1
  • Font Colors
    #78be20
  • Typeface
    Stag Sans Book
  • Font Size
    1.4rem
  • Line Height
    1.5
  • Font Colors
    #78be20

Image caption

  • Typeface
    Stag Sans Book Italic
  • Font Size
    1.3rem
  • Line Height
    1
  • Font Colors
    #159cdf
"Quote or excerpt"
  • Typeface
    Stag Sans Light Italic
  • Font Size
    2.8rem
  • Line Height
    1.15
  • Font Colors
    #78be20

Body / Right Rail

Headline and body styles used for right rail/sidebar components.

  • Typeface
    Stag Sans Light
  • Font Size
    2.5rem
  • Line Height
    1.08
  • Font Colors
    #00507f
    #78be20
    #159cdf
  • Typeface
    Stag Sans Light
  • Font Size
    1.8rem
  • Line Height
    1.3
  • Font Colors
    #00507f
    #78be20
    #159cdf

Body / Landing Page Treatment

Landing page styles used for the bulk of content throughout the site.

Landing header

  • Typeface
    Stag Sans Book
  • Font Size
    2.6rem
  • Line Height
    1.2
  • Font Colors
    #00507f

Landing subtitle

  • Typeface
    Stag Sans Book
  • Font Size
    1.8rem
  • Line Height
    1.15
  • Font Colors
    #63666a

Landing body copy

  • Typeface
    Stag Sans Light
  • Font Size
    1.8rem
  • Line Height
    1.3
  • Font Colors
    #63666a
Landing hyperlink
  • Typeface
    Stag Sans Light
  • Font Size
    1.8rem
  • Line Height
    1.5
  • Font Colors
    #159cdf

3.3.1 Image Sizes

Article - Primary Image

  • Desktop size: 630px X 340px
  • Mobile size: 320px X 200px
  • An example is found at the top of the Press Release page.

Article - Supporting Image

  • Desktop size: 280px X 160px
  • An example would be a smaller, secondary image within the copy on the Press Release page.

Article - Listing Thumbnail Image

  • Desktop size: 200px X 200px
  • Mobile size: 100px X 100px
  • An example is found on the Listing page.

Awards Logo/Image

  • Desktop size: 260px X 100px
  • An example is found at the bottom of the Company landing page.

Benefits Image

  • Desktop size: 420px X 236px
  • Mobile size: 370px X 208px
  • An example is found on the Solutions landing page.

Bio Image

  • Desktop size: 300px X 300px
  • An example is found on the Bio page.

Contact Page Image

  • Desktop size: 850px X 200px
  • Mobile size: 320px X 180px
  • An example is found on the Contact Us page.

Event Detail Image

  • Desktop size: 680px X 370px
  • An example is found on the Event Detail page.

Feature Full Image

  • Desktop size: 420px X 236px
  • Mobile size: 370px X 208px
  • An example is found at the top of the Platform landing page.

Feature Double Image

  • Desktop size: 420px X 236px
  • Mobile size: 370px X 208px
  • An example is found at the top of the Services landing page.

Feature Dropdown Image

  • Desktop size: 420px X 236px
  • Mobile size: 370px X 208px
  • An example is found at the top of the Segment landing page.

Hero - Standard Image

  • Desktop size: 755px X 270px
  • Mobile size: 320px X 200px
  • An example is found at the top of the Segment landing page.

Hero - Tall Image

  • Desktop size: 755px X 445px
  • Mobile size: 320px X 200px
  • An example is found at the top of the Services landing page.

Infographic Image

  • Desktop size: 1280px X 550px
  • Mobile size: 320px X 640px
  • An example is found on the Company landing page.

Landing Splash

  • Desktop size: 1440px X 540px
  • Mobile size: 320px X 190px
  • An example is found on the Company landing page.

Logos

(our recent investments)

  • Desktop size: 320px X 100px
  • An example is found at the bottom of the Home page.

Promo Banner Image

  • Desktop size: 400px X 300px
  • Mobile size: 320px X 240px
  • An example is found on the Home page.

Promo Box Image

  • Desktop size: 570px X 200px
  • Mobile size: 320px X 112px
  • An example is found on the Home page.
  • Desktop size: 420px X 240px
  • Mobile size: 370px X 216px
  • An example is found on the Solutions detail page.

Supporting Asset Image

  • Desktop size: 325px X 290px
  • An example is found on the Solutions detail page.

Slider Image

  • Desktop size: 420px X 240px
  • Mobile Size: 370px X 210px
  • An example is found on the Solutions detail page.

Labs: Panels Image

  • Desktop size: 700px X 410px
  • This is the standard size for an image in the panel contents of /travelport-labs

Labs: Panels Image (tall)

  • Desktop size: 700px X 932px
  • A variant of the above style for vertical images (see the Incubator section on /travelport-labs). Because this image isn't used for the main panel overviews, it doesn't need to be quite as wide as the main panels image.

Labs: Staff Image

  • Desktop size: 700px X 687px
  • Staff images for the /travelport-labs page

3.4.1 Site URLs

Segment Landing Pages

Page Name URL Path Drupal Template
Airlines /airlines Segment Landing Page
Hotels /hotels Segment Landing Page
Rail /rail Segment Landing Page
Cars /cars Segment Landing Page
Cruise /cruise Segment Landing Page
Tour /tour Segment Landing Page
Leisure and mixed travel agencies /leisure-and-mixed-travel-agencies Segment Landing Page
Travel management companies /travel-management-companies Segment Landing Page
Online travel agencies /online-travel-agencies Segment Landing Page
Corporations /corporations Segment Landing Page
Developers /developers Segment Landing Page
Technology partners /technology-partners Segment Landing Page
Industry affairs /industry-affairs Segment Landing Page

Platform

Page Name URL Path Drupal Template
Platform /platform
- - Interactive element /platform/vision PURPLE

Solutions

Page Name URL Path Drupal Template
Solutions /solutions Solutions Landing Page
- - Airline IT solutions /solutions/airlines Multiple Solutions
- - Connectivity solutions /solutions/connectivity Multiple Solutions
- - Corporate travel management solutions /solutions/corporate-travel-management Multiple Solutions
- - Digital media solutions /solutions/digital-media Multiple Solutions
- - Payment solutions /solutions/payments Solutions Page
- - Merchandising solutions /solutions/merchandising Multiple Solutions
- - Selling solutions /solutions/selling Multiple Solutions
- - Developer solutions /solutions/developers Multiple Solutions
- - Online travel solutions /solutions/online-travel Multiple Solutions
- - Innovation and incubation /solutions/innovation Multiple Solutions
- - Technology partners /solutions/technology-partners Multiple Solutions
- - Smartpoint /solutions/smartpoint Solutions Page

Services

Page Name URL Path Drupal Template
Services /services

Labs

Page Name URL Path Drupal Template
Labs /labs

Company

Page Name URL Path Drupal Template
Company /company Company Landing Page
- - Board of Directors /company/board-of-directors
- - - - Douglas Streenland /company/bios/douglas-streenland Bio Page
- - - - Gordon Wilson /company/bios/gordon-wilson Bio Page
- - - - Gavin Baiera /company/bios/gavin-baiera Bio Page
- - - - Gregory Blank /company/bios/gregory-blank Bio Page
- - - - Elizabeth Buse /company/bios/elizabeth-buse Bio Page
- - - - Steven Chambers /company/bios/steven-chambers Bio Page
- - - - Michael Durham /company/bios/michael-durham Bio Page
- - - - Douglas Hacker /company/bios/douglas-hacker Bio Page
- - Executive Leadership /company/executive-leadership
- - - - Gordon Wilson /company/bios/gordon-wilson Bio Page
- - - - Philip Emery /company/bios/philip-emery Bio Page
- - - - Kurt Ekert /company/bios/kurt-ekert Bio Page
- - - - Terence P Conley /company/bios/terence-p-conley Bio Page
- - - - Christopher Roberts /company/bios/christopher-roberts Bio Page
- - - - Bryan Conway /company/bios/bryan-conway Bio Page
- - - - Matt Minetola /company/bios/matt-minetola Bio Page
- - - - Thomas Murphy /company/bios/thomas-murphy Bio Page
- - At a Glance TBD Basic Page
- - Media center /company/media-center
- - - - Press releases /company/media-center/press-releases Listing Page
- - - - Press releases page /company/media-center/press-releases/YYYY/MM/DD/title-of-press-release Press Release Page
- - Events /company/events
- - - - Event page /company/events/YYYY/name-of-event
- - Awards /company/awards
- - Investor relations http://ir.travelport.com
- - Careers /company/careers
- - Vision /company/vision
- - Locations /company/locations
- - Contact Us /contact Contact Us Page
- - Privacy Policy /privacy
- - Terms and conditions /terms-and-conditions
- - Cookies /cookies