Overview
This UI toolkit is a modular design system based on atomic design principle. It contains different pieces that can be assembled into more complex components and pages.
This guide contains examples, code snippets, documentation, and style guidelines.
Atoms
Atoms are the building blocks of UI. They're the smallest elements which can't be broken down further without losing their meanings.
Colors
Below is the list of all colors in the brand guideline.
Note: Not all of them are in use and the list needs to be refined to what's in use and what's not.
#0085CA blue 10
#1B2731charcoal 10
#1B2731slate 10
#1B2731teal 10
#2492CD blue 9
#333D46charcoal 9
#495860slate 9
#1D625C - teal 9
#3C9ED3blue 8
#49525Acharcoal 8
#5D6B72slate 8
#36736Eteal 8
#55AAD8blue 7
#60686Fcharcoal 7
#717D84slate 7
#4F8580teal 7
#55AAD8blue 6
#767D83charcoal 6
#859095slate 6
#689692teal 6
#85C2E3blue 5
#8D9298charcoal 5
#99A2A6slate 5
#81A7A4teal 5
#9DCEE9blue 4
#A4A8ADcharcoal 4
#AEB5B8slate 4
#9AB9B6teal 4
#B5DAEEblue 3
#BABEC1charcoal 3
#C2C7CAslate 3
#B3CAC8teal 3
#CEE7F4blue 2
#D1D4D6charcoal 2
#D6DADCslate 2
#CDDCDBteal 2
#E6F3F9blue 1
#E8E9EAcharcoal 1
#EAECEDslate 1
#E5EDEDteal 1
#ABD037lime-green 10
#A4AAADgray 10
#77A2D6light-blue 10
#8E1E21red 10
#B4D54Blime-green 9
#ADB2B5gray 9
#85ACDAlight-blue 9
#9A3537red 9
#BCD95Flime-green 8
#B6BBBEgray 8
#92B5DElight-blue 8
#A54B4Dred 8
#BCD95Flime-green 7
#C0C3C6gray 7
#A0BEE2light-blue 7
#B16264red 7
#CDE387lime-green 6
#C8CCCEgray 6
#ADC7E6light-blue 6
#BC787Ared 6
#D5E79Blime-green 5
#D1D4D6gray 5
#BBD1EAlight-blue 5
#C78E8Fred 5
#DEECAFlime-green 4
#DBDDDEgray 4
#C9DAEFlight-blue 4
#D2A5A6red 4
#E6F1C3lime-green 3
#E4E5E6gray 3
#D6E3F3light-blue 3
#DDBBBCred 3
#EEF6D7lime-green 2
#EDEEEFgray 2
#E4ECF7light-blue 2
#E9D2D3red 2
#F6FAEBlime-green 1
#F6F6F7gray 1
#F1F6FBlight-blue 1
#F4E8E8red 1
#FE7E43orange 10
#DFDA22yellow 10
#7B878Elight-slate 10
#22AF60green 10
#F29869orange 9
#E5E14Eyellow 9
#969FA5light-slate 9
#4FBF80green 10
#F29869orange 8
#E5E14Eyellow 8
#969FA5light-slate 8
#4FBF80green 8
#F4AB85orange 7
#EAE76Fyellow 7
#A9B1B6light-slate 7
#6FCB97green 7
Containers
.container-1, .container-2, .container-3, .container-invalid, .container-valid, .container-warning, .container-success, .container-error {padding: 1rem; margin-bottom: 1rem;}
.container-1 {border: none; -webkit-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.2); -moz-box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.2); box-shadow: 0px 1px 2px 2px rgba(0,0,0,0.2);}
.container-2 {border: 1px solid #D1D4D6;}
.container-3 {background: #E8E9EA;}Icons
Icons are visual expression of our products, service, and tools. We use Font Awesome collection as well as customized icons made in house.
Font Awesome Icons
Font Awesome is an icon font, originally created for Bootstrap. We use Font Awesome icons as a pictographic language of web-related actions. Default icon color: charcoal6 #767D83
| Icons | Class | Unicode | Size |
|---|---|---|---|
| fa-exclamation-triangle | f071 | 1rem/16px | |
| fa-star | f005 | 1rem/16px | |
| fa-check | f00c | 1rem/16px | |
| fa-times | f00d | 1rem/16px | |
| fa-flag | f024 | 1rem/16px | |
| fa-search | f002 | 1rem/16px | |
| fa-refresh | f021 | 1rem/16px | |
| fa-double-left | f100 | 1.25rem/20px | |
| fa-double-right | f101 | 1.25rem/20px | |
| fa-angle-left | f104 | 1.25rem/20px | |
| fa-angle-right | f105 | 1.25rem/20px | |
| fa-angle-up | f106 | 1.25rem/20px | |
| fa-angle-down | f107 | 1.25rem/20px | |
| fa-question-circle | f1089 | 1.25rem/20px |
.fa {color: #767D83;}
.fa.fa-angle-double-left, .fa.fa-angle-double-right, .fa.fa-angle-left, .fa.fa-angle-right, .fa.fa-angle-up, .fa.fa-angle-down, .fa.fa-question-circle {font-size: 1.25rem;}Map Icons
Map icons are generated using css and images.
Map pin for non-partner resorts
Map pin for partner resorts
.map-box-pin {background: #0085ca; text-align: center;}
.map-box-pin:hover {background: #55AAD8; cursor: pointer;}
.map-box-pin-container {position: relative;}
.map-box-pin.no-deals {background: #85c2e3; border-radius: 50%; border: 2px solid #fff; width: 16px; height: 16px;}
.map-box-pin.no-deals:hover {background: #0085ca;}
.map-box-pin-pointer {position: absolute; top: 100%; left: 0; margin-top: -1px; border-bottom: 10px solid transparent; border-left: 10px solid #0085ca;}
.map-box-pin:hover .map-box-pin-pointer {border-left-color: #55AAD8;}
.leaflet-marker-icon {width: 28px; height:23px;}Trail Map Icons
Trail map icons are generated using a custom icon font called liftopia-icons.tff, similar to how we use Font Awesome for UI icons.
Trail icon - Beginner
Trail icon - Intermediate
Trail icon - Advanced
Trail icon - Expert
[class*=" icon-"], [class^=icon-] {font-family: liftopia-icons; speak: none; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.trail-icon {font-size: 1rem;}
.trail-icon.icon-circle {color: #22AF60;}
.icon-circle:before {content: "\e600";}
.trail-icon.icon-square {color: #0085ca;}
.icon-square:before {content: "\e603";}
.trail-icon.icon-square {color: #0085ca;}
.icon-square:before {content: "\e603";}
.trail-icon.icon-diamond {color: #49525A;}
.icon-diamond:before {content: "\e601";}
.trail-icon.icon-double-diamond {color: #1B2726;}
.icon-double-diamond:before {content: "\e602";}Imagery
Imagery is more than a pretty picture. We use imagery to communicate Liftopia and our partner's brand and messaging.
Resort Logo
Resort logo image file is default at 140px wide by 90px high. Most of them has white background, while some have transparent and other color background.
If resort logo is not available, display this default image.
Cover Photo
Cover photos are used on Resort microsite. Resorts can submit their cover photo. Otherwise, we assign one of the 3 default cover images on their microsite.
Trail Map
Trail map photos are submitted by resorts/users or curated by Liftopia. If no trail map photos are available, we use the default image bellow
Other Photos
Other photos such as trail maps and resort photos are provided by resorts and users, as well as curated by Liftopia.
Notifications & Alerts
.notification {padding: 1rem; margin-bottom: 1rem;}
.notification.valid {border: 1px solid #B5DAEE; background: #E6F3F9;}
.notification.invalid {border: 1px solid #DDBBBC; background: #F4E8E8;}
.notification.success {background: #22AF60; color: white;}
.notification.warning {background: #DFDA22;}
.notification.error {background: #A54B4D; color: white;}Paddings and Margins
Paddings and margins are incrementals of 0.5rem/8px.
Typography
We use two type faces: Museo Sans and Helvetica Neue. Museo Sans is used for headers and CTA text links, while Helvetica Neue is used for body texts, supporting texts, and regular text links.
Headers
H1 to H6, styled as followed:
H1 - MS 500 - 2rem/32px charcoal8
H2 - MS 500 - 1.5rem/24px charcoal8
H3 - MS 500 - 1.25rem/20px charcoal8
H4 - MS 700 - 1.125rem/18px charcoal8
H5 - MS 500 - 1rem/16px charcoal8
H6 - MS 500 - 1rem/16px charcoal6
h1, h2, h3, h4, h5, h6, .product-title, .duration, .per-day-price, .tickets .purchase, .trail-count, .from, .dollars, .button, .value-prop-text {font-family: 'museo_sans500', 'Helvetica Neue', Helvetica, Arial, sans-serif;}
h1, h2, h3, h4, h5 {color: #49525A;}
h1 {font-size: 2rem;}
h2 {font-size: 1.5rem;}
h3 {font-size: 1.25rem;}
h4 {font-size: 1.125rem;}
h5 {font-size: 1rem;}
h6 {font-size: 1rem; color: #767D83;}Text
Includes body text and links in various styles as followed:
Body font - HN Regular - 1rem/16px charcoal8
Body font bold - HN Bold - 1rem/16px charcoal8
Text link - HN Regular - 1rem/16px blue10
CTA text link - MS 500 - 1rem/16px blue10
Support Text
Valid Text
Invalid Text
<p><Body font - HN Regular - 1rem/16px charcoal8</p>
<p><strong>Body font bold - HN Bold - 1rem/16px charcoal8</strong></p>
<p><a href="#">Text link - HN Regular - 1rem/16px blue10</a></p>
<p><a href="#" class="cta-text-link">CTA text link - MS 500 - 1rem/16px blue10</a></p>body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-style: normal; font-variant: normal; font-weight: 400; background: #fff; color: #49525A;}
a {color: #0085ca;}
a.cta-text-link {font-family: Museo,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-weight: 500; color: #0085ca;}
.support-text {font-size: 14px; color: #767d83;}
.support-text.valid {color: #22AF60;}
.support-text.invalid {color: #A54B4D;}Molecules
Molecules are groups of elements that function together as a unit.