Color Palette

Any color declarations should be using one of the variables described above (states being an exception — see below). You should never use colors outside of this palette.

States

To provide visual cues for interaction, we shade our colors on hover, when disabled, etc. We derive these colors by mixing the core colors with white or black.

We have two functions available to calculate these colors: get-darker() and get-lighter(). Each accepts one of the base colors as the first parameter and a percentage as an optional second parameter.

.default-darker {
  // defaults to 25% black
  color: get-darker($brand-primary);
}

.default-lighter {
  // defaults to 75% white
  color: get-lighter($brand-cta);
}

.custom-shade {
  color: get-lighter($brand-accent, 50%);
}
        

Typography

Our web font is TM Sans, a custom typeface created for us by the foundry Monotype.

Responsive fonts

With few exceptions, font sizes on our pages should be responsive at certain breakpoints. You should assume that any font size specified by a designer should be responsive unless explicitly stated otherwise.

To simplify the process of creating responsive fonts, we have a responsive-font() mixin to generate the appropriate code when passed a font size.

Note that we actually specify our font sizes in rem units. 1rem is equivalent to 10px.

// scss
.sample-text {
  @include responsive-font('md');
}
        

Using this mixin, our font sizes are then generated as follows (up to the specified widths).

And here they are displayed responsively (resize browser window to see):

Fixed font sizes

In the rare case of using a fixed font size, use our fixed-font() mixin.

It defaults to the md font size. You can override this by passing in a size parameter.

Note that fixed font sizes are based on the mobile breakpoint sizes (375px - 719px), as indicated in the previous section.

// scss
.fixed-example {
  @include fixed-font('lg');
}

// output
.fixed-example {
  font-size: 1.8rem;
  line-height: 1.2;
}
  

Line Height

By default, line-height for the page is set to 1.4. When using either of the font mixins above, line-height is calculated like so:

There may be situations where you need a specific line-height other than the above. The mixins have you covered for that, too, by allowing you to pass in a custom line-height value as an optional second parameter.

This can be useful for buttons or other situations where you want the text precisely vertically centered in a "box."

// scss
// note that this also works with responsive-font()
.fixed-example {
  @include fixed-font('lg', 5rem);
}

// output
.fixed-example {
  font-size: 1.8rem;
  line-height: 5rem;
}
        

Text Styles

Mixins for text styling

In the case where any of the above use cases is not appropriate, there are mixins available to achieve the desired appearance.

hdg-text mixin

The hdg-text() mixin can be used to create heading text that's bold with a bottom margin of 10px/20px. It is called by passing in a font-size and color. It will automatically make the font responsive via a built-in call to the responsive-font() mixin.

// scss
.some-heading {
  @include hdg-text('md', $black);
}

// output
.some-heading {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
  color: #000;
}

@media (min-width: 45em) {
  .some-heading {
    font-size: 16px;
  }
}
        

alt-copy mixin

The alt-copy() mixin can optionally be called with a font-size parameter. By default, font size is not specified and is based on the surrounding font size.

// scss
.ticket-fees {
  @include alt-copy();
}

// output
.ticket-fees {
  font-weight: normal;
  color: #768692;
}
        

Breakpoints

Breakpoint mixin

You can specify media queries by using the breakpoint() mixin.

The mixin accepts two parameters, $min and $max values. By default, if only one parameter is passed, it is assigned to the $min value.

The mixin takes px values and converts them to em units, which is the preferred way to write media queries.

// scss
.some-block {
  margin-top: 15px;

  // $bp-md will be assigned as min-width
  @include breakpoint($bp-md) {
    margin-top: 40px;
  }
}

// output
.some-block {
  margin-top: 15px;
}

// note the conversion to em units
@media (min-width: 45em) {
  .some-block {
    margin-top: 40px;
  }
}
        

If you need to specify the maximum breakpoint instead, you call the mixin by explicity assigning the parameter to $max.

// scss
.another-block {
  [...]

  // here we are explicitly assigning our parameter to $max
  @include breakpoint($max: $bp-lg - 1) {
    padding: 25px;
  }
}

// output
[...]

@media (max-width: 63.6875em) {
  .another-block {
    padding: 25px;
  }
}
        

Note in the above example that we actually passed in ($max: $bp-lg - 1) because we want the styling rules to apply to anything below the max value. (We don't want to actually include the max value as part of the declaration.)

In our example, we're saying applying these rules to anything less than the 1020px width.

Where to Use breakpoint

In SASS, declare your breakpoints within the elements affected. Do not declare media queries as another code block separate from the original context.

// DON'T do this
.class1 {
  font-size: 12px;
}
.class2 {
  padding: 50px;
}

[...]

@include breakpoint($bp-md) {
  .class1 {
    font-size: 18px;
  }
  .class2 {
    padding: 100px;
  }
}

// DO do this
.class1 {
  font-size: 12px;

  @include breakpoint($bp-md) {
    font-size: 18px;
  }
}
          

Grid

We use a Susy-based 12-column grid with 30px gutters.

Page Structure

The basic layout of our pages is as follows:

<body class="page edp">
  <div class="page__wrapper">
    <div class="page__frame">
      <div class="page__content">
        <!-- page content here -->
        

Note that you don't always need to use all of the classes above. Only use those classes that you need to establish page structure.

For example, if you don't need set to a background color for your section of a page that's different from the body background, then you don't need to use page__wrapper. Similarly, if your content is supposed to span the full width of the browser at all times, then you don't need page__frame.

Spacing

Spacing between elements on the page should be one of three possible values, as shown below:

In most cases, spacing should be responsive, so at the $bp-md breakpoint, the above values should then be:

To make it easier to set responsive spacing, there are two mixins available:

Both mixins behave in the same way.

1. If a single parameter is passed, it will apply the value equally on all four sides.
2. If you don't want all sides to be uniform, you can assign values to the sides you want to modify.

This is best illustrated with some examples.

// set same margin on all sides
@include outer-spacing($spacing-md);

// set padding on top and bottom
@include inner-spacing($top: $spacing-sm, $bottom: $spacing-sm);

// set padding on top, right, and left
@include inner-spacing($top: $spacing-sm, $right: $spacing-md, $left: $spacing-md)
        

When specifying spacing for any side(s), any side that you omit will be set to 0.

// set 30px bottom margin
.example {
  @include outer-spacing($bottom: $spacing-lg);
}

// output from above will be
.example {
  margin: 0 0 30px 0;
}

@media (min-width: 23.4375em) {
  .example {
    margin: 0 0 45px 0;
  }
}
        

Buttons

Quantity Picker

The following pattern should be used any time a user is prompted to select a quantity, except for the Embedded Quantity Filter (see below).

Embedded Quantity Filter

This is a legacy pattern that should only exist for the single ticket type filter on ISM. It should not be used for anything new.

Lists

Default list styling for lists is as follows:

If you want to disable default list style for your use case, use the unstyled-list() mixin.

// scss
.your-list {
  @include unstyled-list();

  // your styles here
}
        

Delimited Lists

The Delimited List pattern has list items separated by a border. Each list item has top and bottom padding, and the list itself has a bottom margin.

All spacing values follow the $spacing-sm rules as described in Spacing.

• Example 1
• Second item
• Last item in list

<ul class="delimited-list">
  <li class="delimited-list__item">
    First item
  </li>
  <li class="delimited-list__item">
    Secondy item
  </li>
  <li class="delimited-list__item">
    Third item
  </li>
</ul>
        

Embedded Delimited List

If you need to embed the Delimited List pattern in a container with a border, you'll need to turn off the bottom margin and apply left and right padding. Otherwise, the list content will be flush against the left and right borders.

Modifying the list to work in this scenario is simple: Just add the --embedded modifier to the list and list items:

<div class="some-box">
  <ul class="delimited-list delimited-list--embedded">
    <li class="delimited-list__item delimited-list__item--embedded">
      First item
    </li>
    <li class="delimited-list__item delimited-list__item--embedded">
      Secondy item
    </li>
    <li class="delimited-list__item delimited-list__item--embedded">
      Third item
    </li>
</div>
        

That'll give you this:

Compact Delimited List

There are occasions when separator lines are not desirable on mobile but are needed on desktop (resize to mobile view to see the difference).

• Example 1
• Second item
• Last item in list

<div class="module">
  <ul class="delimited-list">
    <li class="delimited-list__item delimited-list__item--compact">
      First item
    </li>
    <li class="delimited-list__item delimited-list__item--compact">
      Secondy item
    </li>
    <li class="delimited-list__item delimited-list__item--compact">
      Third item
    </li>
  </div>
</div>
        

Form Elements

Text fields

Example of an the initial state of the input text-field, with fancy (floating) label animation.

<div class="input-group">
  <input id="email" name="email" type="text" class="input-group__text-field">
  <label for="email" class="input-group__label">Email <span class="input-group__required">*</span></label>
</div>
        

Filled input text-fields contains the class has-content, which floats the label

<div class="input-group">
  <input name="email" type="text" class="input-group__text-field has-content" aria-required="true" value="Dohn Joe">
  <label for="email" class="input-group__label">Email <span class="input-group__required">*</span></label>
</div>
        

Same for text-fields in an error state. Only the input field has the class is-error-field

<div class="input-group">
  <input id="email" name="email" type="text" class="input-group__text-field is-error-field">
  <label for="email" class="input-group__label">Email <span class="input-group__required">*</span></label>
</div>
        

Tile Selections

Selected Tile:

Un-Selected Tile:

<div class="tile-selection tile-selection--selected is-clickable">
  <div class="split-content tile-selection__content">
    <div class="split-content__primary tile-selection--selected__primary-heading">
      Primary Heading
    </div>
    <div class="split-content__secondary tile-selection--selected__secondary-heading">
      Secondary Heading
    </div>
  </div>
  <div class="tile-selection__content">
      Content
  </div>
</div>

<div class="tile-selection is-clickable">
  <div class="tile-selection__content">
    -2350 EXP 11/15
  </div>
</div>
        

Tile rendered as a list

• -2350 EXP 11/15 -2350 EXP 11/15

  Edit
  Content
• -2350 EXP 11/15
• -1234 EXP 8/20

<ul class="sg-unstyled-list">
  <li class="tile-selection tile-selection--selected is-clickable">
    <div class="split-content tile-selection__content">
      <div class="split-content__primary tile-selection--selected__primary-heading">
        Primary Heading
      </div>
      <div class="split-content__secondary tile-selection--selected__secondary-heading">
        Secondary Heading
      </div>
    </div>
    <div class="tile-selection__content">
        Content
    </div>
  </li>

  <li class="tile-selection is-clickable">
    <div class="tile-selection__content">
      -2350 EXP 11/15
    </div>
  </li>
</ul>
        

Tooltips

Tooltip caret size is 10px on mobile, 15px on tablet/desktop. Internal padding of a tooltip follows the 10px/15px spacing rule as described in Spacing.

<div class="tooltip">
  <div class="tooltip__content">
    Content goes here.
  </div>
</div>
          

Sec-Row-Seat (SRS)

This is a visual pattern of displaying Section-Row-Seat (SRS) information, used in ISM tooltips and the checkout confirmation page.

The SRS element has a minimum width of 295px, which doesn't account for any padding from its container or the page margins.

Standard ticket header displaying a single ticket

Non-contiguous seats

Seat range

Worst case scenario

Layout Patterns

Split Content

This pattern dictates a block of content where one portion (or column) is primary and takes up all available width, while secondary content is only as wide as it needs to be.

The spacing between columns follows the responsive $spacing-sm values as defined in Spacing.

<div class="module">
  <div class="split-content">
    <div class="split-content__primary module__content">
      [...]
    </div>
    <div class="split-content__secondary module__content">
      [...]
    </div>
  </div>
</div>
        

Secondary content can be placed before or after the primary content.

<div class="module">
  <div class="split-content module__content">
    <div class="split-content__secondary">
      [...]
    </div>
    <div class="split-content__primary">
      [...]
    </div>
    <div class="split-content__secondary">
      [...]
    </div>
  </div>
</div>
        

If you need content to be top-aligned, use the split-content__primary--top or split-content__secondary--top modifiers.

<div class="module">
  <div class="split-content module__content">
    <div class="split-content__secondary split-content__secondary--top">
      [...]
    </div>
    <div class="split-content__primary">
      [...]
    </div>
    <div class="split-content__secondary">
      [...]
    </div>
  </div>
</div>
        

Datestamp

Here's how we display event date/time information based on various scenarios.

Variants

Timer

<div class="timer">
  <div class="is-offscreen">Time left to complete page.</div>
  <div class="timer__indicator">13:49</div>
  <div class="timer__spinner timer__animate"></div>
  <div class="timer__filler timer__animate"></div>
  <div class="timer__bg"></div>
  <div class="timer__mask timer__animate"></div>
</div>

<style>
  // to override default animation duration (i.e. 5s)
  .timer__animate {
      animation-duration: 35s;
  }
</style>
        

Event Headers

Event headers are best illustrated on a separate page.

ISM Tooltips

This pattern utilizes Delimited List, Tooltips, and SRS.