UI Colours

These are the colours outside of the primary palettes that are used within the sass. They are defined in colour_theme.sass

Type

Click to copy
Copied!
#3b444f
$body-copy
Click to copy
Copied!
#67747c
$feature-copy
Click to copy
Copied!
#2c3643
$dark-blue-gray
Click to copy
Copied!
#297CBB
$header-blue
Click to copy
Copied!
#bccee3
$nav-primary-type
Click to copy
Copied!
#dbe6ec
$placeholder-copy

Section Colours

Click to copy
Copied!
#ffc83f
$section--activity
Click to copy
Copied!
#c7e6aa
$section--article
Click to copy
Copied!
#297CBB
$section--entertainment
Click to copy
Copied!
#684e79
$section--event
Click to copy
Copied!
#bf538d
$section--hotel
Click to copy
Copied!
#3b444f
$section--need-to-know
Click to copy
Copied!
#47a899
$section--restaurant
Click to copy
Copied!
#ff708e
$section--shopping
Click to copy
Copied!
#fa5e5b
$section--sight
Click to copy
Copied!
#16c98d
$section--tour
Click to copy
Copied!
#3b444f
$section--transport
Click to copy
Copied!
#0FDEBD
$section--destination

Navigation colours

Click to copy
Copied!
#10b47d
$nav-submenu-hover
Click to copy
Copied!
#0ea270 #000 #45d4a4 #000
$nav-submenu-hover-border
Click to copy
Copied!
#1C3043
$offscreen-nav-background
Click to copy
Copied!
#23394B
$offscreen-nav-border
Click to copy
Copied!
#508DBB
$offscreen-nav-border-hover
Click to copy
Copied!
#13202C
$offscreen-nav-user-background
Click to copy
Copied!
#124385
$row-leaderboard
Click to copy
Copied!
#093367
$row-primary--darker

States

Click to copy
Copied!
#0FDEBD
$active
Click to copy
Copied!
#cbd9e4
$disabled
Click to copy
Copied!
#f4e565
$yella-highlight
Click to copy
Copied!
#99a9b3
$grey-highlight

UI backgrounds and borders

Click to copy
Copied!
#f5f5f5
$body-background
Click to copy
Copied!
#297CBB
$body-background-offset
Click to copy
Copied!
#f4fbfe
$card-figure-bg
Click to copy
Copied!
#dbe6ec
$details-panel-bg
Click to copy
Copied!
#dbe6ec
$details-panel-border
Click to copy
Copied!
#3b444f
$high-contrast-bg
Click to copy
Copied!
#99a9b3
$high-contrast-fg
Click to copy
Copied!
#dbe6ec
$input-border
Click to copy
Copied!
rgba(3, 46, 92, 0.12)
$new-header-grey-shadow
Click to copy
Copied!
#288ad6
$responsive-nav-bg
Click to copy
Copied!
#288ad6
$responsive-nav-subnav-bg

Highlights

Click to copy
Copied!
#fa5e5b
$highlight-error
Click to copy
Copied!
#16c98d
$highlight-success
Click to copy
Copied!
#feef6d
$highlight-warning
Click to copy
Copied!
#288ad6
$highlight-announcement

Social Media

Click to copy
Copied!
#4c66a4
$facebook
Click to copy
Copied!
#dd4b39
$google-plus
Click to copy
Copied!
#cb2027
$pinterest
Click to copy
Copied!
#FF4522
$stumbleupon
Click to copy
Copied!
#2fc2ef
$twitter
Click to copy
Copied!
#35465c
$tumblr