Assets – See Tickets Style Guide

See Tickets US assets are simple, portable, and reusable. Consistent use of these assets ensures users intuitively understand all calls-to-action, hierarchy, field elements, and more.

Buttons

All buttons have 12px padding top and bottom and 32px padding on both sides.

Primary – See Tickets Teal

Default State

background-color: #00999A 100% color: #fff font-weight: regular text-transform: uppercase
padding: 12px 32px
border-radius: 4px

Hover State

background-color: #00999A 60% color: #fff font-weight: regular text-transform: uppercase
padding: 12px 32px
border-radius: 4px

Disabled State

background-color: #00999A 10% color: #fff font-weight: regular text-transform: uppercase
padding: 12px 32px
border-radius: 4px

Secondary – Gray 4

Default State

background-color: #495057 100% color: #fff font-weight: regular text-transform: uppercase
padding: 12px 32px
border-radius: 4px

Hover State

background-color: #495057 60% color: #fff font-weight: regular text-transform: uppercase
padding: 12px 32px
border-radius: 4px

Disabled State

background-color: #495057 10% color: #fff font-weight: regular text-transform: uppercase
padding: 12px 32px
border-radius: 4px

Tertiary – Gray 4

Default State

background-color: transparent
border-width: 1px border-color: #495057 60% color: #495057 100% font-weight: regular text-transform: uppercase
padding: 12px 32px
border-radius: 4px

Hover State

background-color: transparent
border-width: 1px border-color: #495057 100% color: #495057 100% font-weight: regular text-transform: uppercase
padding: 12px 32px
border-radius: 4px

Disabled State

background-color: transparent
border-width: 1px border-color: #495057 10% color: #495057 100% font-weight: regular text-transform: uppercase
padding: 12px 32px
border-radius: 4px

Examples

Icons

Icons have 2px minimum padding around them. They fit in a 24px square and have 2px stroke weight for consistency. For access to these public Google Material Design icons, you can go to https://fonts.google.com/icons for icon downloads and integration guides.

Common

add	close	remove	check	search	content_copy	notifications	delete_outline	edit	calendar_today
info_outline	warning_amber	fiber_manual_record	circle	menu	unfold_more	filter_alt	cancel	more_vert	save
design_services	star	star_border

Arrows

arrow_upward	arrow_forward	arrow_downward	arrow_back	refresh

Chevrons

keyboard_arrow_up	keyboard_arrow_right	keyboard_arrow_down	keyboard_arrow_left

Contact

person	terrain	alternate_email	mail_outline	phone	contact_page

Navigation

access_time	person_outline	people	article

Download and Share

file_upload	download

Settings

more_horiz	settings

Favorite

favorite	favorite_outline

Graph

trending_up	trending_down	bar_chart

Finance

credit_card	qr_code_2	monetization_on	replay_circle_filled	do_not_disturb

Event

confirmation_number	markunread_mailbox	location_on	event_seat	local_shipping

Social

insert_link	facebook

Text Edit

format_bold	format_italic	format_underlined	format_strikethrough	format_list_bulleted	format_list_numbered	format_align_left	format_align_center	format_align_right	spellcheck
format_clear	format_size	emoji_emotions

Favicons

A favicon is an image file that typically serves as a website’s icon feature for shortcuts, browser tabs, bookmarks, etc. Download your file, rename to “favicon.ico” and upload wherever needed.

Pink

Yellow

Teal

Purple

Black

White

Photography

Approved images can be found at the online database Unsplash. Photos can be downloaded and used for free, for commercial and non-commercial purposes. No permission needed.

Resource: https://unsplash.com