Style Guide

Color Typography Buttons Forms Panels Icons
Color Palette
Primary
Secondary
Tertiary
Accent
Background
Call To Action
Typography

h1 HEADING Heading

h2 HEADING Heading

h3 HEADING Heading

h4 HEADING Heading

h5 HEADING Heading
h6 HEADING Heading
h1 Heading


h2 Heading


h3 Heading


h4 Heading


h5 Heading


h6 Heading

This is an anchor with a link color

This is an anchor with a link color

This is BODY copy. Aliquam feugiat semper purus mattis auctor. Sed placerat tempor eros sed feugiat. In massa ipsum, venenatis sit amet ligula in, congue tincidunt risus. Proin et ornare tortor. Etiam egestas. Proin id porta odio. Vivamus pulvinar bibendum est id imperdiet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique est cupiditate, minus maiores impedit aperiam at ea vero expedita pariatur illo natus iure a, vel alias dolores. Eos, perferendis, voluptatem? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, ut reiciendis eius ratione non maxime tenetur quam vero molestiae cumque, nulla expedita at. Animi, recusandae adipisci doloremque veritatis. Dolorem, aliquam.

This is BODY copy. Aum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas lectus arcu, porttitor non erat non, condimentum ultrices magna. Mauris molestie malesuada nisi, et semper enim varius ut.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.


Nullam id dolor id nibh ultricies vehicula ut id elit.


Duis mollis, est non commodo luctus, nisi erat porttitor ligula.


Maecenas sed diam eget risus varius blandit sit amet non magna.


Etiam porta sem malesuada magna mollis euismod.


Donec ullamcorper nulla non metus auctor fringilla.
Buttons

Small Buttons

Standard Buttons

Standard Anchor as Button

Link Button Default Primary Secondary Tertiary Accent Add to Cart 
Link Button
 Default
Primary
 Secondary
 Tertiary
Accent

Large Buttons
Forms
Panels

Primary Panel

Secondary Panel

Tertiary Panel

Accent Panel

Call To Action Panel


    

        
Primary Panel
Icons
4.4 fa-500px []
4.7 fa-address-book []
4.7 fa-address-book-o []
4.7 fa-address-card []
4.7 fa-address-card-o []
fa-adjust []
fa-adn []
fa-align-center []
fa-align-justify []
fa-align-left []
fa-align-right []
4.4 fa-amazon []
fa-ambulance []
4.6 fa-american-sign-language-interpreting []
fa-anchor []
fa-android []
4.2 fa-angellist []
fa-angle-double-down []
fa-angle-double-left []
fa-angle-double-right []
fa-angle-double-up []
fa-angle-down []
fa-angle-left []
fa-angle-right []
fa-angle-up []
fa-apple []
fa-archive []
4.2 fa-area-chart []
fa-arrow-circle-down []
fa-arrow-circle-left []
fa-arrow-circle-o-down []
4.0 fa-arrow-circle-o-left []
4.0 fa-arrow-circle-o-right []
fa-arrow-circle-o-up []
fa-arrow-circle-right []
fa-arrow-circle-up []
fa-arrow-down []
fa-arrow-left []
fa-arrow-right []
fa-arrow-up []
fa-arrows []
fa-arrows-alt []
fa-arrows-h []
fa-arrows-v []
4.6 fa-asl-interpreting (alias) []
4.6 fa-assistive-listening-systems []
fa-asterisk []
4.2 fa-at []
4.6 fa-audio-description []
4.1 fa-automobile (alias) []
fa-backward []
4.4 fa-balance-scale []
fa-ban []
4.7 fa-bandcamp []
4.1 fa-bank (alias) []
fa-bar-chart []
fa-bar-chart-o (alias) []
fa-barcode []
fa-bars []
4.7 fa-bath []
4.7 fa-bathtub (alias) []
4.4 fa-battery (alias) []
4.4 fa-battery-0 (alias) []
4.4 fa-battery-1 (alias) []
4.4 fa-battery-2 (alias) []
4.4 fa-battery-3 (alias) []
4.4 fa-battery-4 (alias) []
4.4 fa-battery-empty []
4.4 fa-battery-full []
4.4 fa-battery-half []
4.4 fa-battery-quarter []
4.4 fa-battery-three-quarters []
4.3 fa-bed []
fa-beer []
4.1 fa-behance []
4.1 fa-behance-square []
fa-bell []
fa-bell-o []
4.2 fa-bell-slash []
4.2 fa-bell-slash-o []
4.2 fa-bicycle []
4.2 fa-binoculars []
4.2 fa-birthday-cake []
fa-bitbucket []
fa-bitbucket-square []
fa-bitcoin (alias) []
4.4 fa-black-tie []
4.6 fa-blind []
4.5 fa-bluetooth []
4.5 fa-bluetooth-b []
fa-bold []
fa-bolt []
4.1 fa-bomb []
fa-book []
fa-bookmark []
fa-bookmark-o []
4.6 fa-braille []
fa-briefcase []
fa-btc []
fa-bug []
4.1 fa-building []
fa-building-o []
fa-bullhorn []
fa-bullseye []
4.2 fa-bus []
4.3 fa-buysellads []
4.1 fa-cab (alias) []
4.2 fa-calculator []
fa-calendar []
4.4 fa-calendar-check-o []
4.4 fa-calendar-minus-o []
fa-calendar-o []
4.4 fa-calendar-plus-o []
4.4 fa-calendar-times-o []
fa-camera []
fa-camera-retro []
4.1 fa-car []
fa-caret-down []
fa-caret-left []
fa-caret-right []
fa-caret-square-o-down []
4.0 fa-caret-square-o-left []
fa-caret-square-o-right []
fa-caret-square-o-up []
fa-caret-up []
4.3 fa-cart-arrow-down []
4.3 fa-cart-plus []
4.2 fa-cc []
4.2 fa-cc-amex []
4.4 fa-cc-diners-club []
4.2 fa-cc-discover []
4.4 fa-cc-jcb []
4.2 fa-cc-mastercard []
4.2 fa-cc-paypal []
4.2 fa-cc-stripe []
4.2 fa-cc-visa []
fa-certificate []
fa-chain (alias) []
fa-chain-broken []
fa-check []
fa-check-circle []
fa-check-circle-o []
fa-check-square []
fa-check-square-o []
fa-chevron-circle-down []
fa-chevron-circle-left []
fa-chevron-circle-right []
fa-chevron-circle-up []
fa-chevron-down []
fa-chevron-left []
fa-chevron-right []
fa-chevron-up []
4.1 fa-child []
4.4 fa-chrome []
fa-circle []
fa-circle-o []
4.1 fa-circle-o-notch []
4.1 fa-circle-thin []
fa-clipboard []
fa-clock-o []
4.4 fa-clone []
fa-close (alias) []
fa-cloud []
fa-cloud-download []
fa-cloud-upload []
fa-cny (alias) []
fa-code []
fa-code-fork []
4.1 fa-codepen []
4.5 fa-codiepie []
fa-coffee []
fa-cog []
fa-cogs []
fa-columns []
fa-comment []
fa-comment-o []
4.4 fa-commenting []
4.4 fa-commenting-o []
fa-comments []
fa-comments-o []
fa-compass []
fa-compress []
4.3 fa-connectdevelop []
4.4 fa-contao []
fa-copy (alias) []
4.2 fa-copyright []
4.4 fa-creative-commons []
fa-credit-card []
4.5 fa-credit-card-alt []
fa-crop []
fa-crosshairs []
fa-css3 []
4.1 fa-cube []
4.1 fa-cubes []
fa-cut (alias) []
fa-cutlery []
fa-dashboard (alias) []
4.3 fa-dashcube []
4.1 fa-database []
4.6 fa-deaf []
4.6 fa-deafness (alias) []
fa-dedent (alias) []
4.1 fa-delicious []
fa-desktop []
4.1 fa-deviantart []
4.3 fa-diamond []
4.1 fa-digg []
fa-dollar (alias) []
4.0 fa-dot-circle-o []
fa-download []
fa-dribbble []
4.7 fa-drivers-license (alias) []
4.7 fa-drivers-license-o (alias) []
fa-dropbox []
4.1 fa-drupal []
4.5 fa-edge []
fa-edit (alias) []
4.7 fa-eercast []
fa-eject []
fa-ellipsis-h []
fa-ellipsis-v []
4.1 fa-empire []
fa-envelope []
fa-envelope-o []
4.7 fa-envelope-open []
4.7 fa-envelope-open-o []
4.1 fa-envelope-square []
4.6 fa-envira []
fa-eraser []
4.7 fa-etsy []
fa-eur []
fa-euro (alias) []
fa-exchange []
fa-exclamation []
fa-exclamation-circle []
fa-exclamation-triangle []
fa-expand []
4.4 fa-expeditedssl []
fa-external-link []
fa-external-link-square []
fa-eye []
fa-eye-slash []
4.2 fa-eyedropper []
4.6 fa-fa (alias) []
fa-facebook []
fa-facebook-f (alias) []
4.3 fa-facebook-official []
fa-facebook-square []
fa-fast-backward []
fa-fast-forward []
4.1 fa-fax []
fa-feed (alias) []
fa-female []
fa-fighter-jet []
fa-file []
4.1 fa-file-archive-o []
4.1 fa-file-audio-o []
4.1 fa-file-code-o []
4.1 fa-file-excel-o []
4.1 fa-file-image-o []
4.1 fa-file-movie-o (alias) []
fa-file-o []
4.1 fa-file-pdf-o []
4.1 fa-file-photo-o (alias) []
4.1 fa-file-picture-o (alias) []
4.1 fa-file-powerpoint-o []
4.1 fa-file-sound-o (alias) []
fa-file-text []
fa-file-text-o []
4.1 fa-file-video-o []
4.1 fa-file-word-o []
4.1 fa-file-zip-o (alias) []
fa-files-o []
fa-film []
fa-filter []
fa-fire []
fa-fire-extinguisher []
4.4 fa-firefox []
4.6 fa-first-order []
fa-flag []
fa-flag-checkered []
fa-flag-o []
fa-flash (alias) []
fa-flask []
fa-flickr []
fa-floppy-o []
fa-folder []
fa-folder-o []
fa-folder-open []
fa-folder-open-o []
fa-font []
4.6 fa-font-awesome []
4.4 fa-fonticons []
4.5 fa-fort-awesome []
4.3 fa-forumbee []
fa-forward []
fa-foursquare []
4.7 fa-free-code-camp []
fa-frown-o []
4.2 fa-futbol-o []
fa-gamepad []
fa-gavel []
fa-gbp []
4.1 fa-ge (alias) []
fa-gear (alias) []
fa-gears (alias) []
4.4 fa-genderless []
4.4 fa-get-pocket []
4.4 fa-gg []
4.4 fa-gg-circle []
fa-gift []
4.1 fa-git []
4.1 fa-git-square []
fa-github []
fa-github-alt []
fa-github-square []
4.6 fa-gitlab []
fa-gittip (alias) []
fa-glass []
4.6 fa-glide []
4.6 fa-glide-g []
fa-globe []
4.1 fa-google []
fa-google-plus []
4.6 fa-google-plus-circle (alias) []
4.6 fa-google-plus-official []
fa-google-plus-square []
4.2 fa-google-wallet []
4.1 fa-graduation-cap []
fa-gratipay []
4.7 fa-grav []
fa-group (alias) []
fa-h-square []
4.1 fa-hacker-news []
4.4 fa-hand-grab-o (alias) []
4.4 fa-hand-lizard-o []
fa-hand-o-down []
fa-hand-o-left []
fa-hand-o-right []
fa-hand-o-up []
4.4 fa-hand-paper-o []
4.4 fa-hand-peace-o []
4.4 fa-hand-pointer-o []
4.4 fa-hand-rock-o []
4.4 fa-hand-scissors-o []
4.4 fa-hand-spock-o []
4.4 fa-hand-stop-o (alias) []
4.7 fa-handshake-o []
4.6 fa-hard-of-hearing (alias) []
4.5 fa-hashtag []
fa-hdd-o []
4.1 fa-header []
fa-headphones []
fa-heart []
fa-heart-o []
4.3 fa-heartbeat []
4.1 fa-history []
fa-home []
fa-hospital-o []
4.3 fa-hotel (alias) []
4.4 fa-hourglass []
4.4 fa-hourglass-1 (alias) []
4.4 fa-hourglass-2 (alias) []
4.4 fa-hourglass-3 (alias) []
4.4 fa-hourglass-end []
4.4 fa-hourglass-half []
4.4 fa-hourglass-o []
4.4 fa-hourglass-start []
4.4 fa-houzz []
fa-html5 []
4.4 fa-i-cursor []
4.7 fa-id-badge []
4.7 fa-id-card []
4.7 fa-id-card-o []
4.2 fa-ils []
fa-image (alias) []
4.7 fa-imdb []
fa-inbox []
fa-indent []
4.4 fa-industry []
fa-info []
fa-info-circle []
fa-inr []
4.6 fa-instagram []
4.1 fa-institution (alias) []
4.4 fa-internet-explorer []
4.3 fa-intersex (alias) []
4.2 fa-ioxhost []
fa-italic []
4.1 fa-joomla []
fa-jpy []
4.1 fa-jsfiddle []
fa-key []
fa-keyboard-o []
fa-krw []
4.1 fa-language []
fa-laptop []
4.2 fa-lastfm []
4.2 fa-lastfm-square []
fa-leaf []
4.3 fa-leanpub []
fa-legal (alias) []
fa-lemon-o []
fa-level-down []
fa-level-up []
4.1 fa-life-bouy (alias) []
4.1 fa-life-buoy (alias) []
4.1 fa-life-ring []
4.1 fa-life-saver (alias) []
fa-lightbulb-o []
4.2 fa-line-chart []
fa-link []
fa-linkedin []
fa-linkedin-square []
4.7 fa-linode []
fa-linux []
fa-list []
fa-list-alt []
fa-list-ol []
fa-list-ul []
fa-location-arrow []
fa-lock []
fa-long-arrow-down []
fa-long-arrow-left []
fa-long-arrow-right []
fa-long-arrow-up []
4.6 fa-low-vision []
fa-magic []
fa-magnet []
fa-mail-forward (alias) []
fa-mail-reply (alias) []
fa-mail-reply-all (alias) []
fa-male []
4.4 fa-map []
fa-map-marker []
4.4 fa-map-o []
4.4 fa-map-pin []
4.4 fa-map-signs []
4.3 fa-mars []
4.3 fa-mars-double []
4.3 fa-mars-stroke []
4.3 fa-mars-stroke-h []
4.3 fa-mars-stroke-v []
fa-maxcdn []
4.2 fa-meanpath []
4.3 fa-medium []
fa-medkit []
4.7 fa-meetup []
fa-meh-o []
4.3 fa-mercury []
4.7 fa-microchip []
fa-microphone []
fa-microphone-slash []
fa-minus []
fa-minus-circle []
fa-minus-square []
fa-minus-square-o []
4.5 fa-mixcloud []
fa-mobile []
fa-mobile-phone (alias) []
4.5 fa-modx []
fa-money []
fa-moon-o []
4.1 fa-mortar-board (alias) []
4.3 fa-motorcycle []
4.4 fa-mouse-pointer []
fa-music []
fa-navicon (alias) []
4.3 fa-neuter []
4.2 fa-newspaper-o []
4.4 fa-object-group []
4.4 fa-object-ungroup []
4.4 fa-odnoklassniki []
4.4 fa-odnoklassniki-square []
4.4 fa-opencart []
4.1 fa-openid []
4.4 fa-opera []
4.4 fa-optin-monster []
fa-outdent []
4.0 fa-pagelines []
4.2 fa-paint-brush []
4.1 fa-paper-plane []
4.1 fa-paper-plane-o []
fa-paperclip []
4.1 fa-paragraph []
fa-paste (alias) []
fa-pause []
4.5 fa-pause-circle []
4.5 fa-pause-circle-o []
4.1 fa-paw []
4.2 fa-paypal []
fa-pencil []
fa-pencil-square []
fa-pencil-square-o []
4.5 fa-percent []
fa-phone []
fa-phone-square []
fa-photo (alias) []
fa-picture-o []
4.2 fa-pie-chart []
4.6 fa-pied-piper []
4.1 fa-pied-piper-alt []
4.1 fa-pied-piper-pp []
fa-pinterest []
4.3 fa-pinterest-p []
fa-pinterest-square []
fa-plane []
fa-play []
fa-play-circle []
fa-play-circle-o []
4.2 fa-plug []
fa-plus []
fa-plus-circle []
fa-plus-square []
4.0 fa-plus-square-o []
4.7 fa-podcast []
fa-power-off []
fa-print []
4.5 fa-product-hunt []
fa-puzzle-piece []
4.1 fa-qq []
fa-qrcode []
fa-question []
fa-question-circle []
4.6 fa-question-circle-o []
4.7 fa-quora []
fa-quote-left []
fa-quote-right []
4.1 fa-ra (alias) []
fa-random []
4.7 fa-ravelry []
4.1 fa-rebel []
4.1 fa-recycle []
4.1 fa-reddit []
4.5 fa-reddit-alien []
4.1 fa-reddit-square []
fa-refresh []
4.4 fa-registered []
fa-remove (alias) []
fa-renren []
fa-reorder (alias) []
fa-repeat []
fa-reply []
fa-reply-all []
4.1 fa-resistance (alias) []
fa-retweet []
fa-rmb (alias) []
fa-road []
fa-rocket []
fa-rotate-left (alias) []
fa-rotate-right (alias) []
4.0 fa-rouble (alias) []
fa-rss []
fa-rss-square []
4.0 fa-rub []
4.0 fa-ruble (alias) []
fa-rupee (alias) []
4.7 fa-s15 (alias) []
4.4 fa-safari []
fa-save (alias) []
fa-scissors []
4.5 fa-scribd []
fa-search []
fa-search-minus []
fa-search-plus []
4.3 fa-sellsy []
4.1 fa-send (alias) []
4.1 fa-send-o (alias) []
4.3 fa-server []
fa-share []
4.1 fa-share-alt []
4.1 fa-share-alt-square []
fa-share-square []
fa-share-square-o []
4.2 fa-shekel (alias) []
4.2 fa-sheqel (alias) []
fa-shield []
4.3 fa-ship []
4.3 fa-shirtsinbulk []
4.5 fa-shopping-bag []
4.5 fa-shopping-basket []
fa-shopping-cart []
4.7 fa-shower []
fa-sign-in []
4.6 fa-sign-language []
fa-sign-out []
fa-signal []
4.6 fa-signing (alias) []
4.3 fa-simplybuilt []
fa-sitemap []
4.3 fa-skyatlas []
fa-skype []
4.1 fa-slack []
4.1 fa-sliders []
4.2 fa-slideshare []
fa-smile-o []
4.6 fa-snapchat []
4.6 fa-snapchat-ghost []
4.6 fa-snapchat-square []
4.7 fa-snowflake-o []
4.2 fa-soccer-ball-o (alias) []
fa-sort []
fa-sort-alpha-asc []
fa-sort-alpha-desc []
fa-sort-amount-asc []
fa-sort-amount-desc []
fa-sort-asc []
fa-sort-desc []
fa-sort-down (alias) []
fa-sort-numeric-asc []
fa-sort-numeric-desc []
fa-sort-up (alias) []
4.1 fa-soundcloud []
4.1 fa-space-shuttle []
fa-spinner []
4.1 fa-spoon []
4.1 fa-spotify []
fa-square []
fa-square-o []
4.0 fa-stack-exchange []
fa-stack-overflow []
fa-star []
fa-star-half []
fa-star-half-empty (alias) []
fa-star-half-full (alias) []
fa-star-half-o []
fa-star-o []
4.1 fa-steam []
4.1 fa-steam-square []
fa-step-backward []
fa-step-forward []
fa-stethoscope []
4.4 fa-sticky-note []
4.4 fa-sticky-note-o []
fa-stop []
4.5 fa-stop-circle []
4.5 fa-stop-circle-o []
4.3 fa-street-view []
fa-strikethrough []
4.1 fa-stumbleupon []
4.1 fa-stumbleupon-circle []
fa-subscript []
4.3 fa-subway []
fa-suitcase []
fa-sun-o []
4.7 fa-superpowers []
fa-superscript []
4.1 fa-support (alias) []
fa-table []
fa-tablet []
fa-tachometer []
fa-tag []
fa-tags []
fa-tasks []
4.1 fa-taxi []
4.7 fa-telegram []
4.4 fa-television []
4.1 fa-tencent-weibo []
fa-terminal []
fa-text-height []
fa-text-width []
fa-th []
fa-th-large []
fa-th-list []
4.6 fa-themeisle []
4.7 fa-thermometer (alias) []
4.7 fa-thermometer-0 (alias) []
4.7 fa-thermometer-1 (alias) []
4.7 fa-thermometer-2 (alias) []
4.7 fa-thermometer-3 (alias) []
4.7 fa-thermometer-4 (alias) []
4.7 fa-thermometer-empty []
4.7 fa-thermometer-full []
4.7 fa-thermometer-half []
4.7 fa-thermometer-quarter []
4.7 fa-thermometer-three-quarters []
fa-thumb-tack []
fa-thumbs-down []
fa-thumbs-o-down []
fa-thumbs-o-up []
fa-thumbs-up []
fa-ticket []
fa-times []
fa-times-circle []
fa-times-circle-o []
4.7 fa-times-rectangle (alias) []
4.7 fa-times-rectangle-o (alias) []
fa-tint []
fa-toggle-down (alias) []
4.0 fa-toggle-left (alias) []
4.2 fa-toggle-off []
4.2 fa-toggle-on []
fa-toggle-right (alias) []
fa-toggle-up (alias) []
4.4 fa-trademark []
4.3 fa-train []
4.3 fa-transgender []
4.3 fa-transgender-alt []
4.2 fa-trash []
fa-trash-o []
4.1 fa-tree []
fa-trello []
4.4 fa-tripadvisor []
fa-trophy []
fa-truck []
4.0 fa-try []
4.2 fa-tty []
fa-tumblr []
fa-tumblr-square []
4.0 fa-turkish-lira (alias) []
4.4 fa-tv (alias) []
4.2 fa-twitch []
fa-twitter []
fa-twitter-square []
fa-umbrella []
fa-underline []
fa-undo []
4.6 fa-universal-access []
4.1 fa-university []
fa-unlink (alias) []
fa-unlock []
fa-unlock-alt []
fa-unsorted (alias) []
fa-upload []
4.5 fa-usb []
fa-usd []
fa-user []
4.7 fa-user-circle []
4.7 fa-user-circle-o []
fa-user-md []
4.7 fa-user-o []
4.3 fa-user-plus []
4.3 fa-user-secret []
4.3 fa-user-times []
fa-users []
4.7 fa-vcard (alias) []
4.7 fa-vcard-o (alias) []
4.3 fa-venus []
4.3 fa-venus-double []
4.3 fa-venus-mars []
4.3 fa-viacoin []
4.6 fa-viadeo []
4.6 fa-viadeo-square []
fa-video-camera []
4.4 fa-vimeo []
4.0 fa-vimeo-square []
4.1 fa-vine []
fa-vk []
4.6 fa-volume-control-phone []
fa-volume-down []
fa-volume-off []
fa-volume-up []
fa-warning (alias) []
4.1 fa-wechat (alias) []
fa-weibo []
4.1 fa-weixin []
4.3 fa-whatsapp []
4.0 fa-wheelchair []
4.6 fa-wheelchair-alt []
4.2 fa-wifi []
4.4 fa-wikipedia-w []
4.7 fa-window-close []
4.7 fa-window-close-o []
4.7 fa-window-maximize []
4.7 fa-window-minimize []
4.7 fa-window-restore []
fa-windows []
fa-won (alias) []
4.1 fa-wordpress []
4.6 fa-wpbeginner []
4.7 fa-wpexplorer []
4.6 fa-wpforms []
fa-wrench []
fa-xing []
fa-xing-square []
4.4 fa-y-combinator []
4.1 fa-y-combinator-square (alias) []
4.1 fa-yahoo []
4.4 fa-yc (alias) []
4.1 fa-yc-square (alias) []
4.2 fa-yelp []
fa-yen (alias) []
4.6 fa-yoast []
fa-youtube []
fa-youtube-play []
fa-youtube-square []