Overview

Overview
Colors
Typography
Grid
Spacing
Icons
Inputs
Page Elements
Filters
Feedback

Components

Overview

Colors

Inputs

Page Elements

Filters

Feedback

Colors

Ticketmaster uses colors purposefully to communicate how things function in the interface. This helps us create visual patterns that can make interacting with our product easier and more predictable for users.

Color Pallete

TM provides a full spectrum of color options that are suited for our UI that works harmoniously with our brand colors and are compliant with web accessibility standards.

Brand

Primary

#026CDF
RGB (2, 108, 223)
HSB (211, 99%, 87%)

Primary Dark

#0150A7
RGB (1, 80, 167)
HSB (211, 99%, 65%)

Primary Darkest

#013670
RGB (1, 54, 112)
HSB (211, 99%, 44%)

Primary Light

#D6E7FA
RGB (214, 231, 250)
HSB (212, 14%, 98%)

Primary Lightest

#EBF4FD
RGB (235, 244, 253)
HSB (210, 7%, 99%)

Primary Reverse

#3396FF
RGB (51, 150, 255)
HSB (211, 80%, 100%)

Primary Reverse Light

#80B5EF
RGB (128, 181, 239)
HSB (211, 46%, 94%)

Primary Reverse Lightest

#BFDAF6
RGB (191, 218, 246)
HSB (211, 22%, 96%)

Primary

#026CDF
RGB (2, 108, 223)
HSB (211, 99%, 87%)

Primary Dark

#0150A7
RGB (1, 80, 167)
HSB (211, 99%, 65%)

Primary Darkest

#013670
RGB (1, 54, 112)
HSB (211, 99%, 44%)

Primary Light

#D6E7FA
RGB (214, 231, 250)
HSB (212, 14%, 98%)

Primary Lightest

#EBF4FD
RGB (235, 244, 253)
HSB (210, 7%, 99%)

Primary Reverse

#3396FF
RGB (51, 150, 255)
HSB (211, 80%, 100%)

Primary Reverse Light

#80B5EF
RGB (128, 181, 239)
HSB (211, 46%, 94%)

Primary Reverse Lightest

#BFDAF6
RGB (191, 218, 246)
HSB (211, 22%, 96%)

Primary

#026CDF
RGB (2, 108, 223)
HSB (211, 99%, 87%)

Primary Dark

#0150A7
RGB (1, 80, 167)
HSB (211, 99%, 65%)

Primary Darkest

#013670
RGB (1, 54, 112)
HSB (211, 99%, 44%)

Primary Light

#D6E7FA
RGB (214, 231, 250)
HSB (212, 14%, 98%)

Primary Lightest

#EBF4FD
RGB (235, 244, 253)
HSB (210, 7%, 99%)

Primary Reverse

#3396FF
RGB (51, 150, 255)
HSB (211, 80%, 100%)

Primary Reverse Light

#80B5EF
RGB (128, 181, 239)
HSB (211, 46%, 94%)

Primary Reverse Lightest

#BFDAF6
RGB (191, 218, 246)
HSB (211, 22%, 96%)

Dark Fill

#1F262D
RGB (31, 38, 45)
HSB (210, 31%, 18%)

Dark Fill Light

#8F9296
RGB (143, 146, 150)
HSB (214, 5%, 59%)

Dark Fill Lightest

#E3E4E5
RGB (227, 228, 229)
HSB (210, 1%, 90%)

Dark Fill

#1F262D
RGB (31, 38, 45)
HSB (210, 31%, 18%)

Dark Fill Light

#8F9296
RGB (143, 146, 150)
HSB (214, 5%, 59%)

Dark Fill Lightest

#E3E4E5
RGB (227, 228, 229)
HSB (210, 1%, 90%)

Dark Fill

#1F262D
RGB (31, 38, 45)
HSB (210, 31%, 18%)

Dark Fill Light

#8F9296
RGB (143, 146, 150)
HSB (214, 5%, 59%)

Dark Fill Lightest

#E3E4E5
RGB (227, 228, 229)
HSB (210, 1%, 90%)

Code

<div>
  <div style={{"backgroundColor":"#026cdf"}} />
  <div style={{"backgroundColor":"#0150a7"}} />
  <div style={{"backgroundColor":"#013670"}} />
  <div style={{"backgroundColor":"#d6e7fa"}} />
  <div style={{"backgroundColor":"#ebf4fd"}} />
  <div style={{"backgroundColor":"#3396ff"}} />
  <div style={{"backgroundColor":"#80b5ef"}} />
  <div style={{"backgroundColor":"#bfdaf6"}} />
  <div style={{"backgroundColor":"#1f262d"}} />
  <div style={{"backgroundColor":"#8f9296"}} />
  <div style={{"backgroundColor":"#e3e4e5"}} />
</div>

Marketplace Accent

Accent 01

#C56BFF
RGB (197, 107, 255)
HSB (276, 58%, 100%)

Accent 01 Dark

#904EBA
RGB (144, 78, 186)
HSB (277, 58%, 73%)

Accent 01 Light

#F0DAFF
RGB (240, 218, 255)
HSB (276, 15%, 100%)

Accent 01 Lightest

#F9F0FF
RGB (249, 240, 255)
HSB (276, 100%, 97%)

Accent 02

#962D94
RGB (150, 45, 148)
HSB (301, 70%, 59%)

Accent 02 Dark

#6D236C
RGB (109, 35, 108)
HSB (301, 68%, 43%)

Accent 02 Light

#E4CBE3
RGB (228, 203, 227)
HSB (302, 11%, 89%)

Accent 02 Lightest

#F4EAF4
RGB (244, 234, 244)
HSB (300, 4%, 96%)

Accent 01

#C56BFF
RGB (197, 107, 255)
HSB (276, 58%, 100%)

Accent 01 Dark

#904EBA
RGB (144, 78, 186)
HSB (277, 58%, 73%)

Accent 01 Light

#F0DAFF
RGB (240, 218, 255)
HSB (276, 15%, 100%)

Accent 01 Lightest

#F9F0FF
RGB (249, 240, 255)
HSB (276, 100%, 97%)

Accent 02

#962D94
RGB (150, 45, 148)
HSB (301, 70%, 59%)

Accent 02 Dark

#6D236C
RGB (109, 35, 108)
HSB (301, 68%, 43%)

Accent 02 Light

#E4CBE3
RGB (228, 203, 227)
HSB (302, 11%, 89%)

Accent 02 Lightest

#F4EAF4
RGB (244, 234, 244)
HSB (300, 4%, 96%)

Accent 01

#C56BFF
RGB (197, 107, 255)
HSB (276, 58%, 100%)

Accent 01 Dark

#904EBA
RGB (144, 78, 186)
HSB (277, 58%, 73%)

Accent 01 Light

#F0DAFF
RGB (240, 218, 255)
HSB (276, 15%, 100%)

Accent 01 Lightest

#F9F0FF
RGB (249, 240, 255)
HSB (276, 100%, 97%)

Accent 02

#962D94
RGB (150, 45, 148)
HSB (301, 70%, 59%)

Accent 02 Dark

#6D236C
RGB (109, 35, 108)
HSB (301, 68%, 43%)

Accent 02 Light

#E4CBE3
RGB (228, 203, 227)
HSB (302, 11%, 89%)

Accent 02 Lightest

#F4EAF4
RGB (244, 234, 244)
HSB (300, 4%, 96%)

Code

<div>
  <div style={{"backgroundColor":"#c56bff"}} />
  <div style={{"backgroundColor":"#904eba"}} />
  <div style={{"backgroundColor":"#eacbff"}} />
  <div style={{"backgroundColor":"#f9f0ff"}} />
  <div style={{"backgroundColor":"#962d94"}} />
  <div style={{"backgroundColor":"#6d236c"}} />
  <div style={{"backgroundColor":"#dfc0df"}} />
  <div style={{"backgroundColor":"#f4eaf4"}} />
</div>

Enterprise Accent

Accent 03

#14A1A3
RGB (20, 161, 163)
HSB (181, 88%, 64%)

Accent 03 Dark

#0A7E80
RGB (10, 126, 128)
HSB (181, 92%, 50%)

Accent 03 Light

#20C4C7
RGB (32, 196, 199)
HSB (181, 84%, 78%)

Accent 03 Lightest

#CEF2F2
RGB (206, 242, 242)
HSB (180, 15%, 95%)

Accent 03 Reverse

#20C4C7
RGB (32, 196, 199)
HSB (181, 84%, 78%)

Accent 04

#00FFFF
RGB (0, 255, 255)
HSB (180, 100%, 100%)

Accent 03

#14A1A3
RGB (20, 161, 163)
HSB (181, 88%, 64%)

Accent 03 Dark

#0A7E80
RGB (10, 126, 128)
HSB (181, 92%, 50%)

Accent 03 Light

#20C4C7
RGB (32, 196, 199)
HSB (181, 84%, 78%)

Accent 03 Lightest

#CEF2F2
RGB (206, 242, 242)
HSB (180, 15%, 95%)

Accent 03 Reverse

#20C4C7
RGB (32, 196, 199)
HSB (181, 84%, 78%)

Accent 04

#00FFFF
RGB (0, 255, 255)
HSB (180, 100%, 100%)

Accent 03

#14A1A3
RGB (20, 161, 163)
HSB (181, 88%, 64%)

Accent 03 Dark

#0A7E80
RGB (10, 126, 128)
HSB (181, 92%, 50%)

Accent 03 Light

#20C4C7
RGB (32, 196, 199)
HSB (181, 84%, 78%)

Accent 03 Lightest

#CEF2F2
RGB (206, 242, 242)
HSB (180, 15%, 95%)

Accent 03 Reverse

#20C4C7
RGB (32, 196, 199)
HSB (181, 84%, 78%)

Accent 04

#00FFFF
RGB (0, 255, 255)
HSB (180, 100%, 100%)

Code

<div>
  <div style={{"backgroundColor":"#14a1a3"}} />
  <div style={{"backgroundColor":"#0a7e80"}} />
  <div style={{"backgroundColor":"#aadddd"}} />
  <div style={{"backgroundColor":"#cef2f2"}} />
  <div style={{"backgroundColor":"#20c4c7"}} />
  <div style={{"backgroundColor":"#00ffff"}} />
</div>

Grays

Gray 01

#262626
RGB (38, 38, 38)
HSB (0, 0%, 15%)

Gray 02

#999999
RGB (153, 153, 153)
HSB (0, 0%, 60%)

Gray 03

#BFBFBF
RGB (191, 191, 191)
HSB (0, 0%, 75%)

Gray 04

#EBEBEB
RGB (235, 235, 235)
HSB (0, 0%, 92%)

Gray 05

#F6F6F6
RGB (246, 246, 246)
HSB (0, 0%, 96%)

White

#FFFFFF
RGB (255, 255, 255)
HSB (0, 0%, 100%)

Gray 01

#262626
RGB (38, 38, 38)
HSB (0, 0%, 15%)

Gray 02

#999999
RGB (153, 153, 153)
HSB (0, 0%, 60%)

Gray 03

#BFBFBF
RGB (191, 191, 191)
HSB (0, 0%, 75%)

Gray 04

#EBEBEB
RGB (235, 235, 235)
HSB (0, 0%, 92%)

Gray 05

#F6F6F6
RGB (246, 246, 246)
HSB (0, 0%, 96%)

White

#FFFFFF
RGB (255, 255, 255)
HSB (0, 0%, 100%)

Gray 01

#262626
RGB (38, 38, 38)
HSB (0, 0%, 15%)

Gray 02

#999999
RGB (153, 153, 153)
HSB (0, 0%, 60%)

Gray 03

#BFBFBF
RGB (191, 191, 191)
HSB (0, 0%, 75%)

Gray 04

#EBEBEB
RGB (235, 235, 235)
HSB (0, 0%, 92%)

Gray 05

#F6F6F6
RGB (246, 246, 246)
HSB (0, 0%, 96%)

White

#FFFFFF
RGB (255, 255, 255)
HSB (0, 0%, 100%)

Code

<div>
  <div style={{"backgroundColor":"#262626"}} />
  <div style={{"backgroundColor":"#999999"}} />
  <div style={{"backgroundColor":"#bfbfbf"}} />
  <div style={{"backgroundColor":"#ebebeb"}} />
  <div style={{"backgroundColor":"#f6f6f6"}} />
  <div style={{"backgroundColor":"rgba(255, 255, 255, 1)"}} />
</div>

Feedback

Error

#D93A3A
RGB (217, 58, 58)
HSB (360, 73%, 85%)

Error Dark

#A22B2B
RGB (162, 43, 43)
HSB (360, 73%, 64%)

Error Light

#F3C3C3
RGB (255, 237, 237)
HSB (360, 7%, 100%)

Error Lightest

#FBEBEB
RGB (251, 235, 235)
HSB (0, 6%, 98%)

Alert

#F2BD2A
RGB (242, 189, 42)
HSB (44, 83%, 95%)

Alert Dark

#C69A22
RGB (198, 154, 34)
HSB (44, 83%, 78%)

Alert Light

#FAE5AA
RGB (255, 245, 217)
HSB (44, 15%, 100%)

Alert Lightest

#FDF5DF
RGB (253, 245, 223)
HSB (44, 12%, 99%)

Error

#D93A3A
RGB (217, 58, 58)
HSB (360, 73%, 85%)

Error Dark

#A22B2B
RGB (162, 43, 43)
HSB (360, 73%, 64%)

Error Light

#F3C3C3
RGB (255, 237, 237)
HSB (360, 7%, 100%)

Error Lightest

#FBEBEB
RGB (251, 235, 235)
HSB (0, 6%, 98%)

Alert

#F2BD2A
RGB (242, 189, 42)
HSB (44, 83%, 95%)

Alert Dark

#C69A22
RGB (198, 154, 34)
HSB (44, 83%, 78%)

Alert Light

#FAE5AA
RGB (255, 245, 217)
HSB (44, 15%, 100%)

Alert Lightest

#FDF5DF
RGB (253, 245, 223)
HSB (44, 12%, 99%)

Error

#D93A3A
RGB (217, 58, 58)
HSB (360, 73%, 85%)

Error Dark

#A22B2B
RGB (162, 43, 43)
HSB (360, 73%, 64%)

Error Light

#F3C3C3
RGB (255, 237, 237)
HSB (360, 7%, 100%)

Error Lightest

#FBEBEB
RGB (251, 235, 235)
HSB (0, 6%, 98%)

Alert

#F2BD2A
RGB (242, 189, 42)
HSB (44, 83%, 95%)

Alert Dark

#C69A22
RGB (198, 154, 34)
HSB (44, 83%, 78%)

Alert Light

#FAE5AA
RGB (255, 245, 217)
HSB (44, 15%, 100%)

Alert Lightest

#FDF5DF
RGB (253, 245, 223)
HSB (44, 12%, 99%)

Success

#1BAB1E
RGB (27, 171, 30)
HSB (121, 84%, 67%)

Success Darkest

#265333
RGB (38, 83, 51)
HSB (137, 54%, 33%)

Success Dark

#148016
RGB (20, 128, 22)
HSB (121, 84%, 50%)

Success Light

#BAE5BB
RGB (219, 243, 219)
HSB (120, 10%, 95%)

Success Lightest

#E8F6E8
RGB (232, 246, 232)
HSB (120, 6%, 96%)

Success

#1BAB1E
RGB (27, 171, 30)
HSB (121, 84%, 67%)

Success Darkest

#265333
RGB (38, 83, 51)
HSB (137, 54%, 33%)

Success Dark

#148016
RGB (20, 128, 22)
HSB (121, 84%, 50%)

Success Light

#BAE5BB
RGB (219, 243, 219)
HSB (120, 10%, 95%)

Success Lightest

#E8F6E8
RGB (232, 246, 232)
HSB (120, 6%, 96%)

Success

#1BAB1E
RGB (27, 171, 30)
HSB (121, 84%, 67%)

Success Darkest

#265333
RGB (38, 83, 51)
HSB (137, 54%, 33%)

Success Dark

#148016
RGB (20, 128, 22)
HSB (121, 84%, 50%)

Success Light

#BAE5BB
RGB (219, 243, 219)
HSB (120, 10%, 95%)

Success Lightest

#E8F6E8
RGB (232, 246, 232)
HSB (120, 6%, 96%)

Code

<div>
  <div style={{"backgroundColor":"#d93a3a"}} />
  <div style={{"backgroundColor":"#a22b2b"}} />
  <div style={{"backgroundColor":"#f3c3c3"}} />
  <div style={{"backgroundColor":"#fbebeb"}} />
  <div style={{"backgroundColor":"#f2bd2a"}} />
  <div style={{"backgroundColor":"#c69a22"}} />
  <div style={{"backgroundColor":"#fae7b4"}} />
  <div style={{"backgroundColor":"#fdf5df"}} />
  <div style={{"backgroundColor":"#1bab1e"}} />
  <div style={{}} />
  <div style={{"backgroundColor":"#148016"}} />
  <div style={{"backgroundColor":"#bae5bb"}} />
  <div style={{"backgroundColor":"#e8f6e8"}} />
</div>

Helpful Links

Portfolio

Partners