Brand
Product
Components
Components
Overview
Colors
Typography
Grid
Spacing
Icons
Inputs
Page Elements
Filters
Feedback

Spacing

Spacing is used to consistently apply margin and padding across components and page layouts. Having a set spacing scale brings a rhythm to the product and creates a natural and familiar flow from page to page.

UsageCode

Spacing Guidelines

Spacing tokens should be used to properly align elements, components and create hierarchy throughout a page layout.

NameSize (px)Example
Slim
4
spacing table example image 4 px
Cozy
8
spacing table example image 8 px
Moderate
16
spacing table example image 16 px
Normal
24
spacing table example image 24 px
Comfy
32
spacing table example image 32 px
Spacious
48
spacing table example image 48 px
Giant
64
spacing table example image 64 px
Colossal
88
spacing table example image 88 px

Page Element: Layout Examples

Enterprise: Data Table

Showing spacing
enterprise data table image showing spacing
Hiding spacing
enterprise data table image hiding spacing

Enterprise: Event List

Showing spacing
enterprise event list image showing spacing
Hiding spacing
enterprise event list image hiding spacing

Marketplace: Event Listing

Showing spacing
marketplace event listing image showing spacing
Hiding spacing
marketplace event listing image hiding spacing

Marketplace: Overflow Menu

Showing spacing
marketplace overflow menu image showing spacing
Hiding spacing
marketplace overflow menu image hiding spacing
Helpful Links
Portfolio
Partners
Terms of UsePrivacy PolicyCookie Policy
© Ticketmaster 2018