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

Email Signature

Everyone using a See Tickets US email should ensure that their email signature is outlined and displayed uniformly as is listed below. Text and logo are 100% black. The font is Roboto Regular in 16px font size with single line spacing.

Full Name [upper and lower case]
Job Title [upper and lower case]
See Tickets – North America
Phone Number [xxx-xxx-xxxx]
Logo [black] [link to https://www.seetickets.us/]

Example

Claire Lopacki
Head of Design
See Tickets – North America
(323) 908-0607

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