Expedia Group

Design System

careers.expediagroup.com — Visual reference for colors, typography, buttons, and components

Brand

Colors

Blues
blue-1#020247
blue-2#000099
blue-3 / blue-12#424BED
blue-4#B6DBFF
blue-5#e0edfe
blue-6#94b0f9
blue-7#0000fe
blue-8#f7faff
blue-9#DFEDFF
blue-10#EDF6FF
blue-11#000064
blue-13#B3B7F8
blue-tint / aqua-1#DDE7F4
Greys
black#2E2E2E
grey-1#32384D
grey-2#4E5165
grey-3#686B7C
grey-4#828493
grey-5#9A9DA7
grey-6#B0B3BC
grey-7#CACBD1
grey-8#DFDFE4
grey-9#F3F3F5
grey-10#D9D9D9
white#FFFFFF
Accents
green-1#58dfb4
orange-1#F27E31
red-1#CB2C30
yellow-1#ffc60b

Brand

Gradients

Brand Gradient — Search / Jobs
Orange → Pink → Cyan
#f47c20 → #ef509d → #00AEE5
Dark to Navy
button--primary--blue-g6
#020247 → #000099
Navy to Bright Blue
button--primary--blue-g3
#000099 → #424BED

Brand

Typography

Font Families
ExpediaGroupPrimary
ExpediaGroupPrimary — Bold 700 — H1 only
CentraNo2
CentraNo2 — Body, H2–H6, UI elements
Hairline 100
weight: 100
Thin 200
weight: 200
Light 300
weight: 300
Book 400
weight: 400
Medium 500
weight: 500
Bold 700
weight: 700
ExtraBold 800
weight: 800
Black 900
weight: 900
Heading Scale

H1 — The world is yours to explore

Font ExpediaGroupPrimary
Mobile 3.6rem / 700
Desktop 5.2rem / 700
Class h1 or .h1

H2 — Find your place at Expedia Group

Font CentraNo2
Mobile 3.6rem / 500
Desktop 5.2rem / 400
Class h2 or .h2

H3 — Build the future of travel technology

Font CentraNo2
Mobile 2.8rem / 500
Desktop 4.3rem / 500
Class h3 or .h3

H4 — Roles across engineering, design, and product

Font CentraNo2
Mobile 1.8rem / 500
Desktop 3.6rem / 500
Class h4 or .h4
H5 — Open positions in 50+ countries
Font CentraNo2
Mobile 1.6rem / 500
Desktop 2.6rem / 500
Class h5 or .h5
H6 — Competitive benefits and flexible work
Font CentraNo2
Mobile 1.2rem / 500
Desktop 2.2rem / 500
Class h6 or .h6
Body & Utility Styles

Body copy — At Expedia Group, we believe travel is a force for good. Our teams span engineering, data science, design, and beyond, working together to make every journey possible for every traveler everywhere.

Font CentraNo2 / 400
Mobile 1.6rem / 2.5rem line-height
Desktop 1.8rem / 2.8rem line-height

Small body copy — Supporting text, captions, and secondary information appear at this size. Used for metadata, timestamps, and fine print.

Class p.small
Mobile 1.4rem / 2rem
Desktop 1.6rem / 2.6rem

Eyebrow Label

Class .eyebrow
Size 1.6rem (mobile) / 2rem (desktop)
Weight 500
Letter-spacing 0.32rem
Color blue-2 (#000099)

Interactive

Buttons

Primary — Blue Variants
Primary Navy
.button--primary--blue-2
Primary Bright
.button--primary--blue-3
Navy → Bright
.button--primary--blue-g3
Dark Navy
.button--primary--blue-g6
Primary — White Variants (on dark)
White Solid
.button--primary--white
Navy→White
.button--primary--white-g1
Dark→White
.button--primary--white-g2
Secondary — Text + Icon (on light)
Learn more
.button--secondary-arrow-right-black
Learn more
.button--secondary-arrow-right-blue
Explore roles
.button--secondary-chevron-right-black
Search jobs
.button--secondary-search-black
Secondary — on dark
Learn more
.button--secondary-arrow-right-white
Explore roles
.button--secondary-chevron-right-white
Reset / Utility
Clear filter
.button--reset

Interactive

Form Elements

Standard Inputs (light background)
Class .form-control
Border Radius 9999px (pill)
Focus border-color #020247
Search Form (dark background)
Search Jobs
Background blue-1 (#020247)
Inputs white background, 5px radius

Brand

Components

Navbar
Expedia Group
Our Story Roles Life at EG Search Jobs
Background blue-2 (#000099)
Position fixed, z-index 10
Mobile bg blue-11 (#000064)
Footer
Expedia Group
f in tw
Quick Links
Our Story
Open Roles
Life at EG
Early Careers
Corporate
Privacy Policy
Terms of Use
Accessibility
Sitemap
© 2024 Expedia Group, Inc. All rights reserved.
Background grey-8 (#DFDFE4)
Social icons blue-2 (#000099)
Links 500 weight (quick links), 400 (corporate)
Brand Logos
Expedia Hotels.com VRBO Orbitz Travelocity Trivago Hotwire + Cheaptickets, CarRentals.com, Expedia Cruises, Wotif, Ebookers
Path assets/build/img/home/brands/
Formats SVG (white/neutral) + PNG (color)

Assets

Icons

SVG Arrow & UI Icons
arrow-right-white
arrow-right-blue
arrow-right-black
arrow-left-black
search-white
search-blue
circle-x
Path assets/build/img/icons/
Also available Font Awesome 4.7 (CDN), LineIcons custom font
Social Icons
facebook
instagram
linkedin
twitter
glassdoor

Layout

Breakpoints & Grid

Responsive Breakpoints
0px
xs
576px
sm
768px
md
992px
lg ★
1200px
xl
1400px
2xl

★ 992px is the primary desktop/mobile switching breakpoint used throughout the codebase.

Container
Class .container
Max-width 1300px
Padding ≤1299px 0 4rem
Padding ≤991px 0 3rem
Grid Bootstrap 5.1.1
Expedia Group Careers — Design System — careers.expediagroup.com